@choice-ui/command 0.0.3 → 0.0.5

package/src/tv.ts

@@ -1,248 +0,0 @@
-import { tcv } from "@choice-ui/shared"
-
-export const commandTv = tcv({
-  slots: {
-    root: "flex h-full w-full flex-col overflow-hidden",
-    divider: "my-2 h-px",
-  },
-  variants: {
-    variant: {
-      default: {
-        root: "bg-default-background text-default-foreground",
-        divider: "bg-default-boundary",
-      },
-      dark: {
-        root: "bg-menu-background text-white",
-        divider: "bg-menu-boundary",
-      },
-    },
-  },
-})
-
-export const commandInputTv = tcv({
-  slots: {
-    root: "m-2 flex items-center",
-    input: "w-full rounded-lg",
-  },
-  variants: {
-    size: {
-      default: {
-        input: "text-body-medium h-8 px-2",
-      },
-      large: {
-        input: "leading-lg tracking-lg h-10 px-4 text-body-large",
-      },
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-})
-
-export const commandListTv = tcv({
-  slots: {
-    root: "px-2 pb-2",
-    content: "flex flex-col",
-  },
-})
-
-export const commandGroupTv = tcv({
-  slots: {
-    root: "flex flex-col gap-1 not-first:mt-4",
-    heading: "text-body-medium px-2",
-  },
-  variants: {
-    variant: {
-      default: {
-        heading: "text-secondary-foreground",
-      },
-      dark: {
-        heading: "text-white/50",
-      },
-    },
-  },
-})
-
-export const commandItemTv = tcv({
-  slots: {
-    root: ["group/item relative flex items-center rounded-lg select-none", "focus:outline-none"],
-    icon: "flex flex-shrink-0 items-center justify-center rounded-md",
-    value: "flex-1 truncate",
-    shortcut: "text-secondary-foreground",
-  },
-  variants: {
-    variant: {
-      default: {},
-      dark: {
-        root: "text-white",
-      },
-    },
-    size: {
-      default: {
-        root: "text-body-medium min-h-8 p-1",
-        icon: "h-6 min-w-6",
-      },
-      large: {
-        root: "leading-lg tracking-lg min-h-10 p-2 text-body-large",
-        icon: "h-6 min-w-6",
-      },
-    },
-    hasPrefix: {
-      true: "",
-      false: "",
-    },
-    hasSuffix: {
-      true: "",
-      false: "",
-    },
-    selected: {
-      true: {},
-      false: {},
-    },
-    disabled: {
-      true: {
-        root: "pointer-events-none",
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      hasPrefix: true,
-      size: "default",
-      class: {
-        root: "gap-1 pl-1",
-      },
-    },
-    {
-      hasPrefix: false,
-      size: "default",
-      class: {
-        root: "pl-2",
-      },
-    },
-    {
-      hasSuffix: true,
-      size: "default",
-      class: {
-        root: "gap-1 pr-1",
-      },
-    },
-    {
-      hasSuffix: false,
-      size: "default",
-      class: {
-        root: "pr-2",
-      },
-    },
-    // large
-    {
-      hasPrefix: true,
-      size: "large",
-      class: {
-        root: "gap-2 pl-2",
-      },
-    },
-    {
-      hasPrefix: false,
-      size: "large",
-      class: {
-        root: "pl-4",
-      },
-    },
-    {
-      hasSuffix: true,
-      size: "large",
-      class: {
-        root: "gap-2 pr-2",
-      },
-    },
-    {
-      hasSuffix: false,
-      size: "large",
-      class: {
-        root: "pr-4",
-      },
-    },
-    {
-      variant: "default",
-      selected: true,
-      class: {
-        root: "bg-secondary-background",
-      },
-    },
-    {
-      variant: "dark",
-      selected: true,
-      class: {
-        root: "bg-gray-700",
-      },
-    },
-    {
-      variant: "default",
-      disabled: true,
-      class: {
-        root: "text-secondary-foreground",
-      },
-    },
-    {
-      variant: "dark",
-      disabled: true,
-      class: {
-        root: "text-white/50",
-      },
-    },
-  ],
-  defaultVariants: {
-    size: "default",
-    hasPrefix: false,
-    hasSuffix: false,
-    variant: "default",
-  },
-})
-
-export const commandFooterTv = tcv({
-  slots: {
-    root: "flex h-10 items-center justify-between border-t px-2",
-  },
-  variants: {
-    variant: {
-      default: {
-        root: "border-default-boundary",
-      },
-      dark: {
-        root: "border-menu-boundary",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-})
-
-export const commandTabsTv = tcv({
-  slots: {
-    tabs: "mx-2 mb-2",
-  },
-})
-
-export const commandEmptyTv = tcv({
-  slots: {
-    root: "py-6 text-center",
-  },
-  variants: {
-    variant: {
-      default: {
-        root: "text-secondary-foreground",
-      },
-      dark: {
-        root: "text-white/50",
-      },
-    },
-  },
-})
-
-export const commandLoadingTv = tcv({
-  slots: {
-    root: "flex items-center justify-center py-6 text-center",
-  },
-})

package/src/types.ts

@@ -1,84 +0,0 @@
-import React from "react"
-
-export type CommandFilter = (value: string, search: string, keywords?: string[]) => number
-
-export interface CommandProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-  /**
-   * Optional default item value when it is initially rendered.
-   */
-  defaultValue?: string
-  /**
-   * Optionally set to `true` to disable selection via pointer events.
-   */
-  disablePointerSelection?: boolean
-  /**
-   * Custom filter function for whether each command menu item should matches the given search query.
-   * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
-   * By default, uses the `command-score` library.
-   */
-  filter?: CommandFilter
-  /**
-   * Accessible label for this command menu. Not shown visibly.
-   */
-  label?: string
-  /**
-   * Optionally set to `true` to turn on looping around when using the arrow keys.
-   */
-  loop?: boolean
-  /**
-   * Event handler called when the selected item of the menu changes.
-   */
-  onChange?: (value: string) => void
-  /**
-   * Optionally set to `false` to turn off the automatic filtering and sorting.
-   * If `false`, you must conditionally render valid items based on the search query yourself.
-   */
-  shouldFilter?: boolean
-  size?: "default" | "large"
-  /**
-   * Optional controlled state of the selected command menu item.
-   */
-  value?: string
-  variant?: "default" | "dark"
-  /**
-   * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
-   */
-  vimBindings?: boolean
-}
-
-export type Context = {
-  filter: () => boolean
-  getDisablePointerSelection: () => boolean
-  group: (id: string) => () => void
-  inputId: string
-  item: (id: string, groupId?: string) => () => void
-  label?: string
-  labelId: string
-  // Ids
-  listId: string
-  // Refs
-  listInnerRef: React.MutableRefObject<HTMLDivElement | null>
-  size?: "default" | "large"
-  store: Store
-  value: (id: string, value?: string, keywords?: string[]) => void
-  variant?: "default" | "dark"
-}
-
-export type State = {
-  filtered: { count: number; groups: Set<string>; items: Map<string, number> }
-  search: string
-  selectedItemId?: string
-  value: string
-}
-
-export type Store = {
-  emit: () => void
-  setState: <K extends keyof State>(key: K, value: State[K], opts?: unknown) => void
-  snapshot: () => State
-  subscribe: (callback: () => void) => () => void
-}
-
-export type Group = {
-  forceMount?: boolean
-  id: string
-}

package/src/utils/constants.ts

@@ -1,7 +0,0 @@
-export const GROUP_SELECTOR = `[role="presentation"]`
-export const GROUP_ITEMS_SELECTOR = `[role="group"]`
-export const GROUP_HEADING_SELECTOR = `[aria-hidden="true"]`
-export const ITEM_SELECTOR = `[role="option"]`
-export const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`
-export const SELECT_EVENT = `cmdk-item-select`
-export const VALUE_ATTR = `data-value`

package/src/utils/dom.ts

@@ -1,19 +0,0 @@
-export function findNextSibling(el: Element, selector: string): Element | null {
-  let sibling = el.nextElementSibling
-
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.nextElementSibling
-  }
-  return null
-}
-
-export function findPreviousSibling(el: Element, selector: string): Element | null {
-  let sibling = el.previousElementSibling
-
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.previousElementSibling
-  }
-  return null
-}

package/src/utils/helpers.ts

@@ -1,45 +0,0 @@
-import React from "react"
-
-export const useLayoutEffect =
-  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
-
-export function renderChildren(children: React.ReactElement): React.ReactNode {
-  const childrenType = children.type
-
-  // The children is a function component or class component
-  if (typeof childrenType === "function") {
-    // Try to call as function component first
-    try {
-      return (childrenType as React.FunctionComponent)(children.props)
-    } catch {
-      // If it fails, it might be a class component, return the original element
-      return children
-    }
-  }
-
-  // The children is a component with `forwardRef`
-  if (typeof childrenType === "object" && childrenType !== null && "render" in childrenType) {
-    const forwardRefComponent = childrenType as {
-      render: (props: unknown, ref: unknown) => React.ReactNode
-    }
-    return forwardRefComponent.render(children.props, null)
-  }
-
-  // It's a string, boolean, etc.
-  return children
-}
-
-export function SlottableWithNestedChildren(
-  { asChild, children }: { asChild?: boolean; children?: React.ReactNode },
-  render: (child: React.ReactNode) => JSX.Element,
-) {
-  if (asChild && React.isValidElement(children)) {
-    const renderedChild = renderChildren(children)
-    if (React.isValidElement(renderedChild)) {
-      const childProps = children.props
-      // Use a safer approach that avoids ref type issues
-      return React.cloneElement(renderedChild, {}, render(childProps.children))
-    }
-  }
-  return render(children)
-}

package/src/utils/index.ts

@@ -1,3 +0,0 @@
-export * from "./constants"
-export * from "./dom"
-export * from "./helpers"