fix: typed imports (#114)

.eslintrc.json

@@ -9,6 +9,7 @@
   ],
   "plugins": ["solid", "tailwindcss"],
   "rules": {
+    "@typescript-eslint/consistent-type-imports": "error",
     "tailwindcss/no-custom-classname": "off",
     "tailwindcss/classnames-order": "error"
   },

apps/docs/public/registry/ui/accordion.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "accordion.tsx",
-      "content": "import { JSX, splitProps, ValidComponent } from \"solid-js\"\n\nimport * as AccordionPrimitive from \"@kobalte/core/accordion\"\nimport { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\ntype AccordionItemProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionItemProps<T> & {\n    class?: string | undefined\n  }\n\nconst AccordionItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionItemProps<T>>\n) => {\n  const [local, others] = splitProps(props as AccordionItemProps, [\"class\"])\n  return <AccordionPrimitive.Item class={cn(\"border-b\", local.class)} {...others} />\n}\n\ntype AccordionTriggerProps<T extends ValidComponent = \"button\"> =\n  AccordionPrimitive.AccordionTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AccordionTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, AccordionTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as AccordionTriggerProps, [\"class\", \"children\"])\n  return (\n    <AccordionPrimitive.Header class=\"flex\">\n      <AccordionPrimitive.Trigger\n        class={cn(\n          \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180\",\n          local.class\n        )}\n        {...others}\n      >\n        {local.children}\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 shrink-0 transition-transform duration-200\"\n        >\n          <path d=\"M6 9l6 6l6 -6\" />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AccordionContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as AccordionContentProps, [\"class\", \"children\"])\n  return (\n    <AccordionPrimitive.Content\n      class={cn(\n        \"animate-accordion-up overflow-hidden text-sm transition-all data-[expanded]:animate-accordion-down\",\n        local.class\n      )}\n      {...others}\n    >\n      <div class=\"pb-4 pt-0\">{local.children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
+      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as AccordionPrimitive from \"@kobalte/core/accordion\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\ntype AccordionItemProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionItemProps<T> & {\n    class?: string | undefined\n  }\n\nconst AccordionItem = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionItemProps<T>>\n) => {\n  const [local, others] = splitProps(props as AccordionItemProps, [\"class\"])\n  return <AccordionPrimitive.Item class={cn(\"border-b\", local.class)} {...others} />\n}\n\ntype AccordionTriggerProps<T extends ValidComponent = \"button\"> =\n  AccordionPrimitive.AccordionTriggerProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AccordionTrigger = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, AccordionTriggerProps<T>>\n) => {\n  const [local, others] = splitProps(props as AccordionTriggerProps, [\"class\", \"children\"])\n  return (\n    <AccordionPrimitive.Header class=\"flex\">\n      <AccordionPrimitive.Trigger\n        class={cn(\n          \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-expanded]>svg]:rotate-180\",\n          local.class\n        )}\n        {...others}\n      >\n        {local.children}\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 shrink-0 transition-transform duration-200\"\n        >\n          <path d=\"M6 9l6 6l6 -6\" />\n        </svg>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps<T extends ValidComponent = \"div\"> =\n  AccordionPrimitive.AccordionContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AccordionContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AccordionContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as AccordionContentProps, [\"class\", \"children\"])\n  return (\n    <AccordionPrimitive.Content\n      class={cn(\n        \"animate-accordion-up overflow-hidden text-sm transition-all data-[expanded]:animate-accordion-down\",\n        local.class\n      )}\n      {...others}\n    >\n      <div class=\"pb-4 pt-0\">{local.children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
     }
   ],
   "type": "ui"

apps/docs/public/registry/ui/alert-dialog.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "alert-dialog.tsx",
-      "content": "import { JSX, splitProps, ValidComponent } from \"solid-js\"\n\nimport * as AlertDialogPrimitive from \"@kobalte/core/alert-dialog\"\nimport { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\ntype AlertDialogOverlayProps<T extends ValidComponent = \"div\"> =\n  AlertDialogPrimitive.AlertDialogOverlayProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AlertDialogOverlayProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogOverlayProps, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype AlertDialogContentProps<T extends ValidComponent = \"div\"> =\n  AlertDialogPrimitive.AlertDialogContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AlertDialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AlertDialogContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogContentProps, [\"class\", \"children\"])\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        class={cn(\n          \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n          local.class\n        )}\n        {...others}\n      >\n        {local.children}\n        <AlertDialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground\">\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=\"M18 6l-12 12\" />\n            <path d=\"M6 6l12 12\" />\n          </svg>\n          <span class=\"sr-only\">Close</span>\n        </AlertDialogPrimitive.CloseButton>\n      </AlertDialogPrimitive.Content>\n    </AlertDialogPortal>\n  )\n}\n\ntype AlertDialogTitleProps<T extends ValidComponent = \"h2\"> =\n  AlertDialogPrimitive.AlertDialogTitleProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, AlertDialogTitleProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogTitleProps, [\"class\"])\n  return <AlertDialogPrimitive.Title class={cn(\"text-lg font-semibold\", local.class)} {...others} />\n}\n\ntype AlertDialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  AlertDialogPrimitive.AlertDialogDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, AlertDialogDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogDescriptionProps, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription\n}\n"
+      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as AlertDialogPrimitive from \"@kobalte/core/alert-dialog\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\ntype AlertDialogOverlayProps<T extends ValidComponent = \"div\"> =\n  AlertDialogPrimitive.AlertDialogOverlayProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogOverlay = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AlertDialogOverlayProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogOverlayProps, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Overlay\n      class={cn(\n        \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype AlertDialogContentProps<T extends ValidComponent = \"div\"> =\n  AlertDialogPrimitive.AlertDialogContentProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst AlertDialogContent = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, AlertDialogContentProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogContentProps, [\"class\", \"children\"])\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        class={cn(\n          \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg md:w-full\",\n          local.class\n        )}\n        {...others}\n      >\n        {local.children}\n        <AlertDialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground\">\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=\"M18 6l-12 12\" />\n            <path d=\"M6 6l12 12\" />\n          </svg>\n          <span class=\"sr-only\">Close</span>\n        </AlertDialogPrimitive.CloseButton>\n      </AlertDialogPrimitive.Content>\n    </AlertDialogPortal>\n  )\n}\n\ntype AlertDialogTitleProps<T extends ValidComponent = \"h2\"> =\n  AlertDialogPrimitive.AlertDialogTitleProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogTitle = <T extends ValidComponent = \"h2\">(\n  props: PolymorphicProps<T, AlertDialogTitleProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogTitleProps, [\"class\"])\n  return <AlertDialogPrimitive.Title class={cn(\"text-lg font-semibold\", local.class)} {...others} />\n}\n\ntype AlertDialogDescriptionProps<T extends ValidComponent = \"p\"> =\n  AlertDialogPrimitive.AlertDialogDescriptionProps<T> & {\n    class?: string | undefined\n  }\n\nconst AlertDialogDescription = <T extends ValidComponent = \"p\">(\n  props: PolymorphicProps<T, AlertDialogDescriptionProps<T>>\n) => {\n  const [local, others] = splitProps(props as AlertDialogDescriptionProps, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", local.class)}\n      {...others}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription\n}\n"
     }
   ],
   "type": "ui"

apps/docs/public/registry/ui/alert.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "alert.tsx",
-      "content": "import type { Component, ComponentProps, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as AlertPrimitive from \"@kobalte/core/alert\"\nimport { PolymorphicProps } from \"@kobalte/core/polymorphic\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n)\n\ntype AlertRootProps<T extends ValidComponent = \"div\"> = AlertPrimitive.AlertRootProps<T> &\n  VariantProps<typeof alertVariants> & { class?: string | undefined }\n\nconst Alert = <T extends ValidComponent = \"div\">(props: PolymorphicProps<T, AlertRootProps<T>>) => {\n  const [local, others] = splitProps(props as AlertRootProps, [\"class\", \"variant\"])\n  return (\n    <AlertPrimitive.Root\n      class={cn(alertVariants({ variant: props.variant }), local.class)}\n      {...others}\n    />\n  )\n}\n\nconst AlertTitle: Component<ComponentProps<\"h5\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <h5 class={cn(\"mb-1 font-medium leading-none tracking-tight\", local.class)} {...others} />\n}\n\nconst AlertDescription: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <div class={cn(\"text-sm [&_p]:leading-relaxed\", local.class)} {...others} />\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n"
+      "content": "import type { Component, ComponentProps, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as AlertPrimitive from \"@kobalte/core/alert\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n)\n\ntype AlertRootProps<T extends ValidComponent = \"div\"> = AlertPrimitive.AlertRootProps<T> &\n  VariantProps<typeof alertVariants> & { class?: string | undefined }\n\nconst Alert = <T extends ValidComponent = \"div\">(props: PolymorphicProps<T, AlertRootProps<T>>) => {\n  const [local, others] = splitProps(props as AlertRootProps, [\"class\", \"variant\"])\n  return (\n    <AlertPrimitive.Root\n      class={cn(alertVariants({ variant: props.variant }), local.class)}\n      {...others}\n    />\n  )\n}\n\nconst AlertTitle: Component<ComponentProps<\"h5\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <h5 class={cn(\"mb-1 font-medium leading-none tracking-tight\", local.class)} {...others} />\n}\n\nconst AlertDescription: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <div class={cn(\"text-sm [&_p]:leading-relaxed\", local.class)} {...others} />\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n"
     }
   ],
   "type": "ui"

apps/docs/public/registry/ui/aspect-ratio.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "aspect-ratio.tsx",
-      "content": "import { Component, ComponentProps, mergeProps, splitProps } from \"solid-js\"\n\ntype AspectRatioProps = ComponentProps<\"div\"> & { ratio?: number }\n\nconst AspectRatio: Component<AspectRatioProps> = (rawProps) => {\n  const props = mergeProps({ ratio: 1 / 1 }, rawProps)\n  const [local, others] = splitProps(props, [\"ratio\"])\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        \"padding-bottom\": `${100 / local.ratio}%`\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0\n        }}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport { AspectRatio }\n"
+      "content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { mergeProps, splitProps } from \"solid-js\"\n\ntype AspectRatioProps = ComponentProps<\"div\"> & { ratio?: number }\n\nconst AspectRatio: Component<AspectRatioProps> = (rawProps) => {\n  const props = mergeProps({ ratio: 1 / 1 }, rawProps)\n  const [local, others] = splitProps(props, [\"ratio\"])\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        \"padding-bottom\": `${100 / local.ratio}%`\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0\n        }}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport { AspectRatio }\n"
     }
   ],
   "type": "ui"