+ "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { Show, splitProps } from \"solid-js\"\n\nimport * as ComboboxPrimitive from \"@kobalte/core/combobox\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Combobox = ComboboxPrimitive.Root\nconst ComboboxItemLabel = ComboboxPrimitive.ItemLabel\nconst ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect\n\ntype ComboboxItemProps<T extends ValidComponent = \"li\"> = ComboboxPrimitive.ComboboxItemProps<T> & {\n class?: string | undefined\n}\n\nconst ComboboxItem = <T extends ValidComponent = \"li\">(\n props: PolymorphicProps<T, ComboboxItemProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxItemProps, [\"class\"])\n return (\n <ComboboxPrimitive.Item\n class={cn(\n \"relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50\",\n local.class\n )}\n {...others}\n />\n )\n}\n\ntype ComboboxItemIndicatorProps<T extends ValidComponent = \"div\"> =\n ComboboxPrimitive.ComboboxItemIndicatorProps<T> & {\n children?: JSX.Element\n }\n\nconst ComboboxItemIndicator = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxItemIndicatorProps, [\"children\"])\n return (\n <ComboboxPrimitive.ItemIndicator {...others}>\n <Show\n when={local.children}\n fallback={\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-4\"\n >\n <path d=\"M5 12l5 5l10 -10\" />\n </svg>\n }\n >\n {(children) => children()}\n </Show>\n </ComboboxPrimitive.ItemIndicator>\n )\n}\n\ntype ComboboxSectionProps<T extends ValidComponent = \"li\"> =\n ComboboxPrimitive.ComboboxSectionProps<T> & { class?: string | undefined }\n\nconst ComboboxSection = <T extends ValidComponent = \"li\">(\n props: PolymorphicProps<T, ComboboxSectionProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxSectionProps, [\"class\"])\n return (\n <ComboboxPrimitive.Section\n class={cn(\n \"overflow-hidden p-1 px-2 py-1.5 text-xs font-medium text-muted-foreground \",\n local.class\n )}\n {...others}\n />\n )\n}\n\ntype ComboboxControlProps<\n U,\n T extends ValidComponent = \"div\"\n> = ComboboxPrimitive.ComboboxControlProps<U, T> & {\n class?: string | undefined\n}\n\nconst ComboboxControl = <T, U extends ValidComponent = \"div\">(\n props: PolymorphicProps<U, ComboboxControlProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxControlProps<T>, [\"class\"])\n return (\n <ComboboxPrimitive.Control\n class={cn(\"flex h-10 items-center rounded-md border px-3\", local.class)}\n {...others}\n />\n )\n}\n\ntype ComboboxInputProps<T extends ValidComponent = \"input\"> =\n ComboboxPrimitive.ComboboxInputProps<T> & { class?: string | undefined }\n\nconst ComboboxInput = <T extends ValidComponent = \"input\">(\n props: PolymorphicProps<T, ComboboxInputProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxInputProps, [\"class\"])\n return (\n <ComboboxPrimitive.Input\n class={cn(\n \"flex size-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n local.class\n )}\n {...others}\n />\n )\n}\n\ntype ComboboxTriggerProps<T extends ValidComponent = \"button\"> =\n ComboboxPrimitive.ComboboxTriggerProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst ComboboxTrigger = <T extends ValidComponent = \"button\">(\n props: PolymorphicProps<T, ComboboxTriggerProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxTriggerProps, [\"class\", \"children\"])\n return (\n <ComboboxPrimitive.Trigger class={cn(\"size-4 opacity-50\", local.class)} {...others}>\n <ComboboxPrimitive.Icon>\n <Show\n when={local.children}\n fallback={\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-4\"\n >\n <path d=\"M8 9l4 -4l4 4\" />\n <path d=\"M16 15l-4 4l-4 -4\" />\n </svg>\n }\n >\n {(children) => children()}\n </Show>\n </ComboboxPrimitive.Icon>\n </ComboboxPrimitive.Trigger>\n )\n}\n\ntype ComboboxContentProps<T extends ValidComponent = \"div\"> =\n ComboboxPrimitive.ComboboxContentProps<T> & { class?: string | undefined }\n\nconst ComboboxContent = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, ComboboxContentProps<T>>\n) => {\n const [local, others] = splitProps(props as ComboboxContentProps, [\"class\"])\n return (\n <ComboboxPrimitive.Portal>\n <ComboboxPrimitive.Content\n class={cn(\n \"relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80\",\n local.class\n )}\n {...others}\n >\n <ComboboxPrimitive.Listbox class=\"m-0 p-1\" />\n </ComboboxPrimitive.Content>\n </ComboboxPrimitive.Portal>\n )\n}\n\nexport {\n Combobox,\n ComboboxItem,\n ComboboxItemLabel,\n ComboboxItemIndicator,\n ComboboxSection,\n ComboboxControl,\n ComboboxTrigger,\n ComboboxInput,\n ComboboxHiddenSelect,\n ComboboxContent\n}\n"
0 commit comments