@eslamdevui/ui 3.2.0-beta.1

package/.nuxt/ui/chat-message.ts

@@ -0,0 +1,129 @@
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle",
+  "naked"
+] as const
+
+const side = [
+  "left",
+  "right"
+] as const
+
+export default {
+  "slots": {
+    "root": "group/message relative w-full",
+    "container": "relative flex items-start group-data-[role=user]/message:max-w-[75%]",
+    "leading": "inline-flex items-center justify-center min-h-6",
+    "leadingIcon": "shrink-0",
+    "leadingAvatar": "shrink-0",
+    "leadingAvatarSize": "",
+    "content": "relative text-pretty",
+    "actions": [
+      "opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center",
+      "transition-opacity"
+    ]
+  },
+  "variants": {
+    "variant": {
+      "solid": {
+        "content": "bg-inverted text-inverted"
+      },
+      "outline": {
+        "content": "bg-default ring ring-default"
+      },
+      "soft": {
+        "content": "bg-elevated/50"
+      },
+      "subtle": {
+        "content": "bg-elevated/50 ring ring-default"
+      },
+      "naked": {
+        "content": ""
+      }
+    },
+    "side": {
+      "left": {
+        "container": "rtl:justify-end"
+      },
+      "right": {
+        "container": "ltr:justify-end ms-auto"
+      }
+    },
+    "leading": {
+      "true": ""
+    },
+    "actions": {
+      "true": ""
+    },
+    "compact": {
+      "true": {
+        "root": "scroll-mt-3",
+        "container": "gap-1.5 pb-3",
+        "leadingIcon": "size-5",
+        "leadingAvatarSize": "2xs"
+      },
+      "false": {
+        "root": "scroll-mt-4 sm:scroll-mt-6",
+        "container": "gap-3 pb-8",
+        "leadingIcon": "size-8",
+        "leadingAvatarSize": "md"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "compact": true,
+      "actions": true,
+      "class": {
+        "container": "pb-8"
+      }
+    },
+    {
+      "leading": true,
+      "compact": false,
+      "side": "left" as typeof side[number],
+      "class": {
+        "actions": "left-11"
+      }
+    },
+    {
+      "leading": true,
+      "compact": true,
+      "side": "left" as typeof side[number],
+      "class": {
+        "actions": "left-6.5"
+      }
+    },
+    {
+      "variant": [
+        "solid" as typeof variant[number],
+        "outline" as typeof variant[number],
+        "soft" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "compact": false,
+      "class": {
+        "content": "px-4 py-3 rounded-lg min-h-12",
+        "leading": "mt-2"
+      }
+    },
+    {
+      "variant": [
+        "solid" as typeof variant[number],
+        "outline" as typeof variant[number],
+        "soft" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "compact": true,
+      "class": {
+        "content": "px-2 py-1 rounded-lg min-h-8",
+        "leading": "mt-1"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "variant": "naked" as typeof variant[number]
+  }
+}

package/.nuxt/ui/chat-messages.ts

@@ -0,0 +1,14 @@
+export default {
+  "slots": {
+    "root": "w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)",
+    "indicator": "h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]",
+    "viewport": "absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+    "autoScroll": "rounded-full absolute right-1/2 translate-x-1/2 bottom-0"
+  },
+  "variants": {
+    "compact": {
+      "true": "",
+      "false": ""
+    }
+  }
+}

package/.nuxt/ui/chat-prompt-submit.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "base": ""
+  }
+}

package/.nuxt/ui/chat-prompt.ts

@@ -0,0 +1,35 @@
+const variant = [
+  "outline",
+  "soft",
+  "subtle",
+  "naked"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur",
+    "header": "flex items-center gap-1.5",
+    "body": "items-start",
+    "footer": "flex items-center justify-between gap-1.5",
+    "base": "text-base/5"
+  },
+  "variants": {
+    "variant": {
+      "outline": {
+        "root": "bg-default/75 ring ring-default"
+      },
+      "soft": {
+        "root": "bg-elevated/50"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default"
+      },
+      "naked": {
+        "root": ""
+      }
+    }
+  },
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number]
+  }
+}

package/.nuxt/ui/checkbox-group.ts

@@ -0,0 +1,204 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const variant = [
+  "list",
+  "card",
+  "table"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative",
+    "fieldset": "flex gap-x-2",
+    "legend": "mb-1 block font-medium text-default",
+    "item": ""
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "fieldset": "flex-row"
+      },
+      "vertical": {
+        "fieldset": "flex-col"
+      }
+    },
+    "color": {
+      "primary": {},
+      "secondary": {},
+      "success": {},
+      "info": {},
+      "warning": {},
+      "error": {},
+      "neutral": {}
+    },
+    "variant": {
+      "list": {},
+      "card": {},
+      "table": {
+        "item": "border border-muted"
+      }
+    },
+    "size": {
+      "xs": {
+        "fieldset": "gap-y-0.5",
+        "legend": "text-xs"
+      },
+      "sm": {
+        "fieldset": "gap-y-0.5",
+        "legend": "text-xs"
+      },
+      "md": {
+        "fieldset": "gap-y-1",
+        "legend": "text-sm"
+      },
+      "lg": {
+        "fieldset": "gap-y-1",
+        "legend": "text-sm"
+      },
+      "xl": {
+        "fieldset": "gap-y-1.5",
+        "legend": "text-base"
+      }
+    },
+    "required": {
+      "true": {
+        "legend": "after:content-['*'] after:ms-0.5 after:text-error"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "size": "xs" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-2.5"
+      }
+    },
+    {
+      "size": "sm" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-3"
+      }
+    },
+    {
+      "size": "md" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-3.5"
+      }
+    },
+    {
+      "size": "lg" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-4"
+      }
+    },
+    {
+      "size": "xl" as typeof size[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "p-4.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
+        "fieldset": "gap-0 -space-x-px"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        "fieldset": "gap-0 -space-y-px"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-secondary/10 has-data-[state=checked]:border-secondary/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-success/10 has-data-[state=checked]:border-success/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-info/10 has-data-[state=checked]:border-info/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-warning/10 has-data-[state=checked]:border-warning/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-error/10 has-data-[state=checked]:border-error/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "variant": "table" as typeof variant[number],
+      "disabled": true,
+      "class": {
+        "item": "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "variant": "list" as typeof variant[number],
+    "color": "primary" as typeof color[number]
+  }
+}

package/.nuxt/ui/checkbox.ts

@@ -0,0 +1,236 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const variant = [
+  "list",
+  "card"
+] as const
+
+const indicator = [
+  "start",
+  "end",
+  "hidden"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative flex items-start",
+    "container": "flex items-center",
+    "base": "rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
+    "indicator": "flex items-center justify-center size-full text-inverted" as typeof indicator[number],
+    "icon": "shrink-0 size-full",
+    "wrapper": "w-full",
+    "label": "block font-medium text-default",
+    "description": "text-muted"
+  },
+  "variants": {
+    "color": {
+      "primary": {
+        "base": "focus-visible:outline-primary",
+        "indicator": "bg-primary" as typeof indicator[number]
+      },
+      "secondary": {
+        "base": "focus-visible:outline-secondary",
+        "indicator": "bg-secondary" as typeof indicator[number]
+      },
+      "success": {
+        "base": "focus-visible:outline-success",
+        "indicator": "bg-success" as typeof indicator[number]
+      },
+      "info": {
+        "base": "focus-visible:outline-info",
+        "indicator": "bg-info" as typeof indicator[number]
+      },
+      "warning": {
+        "base": "focus-visible:outline-warning",
+        "indicator": "bg-warning" as typeof indicator[number]
+      },
+      "error": {
+        "base": "focus-visible:outline-error",
+        "indicator": "bg-error" as typeof indicator[number]
+      },
+      "neutral": {
+        "base": "focus-visible:outline-inverted",
+        "indicator": "bg-inverted" as typeof indicator[number]
+      }
+    },
+    "variant": {
+      "list": {
+        "root": ""
+      },
+      "card": {
+        "root": "border border-muted rounded-lg"
+      }
+    },
+    "indicator": {
+      "start": {
+        "root": "flex-row",
+        "wrapper": "ms-2"
+      },
+      "end": {
+        "root": "flex-row-reverse",
+        "wrapper": "me-2"
+      },
+      "hidden": {
+        "base": "sr-only",
+        "wrapper": "text-center"
+      }
+    },
+    "size": {
+      "xs": {
+        "base": "size-3",
+        "container": "h-4",
+        "wrapper": "text-xs"
+      },
+      "sm": {
+        "base": "size-3.5",
+        "container": "h-4",
+        "wrapper": "text-xs"
+      },
+      "md": {
+        "base": "size-4",
+        "container": "h-5",
+        "wrapper": "text-sm"
+      },
+      "lg": {
+        "base": "size-4.5",
+        "container": "h-5",
+        "wrapper": "text-sm"
+      },
+      "xl": {
+        "base": "size-5",
+        "container": "h-6",
+        "wrapper": "text-base"
+      }
+    },
+    "required": {
+      "true": {
+        "label": "after:content-['*'] after:ms-0.5 after:text-error"
+      }
+    },
+    "disabled": {
+      "true": {
+        "base": "cursor-not-allowed opacity-75",
+        "label": "cursor-not-allowed opacity-75",
+        "description": "cursor-not-allowed opacity-75"
+      }
+    },
+    "checked": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "size": "xs" as typeof size[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "p-2.5"
+      }
+    },
+    {
+      "size": "sm" as typeof size[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "p-3"
+      }
+    },
+    {
+      "size": "md" as typeof size[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "p-3.5"
+      }
+    },
+    {
+      "size": "lg" as typeof size[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "p-4"
+      }
+    },
+    {
+      "size": "xl" as typeof size[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "p-4.5"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-error"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "root": "has-data-[state=checked]:border-inverted"
+      }
+    },
+    {
+      "variant": "card" as typeof variant[number],
+      "disabled": true,
+      "class": {
+        "root": "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number],
+    "variant": "list" as typeof variant[number],
+    "indicator": "start" as typeof indicator[number]
+  }
+}