HUGE UPDATE

stefan-karger · Mar 28, 2024 · f49337f · f49337f
1 parent 1517e74
commit f49337f
Show file tree

Hide file tree

Showing 93 changed files with 1,291 additions and 769 deletions.
diff --git a/.changeset/modern-worms-compete.md b/.changeset/modern-worms-compete.md
@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+switch from div to kobalte skeleton primitive
diff --git a/.changeset/new-goats-drive.md b/.changeset/new-goats-drive.md
@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+inlined icons to get rid of huge solid-icon package
diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore
@@ -1,5 +1,6 @@
 dist
 .solid
+.vinxi
 .output
 .vercel
 .netlify

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -29,7 +29,6 @@
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-solid": "^8.0.0",
     "shosho": "^1.4.3",
-    "solid-icons": "^1.1.0",
     "solid-js": "1.8.16",
     "solid-mdx": "^0.0.7",
     "tailwind-merge": "^2.2.2",

diff --git a/apps/docs/public/registry/index.json b/apps/docs/public/registry/index.json
@@ -2,8 +2,7 @@
   {
     "name": "accordion",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/accordion.tsx"
@@ -43,8 +42,7 @@
   {
     "name": "badge-delta",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "registryDependencies": [
       "badge"
@@ -109,8 +107,7 @@
   {
     "name": "checkbox",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/checkbox.tsx"
@@ -120,8 +117,7 @@
   {
     "name": "combobox",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/combobox.tsx"
@@ -131,8 +127,7 @@
   {
     "name": "command",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "registryDependencies": [
       "dialog"
@@ -145,8 +140,7 @@
   {
     "name": "context-menu",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/context-menu.tsx"
@@ -173,8 +167,7 @@
   {
     "name": "dialog",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/dialog.tsx"
@@ -194,8 +187,7 @@
   {
     "name": "dropdown-menu",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/dropdown-menu.tsx"
@@ -259,9 +251,6 @@
   },
   {
     "name": "pagination",
-    "dependencies": [
-      "solid-icons"
-    ],
     "files": [
       "ui/pagination.tsx"
     ],
@@ -293,8 +282,7 @@
   {
     "name": "radio-group",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/radio-group.tsx"
@@ -304,8 +292,7 @@
   {
     "name": "select",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/select.tsx"
@@ -325,8 +312,7 @@
   {
     "name": "sheet",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/sheet.tsx"
@@ -394,8 +380,7 @@
   {
     "name": "toast",
     "dependencies": [
-      "@kobalte/core",
-      "solid-icons"
+      "@kobalte/core"
     ],
     "files": [
       "ui/toast.tsx"

diff --git a/apps/docs/public/registry/ui/accordion.json b/apps/docs/public/registry/ui/accordion.json
@@ -1,13 +1,12 @@
 {
   "name": "accordion",
   "dependencies": [
-    "@kobalte/core",
-    "solid-icons"
+    "@kobalte/core"
   ],
   "files": [
     {
       "name": "accordion.tsx",
-      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { Accordion as AccordionPrimitive } from \"@kobalte/core\"\nimport { TbChevronDown } from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem: Component<AccordionPrimitive.AccordionItemProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <AccordionPrimitive.Item class={cn(\"border-b\", props.class)} {...rest} />\n}\n\nconst AccordionTrigger: Component<AccordionPrimitive.AccordionTriggerProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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          props.class\n        )}\n        {...rest}\n      >\n        {props.children}\n        <TbChevronDown class=\"size-4 shrink-0 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nconst AccordionContent: Component<AccordionPrimitive.AccordionContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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        props.class\n      )}\n      {...rest}\n    >\n      <div class=\"pb-4 pt-0\">{props.children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
+      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { Accordion as AccordionPrimitive } from \"@kobalte/core\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem: Component<AccordionPrimitive.AccordionItemProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <AccordionPrimitive.Item class={cn(\"border-b\", props.class)} {...rest} />\n}\n\nconst AccordionTrigger: Component<AccordionPrimitive.AccordionTriggerProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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          props.class\n        )}\n        {...rest}\n      >\n        {props.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\nconst AccordionContent: Component<AccordionPrimitive.AccordionContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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        props.class\n      )}\n      {...rest}\n    >\n      <div class=\"pb-4 pt-0\">{props.children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
     }
   ],
   "type": "ui"

diff --git a/apps/docs/public/registry/ui/alert-dialog.json b/apps/docs/public/registry/ui/alert-dialog.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "alert-dialog.tsx",
-      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@kobalte/core\"\nimport { TbX } from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay: Component<AlertDialogPrimitive.AlertDialogOverlayProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst AlertDialogContent: Component<AlertDialogPrimitive.AlertDialogContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"children\"])\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        class={cn(\n          \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] 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          props.class\n        )}\n        {...rest}\n      >\n        {props.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          <TbX class=\"size-4\" />\n          <span class=\"sr-only\">Close</span>\n        </AlertDialogPrimitive.CloseButton>\n      </AlertDialogPrimitive.Content>\n    </AlertDialogPortal>\n  )\n}\n\nconst AlertDialogTitle: Component<AlertDialogPrimitive.AlertDialogTitleProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <AlertDialogPrimitive.Title class={cn(\"text-lg font-semibold\", props.class)} {...rest} />\n}\n\nconst AlertDialogDescription: Component<AlertDialogPrimitive.AlertDialogDescriptionProps> = (\n  props\n) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription\n}\n"
+      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@kobalte/core\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay: Component<AlertDialogPrimitive.AlertDialogOverlayProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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        props.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst AlertDialogContent: Component<AlertDialogPrimitive.AlertDialogContentProps> = (props) => {\n  const [, rest] = splitProps(props, [\"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          props.class\n        )}\n        {...rest}\n      >\n        {props.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\nconst AlertDialogTitle: Component<AlertDialogPrimitive.AlertDialogTitleProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return <AlertDialogPrimitive.Title class={cn(\"text-lg font-semibold\", props.class)} {...rest} />\n}\n\nconst AlertDialogDescription: Component<AlertDialogPrimitive.AlertDialogDescriptionProps> = (\n  props\n) => {\n  const [, rest] = splitProps(props, [\"class\"])\n  return (\n    <AlertDialogPrimitive.Description\n      class={cn(\"text-sm text-muted-foreground\", props.class)}\n      {...rest}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription\n}\n"
     }
   ],
   "type": "ui"

diff --git a/apps/docs/public/registry/ui/badge-delta.json b/apps/docs/public/registry/ui/badge-delta.json
@@ -1,16 +1,15 @@
 {
   "name": "badge-delta",
   "dependencies": [
-    "@kobalte/core",
-    "solid-icons"
+    "@kobalte/core"
   ],
   "registryDependencies": [
     "badge"
   ],
   "files": [
     {
       "name": "badge-delta.tsx",
-      "content": "import type { Component } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\nimport type { IconTypes } from \"solid-icons\"\nimport {\n  TbArrowDown,\n  TbArrowDownRight,\n  TbArrowRight,\n  TbArrowUp,\n  TbArrowUpRight\n} from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\nimport type { BadgeProps } from \"~/registry/ui/badge\"\nimport { Badge } from \"~/registry/ui/badge\"\n\ntype DeltaType = \"increase\" | \"moderateIncrease\" | \"unchanged\" | \"moderateDecrease\" | \"decrease\"\n\nconst badgeDeltaVariants = cva(\"\", {\n  variants: {\n    variant: {\n      success: \"bg-success text-success-foreground hover:bg-success\",\n      warning: \"bg-warning text-warning-foreground hover:bg-warning\",\n      error: \"bg-error text-error-foreground hover:bg-error\"\n    }\n  }\n})\ntype DeltaVariant = NonNullable<VariantProps<typeof badgeDeltaVariants>[\"variant\"]>\n\nconst iconMap: { [key in DeltaType]: IconTypes } = {\n  increase: TbArrowUp,\n  moderateIncrease: TbArrowUpRight,\n  unchanged: TbArrowRight,\n  moderateDecrease: TbArrowDownRight,\n  decrease: TbArrowDown\n}\n\nconst variantMap: { [key in DeltaType]: DeltaVariant } = {\n  increase: \"success\",\n  moderateIncrease: \"success\",\n  unchanged: \"warning\",\n  moderateDecrease: \"error\",\n  decrease: \"error\"\n}\n\nexport interface BadgeDeltaProps extends Omit<BadgeProps, \"variant\"> {\n  deltaType: DeltaType\n}\n\nconst BadgeDelta: Component<BadgeDeltaProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"children\", \"deltaType\"])\n  const Icon = iconMap[props.deltaType]\n  const variant = variantMap[props.deltaType]\n\n  return (\n    <Badge class={cn(badgeDeltaVariants({ variant }), props.class)} {...rest}>\n      <span class=\"flex gap-1\">\n        <Icon class=\"size-4\" />\n        {props.children}\n      </span>\n    </Badge>\n  )\n}\n\nexport { BadgeDelta }\n"
+      "content": "import type { Component, JSXElement } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"~/lib/utils\"\nimport type { BadgeProps } from \"~/registry/ui/badge\"\nimport { Badge } from \"~/registry/ui/badge\"\n\ntype DeltaType = \"increase\" | \"moderateIncrease\" | \"unchanged\" | \"moderateDecrease\" | \"decrease\"\n\nconst badgeDeltaVariants = cva(\"\", {\n  variants: {\n    variant: {\n      success: \"bg-success text-success-foreground hover:bg-success\",\n      warning: \"bg-warning text-warning-foreground hover:bg-warning\",\n      error: \"bg-error text-error-foreground hover:bg-error\"\n    }\n  }\n})\ntype DeltaVariant = NonNullable<VariantProps<typeof badgeDeltaVariants>[\"variant\"]>\n\nconst iconMap: { [key in DeltaType]: (props: { class?: string }) => JSXElement } = {\n  increase: (props) => (\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={props.class}\n    >\n      <path d=\"M12 5l0 14\" />\n      <path d=\"M18 11l-6 -6\" />\n      <path d=\"M6 11l6 -6\" />\n    </svg>\n  ),\n  moderateIncrease: (props) => (\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={props.class}\n    >\n      <path d=\"M17 7l-10 10\" />\n      <path d=\"M8 7l9 0l0 9\" />\n    </svg>\n  ),\n  unchanged: (props) => (\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={props.class}\n    >\n      <path d=\"M5 12l14 0\" />\n      <path d=\"M13 18l6 -6\" />\n      <path d=\"M13 6l6 6\" />\n    </svg>\n  ),\n  moderateDecrease: (props) => (\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={props.class}\n    >\n      <path d=\"M7 7l10 10\" />\n      <path d=\"M17 8l0 9l-9 0\" />\n    </svg>\n  ),\n  decrease: (props) => (\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={props.class}\n    >\n      <path d=\"M12 5l0 14\" />\n      <path d=\"M18 13l-6 6\" />\n      <path d=\"M6 13l6 6\" />\n    </svg>\n  )\n}\n\nconst variantMap: { [key in DeltaType]: DeltaVariant } = {\n  increase: \"success\",\n  moderateIncrease: \"success\",\n  unchanged: \"warning\",\n  moderateDecrease: \"error\",\n  decrease: \"error\"\n}\n\nexport interface BadgeDeltaProps extends Omit<BadgeProps, \"variant\"> {\n  deltaType: DeltaType\n}\n\nconst BadgeDelta: Component<BadgeDeltaProps> = (props) => {\n  const [, rest] = splitProps(props, [\"class\", \"children\", \"deltaType\"])\n  const Icon = iconMap[props.deltaType]\n  const variant = variantMap[props.deltaType]\n\n  return (\n    <Badge class={cn(badgeDeltaVariants({ variant }), props.class)} {...rest}>\n      <span class=\"flex gap-1\">\n        <Icon class=\"size-4\" />\n        {props.children}\n      </span>\n    </Badge>\n  )\n}\n\nexport { BadgeDelta }\n"
     }
   ],
   "type": "ui"
-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
     dist
     .solid
+    .vinxi
     .output
     .vercel
     .netlify
@@ Expand Down @@