Skills20History

accordioncore

Expandable section groups with type=single (exclusive) or type=multiple (independent). AccordionItem/Header/Trigger/Content composition. CSS variable animation via --loke-accordion-content-height. Keyboard navigation (Home/End/Arrow keys). collapsible prop only applies to type=single. AccordionContent proxies --loke-collapsible-content-height into --loke-accordion-content-height.

208 lines

alert-dialogcore

Confirmation dialogs for destructive actions. AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel. Always modal, always prevents outside dismiss, auto-focuses cancel button.

215 lines

checkboxcore

Checkbox + CheckboxIndicator primitives. Checked/unchecked/indeterminate states via data-state. Hidden native input for form participation. Indeterminate-to-checked toggle cycle. Detached-form prop pattern. Label association required for accessible name.

169 lines

choosing-the-right-componentlifecycle

Decision guide for selecting the correct @loke/ui primitive. Dialog vs AlertDialog, Popover vs Tooltip vs DropdownMenu, Select vs Popover+Command, Accordion vs Collapsible, Checkbox vs Switch. Import path rules: always @loke/ui/[component], never @loke/ui root, never @radix-ui paths. Failure modes: hallucinated components, native HTML fallback, skipping portals, verbose intermediary requirements, conciseness trap.

293 lines

collapsiblecore

Single collapsible section with Collapsible/CollapsibleTrigger/CollapsibleContent. CSS variable animation via --loke-collapsible-content-height and --loke-collapsible-content-width (measured via ResizeObserver-style layout effect). forceMount for exit animations. Controlled via open/onOpenChange. For multiple coordinated sections, use Accordion (which wraps Collapsible internally).

205 lines

commandcore

Command palettes and searchable lists with Command/CommandInput/CommandList/ CommandItem/CommandGroup/CommandGroupHeading/CommandEmpty/CommandLoading. Built-in fuzzy filtering via commandScore. Custom filter function via filter prop. Compose Popover+Command for combobox/async-select patterns — the recommended replacement for Select when options are async, searchable, or dynamically loaded. Vim bindings (ctrl+n/j/p/k) enabled by default.

316 lines

context-and-collectioncore

Building compound components with createContext (error-throwing consumer hook) and createContextScope (nested composition with scope threading). createCollection for DOM-ordered item tracking via data attributes + ResizeObserver pattern. Scope threading required for components that may be nested within themselves (Accordion inside Accordion, nested Menus, etc.).

234 lines

dialogcore

Modal and non-modal dialogs. Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose. Focus trapping, scroll locking, accessible labelling, forceMount animation. modal=true default.

232 lines

dropdown-menucore

Trigger-based dropdown menus. DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent. modal=true default. onSelect fires and auto-closes; onClick does not auto-close. Typeahead requires textValue for icon items. CSS vars: --loke-dropdown-menu-content-available-height, -width, -transform-origin, --loke-dropdown-menu-trigger-height, -width.

259 lines

hookscore

Ten shared hooks for building custom components. useControllableState (controlled/uncontrolled dual-mode with dev warnings on mode switch). useCallbackRef (stable callback identity without stale closure risk). useDirection/DirectionProvider (RTL support). useEscapeKeydown (capture-phase escape). useId (React 16-19 compat). useSize (ResizeObserver border-box). usePrevious (previous render value). useLayoutEffect (SSR-safe). useIsHydrated (render gating for portals and browser-only UI). useIsDocumentHidden (Page Visibility API).

258 lines

labelcore

Label primitive wrapping Primitive.label. Prevents text selection on double-click via mousedown prevention when target is not a nested form control. Associate with Checkbox, Switch, RadioGroupItem via htmlFor or wrapping. Do not use plain HTML label.

154 lines

loke-uicore

Entry point and router for @loke/ui headless React UI primitives. Subpath imports only — never import from @loke/ui directly. 19 components across overlays (Dialog, AlertDialog, Popover, Tooltip, DropdownMenu), forms (Checkbox, RadioGroup, Select, Switch, Label), navigation (Accordion, Tabs, Collapsible, Command), and composition (Primitive+Slot, Context+Collection, Overlay Infrastructure, Hooks). All are thin shells over 4 shared infrastructure patterns: DismissableLayer, FocusScope, Presence, useControllableState.

157 lines

overlay-infrastructurecore

Six shared infrastructure modules under all overlay components. DismissableLayer (stacking, outside dismiss, pointer event blocking, Branch for anchor exemption). FocusScope (trapping, looping, auto-focus on mount/unmount). FocusGuards (sentinel spans for portaled content). Portal (SSR-safe createPortal via useLayoutEffect). Popper (Floating UI positioning, CSS custom properties, collision/flip/arrow). Presence (animation state machine: mounted/unmountSuspended/unmounted). Use this skill when building a custom overlay; prefer component skills (dialog, popover) when using existing primitives.

305 lines

popovercore

Floating panels anchored to a trigger or custom element. Popover, PopoverTrigger, PopoverAnchor, PopoverPortal, PopoverContent, PopoverClose, PopoverArrow. Non-modal by default (modal=false). Popper positioning via Floating UI. CSS custom properties: --loke-popover-content-available-height, -width, -transform-origin, --loke-popover-trigger-height, -width.

241 lines

primitive-and-slotcore

Primitive element system (17 HTML types) with asChild composition via Slot. createSlot, createSlottable, Slottable for compound slot patterns. dispatchDiscreteCustomEvent for React 18 batching. Prop merge order: handlers composed (child first then slot), style merged (child wins), className concatenated, all other props child-wins. Mental model: asChild means "render whatever you give me but behave like [element]."

237 lines

radio-groupcore

RadioGroup + RadioGroupItem + RadioGroupIndicator for single-selection groups. Roving focus, arrow-key navigation with auto-selection, Enter prevention per WAI-ARIA. Hidden native radio input for form participation. Standalone Radio primitive available. value prop required on every item.

146 lines

selectcore

Select listbox with SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectGroup, SelectLabel, SelectItem + SelectItemText (required), SelectItemIndicator, SelectScrollUpButton, SelectScrollDownButton, SelectSeparator, SelectIcon, SelectArrow. Two positioning modes: item-aligned (default) and popper. Empty string value throws. All items must be in tree at open time — use Popover+Command for async/searchable lists.

225 lines

switchcore

Switch + SwitchThumb for binary on/off toggles. role=switch semantics, no indeterminate state. Hidden native checkbox input for form participation. Label required for accessible name. Use Checkbox for tri-state or multi-select scenarios.

143 lines

tabscore

Tabbed interfaces with Tabs/TabsList/TabsTrigger/TabsContent composition. Value-based trigger-to-content linking via matching value props. Roving focus via RovingFocusGroup. activationMode automatic (focus selects) vs manual (Enter/Space selects). forceMount on TabsContent for exit animations via Presence. orientation horizontal (default) or vertical.

197 lines

tooltipcore

Hover/focus tooltips. TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow. Requires TooltipProvider ancestor. Default delay 700ms, skip-delay 300ms. data-state: closed | delayed-open | instant-open. CSS vars: --loke-tooltip-content-available-height, -width, -transform-origin, --loke-tooltip-trigger-height, -width.

242 lines