@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/input/Input.astro

@@ -1,130 +1,130 @@
----
-/**
- * @component Input
- * @title Input
- * @description Base input field used in forms.
- * @description A field for collecting user input.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=145-3
- * @status stable
- * @since 0.1.0
- *
- * @preview
- *
- * <Input type="text" placeholder="Enter your name" />
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Input } from '@bejamas/ui/components/input';
- * ---
- * <Input type="email" placeholder="Enter your email" />
- * ```
- *
- * @examples
- *
- * ### Default
- *
- * <Input type="email" placeholder="Enter your email" />
- *
- * ### Disabled
- *
- * <Input type="email" placeholder="Enter your email" disabled />
- *
- * ### Sizes
- *
- * <div class="grid w-full max-w-sm gap-3">
- *   <div class="flex items-center gap-2">
- *     <Input size="sm" placeholder="Small input (h-8)" />
- *     <Button size="sm" variant="outline">
- *       Small
- *     </Button>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <Input placeholder="Default input (h-9)" />
- *     <Button variant="outline">Default</Button>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <Input size="lg" placeholder="Large input (h-10)" />
- *     <Button size="lg" variant="outline">
- *       Large
- *     </Button>
- *   </div>
- * </div>
- *
- * ### File
- *
- * <div class="grid w-full max-w-sm items-center gap-3">
- *   <Label htmlFor="picture">Picture</Label>
- *   <Input id="picture" type="file" />
- * </div>
- *
- * ### With Label
- *
- * <div class="grid w-full max-w-sm items-center gap-3">
- *   <Label htmlFor="email">Email</Label>
- *   <Input id="email" type="email" placeholder="Enter your email" />
- * </div>
- *
- * ### With Button
- *
- *  <div class="flex w-full max-w-sm items-center gap-2">
- *    <Input type="email" placeholder="Email" />
- *    <Button type="submit" variant="outline">
- *      Subscribe
- *    </Button>
- *  </div>
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "astro/types";
-
-const inputVariants = cva(
-  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed",
-  {
-    variants: {
-      size: {
-        sm: "data-[size=sm]",
-        default: "data-[size=default]",
-        lg: "data-[size=lg]",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  },
-);
-
-type InputUiSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
-type NativeInputSize = HTMLAttributes<"input">["size"];
-
-interface Props extends Omit<HTMLAttributes<"input">, "size"> {
-  size?: InputUiSize | NativeInputSize;
-  nativeSize?: NativeInputSize;
-}
-
-const {
-  class: className = "",
-  type = "text",
-  size: sizeProp,
-  nativeSize,
-  ...props
-} = Astro.props as Props;
-
-const isUiSize = (value: unknown): value is InputUiSize =>
-  value === "sm" || value === "default" || value === "lg";
-
-const resolvedUiSize = isUiSize(sizeProp) ? sizeProp : "default";
-const resolvedNativeSize =
-  nativeSize ?? (!isUiSize(sizeProp) ? sizeProp : undefined);
----
-
-<input
-  type={type}
-  size={resolvedNativeSize}
-  data-slot={props["data-slot"] ?? "input"}
-  data-size={resolvedUiSize}
-  class={cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 active:border-ring rounded-lg border bg-card shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 disabled:bg-muted disabled:text-muted-foreground data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:py-1 data-[size=sm]:md:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:py-1 data-[size=default]:md:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:py-1.5 data-[size=lg]:md:text-base", inputVariants({ size: resolvedUiSize }), className)}
-  {...props}
-/>
+---
+/**
+ * @component Input
+ * @title Input
+ * @description Base input field used in forms.
+ * @description A field for collecting user input.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=145-3
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <Input type="text" placeholder="Enter your name" />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Input } from '@bejamas/ui/components/input';
+ * ---
+ * <Input type="email" placeholder="Enter your email" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Default
+ *
+ * <Input type="email" placeholder="Enter your email" />
+ *
+ * ### Disabled
+ *
+ * <Input type="email" placeholder="Enter your email" disabled />
+ *
+ * ### Sizes
+ *
+ * <div class="grid w-full max-w-sm gap-3">
+ *   <div class="flex items-center gap-2">
+ *     <Input size="sm" placeholder="Small input (h-8)" />
+ *     <Button size="sm" variant="outline">
+ *       Small
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <Input placeholder="Default input (h-9)" />
+ *     <Button variant="outline">Default</Button>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <Input size="lg" placeholder="Large input (h-10)" />
+ *     <Button size="lg" variant="outline">
+ *       Large
+ *     </Button>
+ *   </div>
+ * </div>
+ *
+ * ### File
+ *
+ * <div class="grid w-full max-w-sm items-center gap-3">
+ *   <Label htmlFor="picture">Picture</Label>
+ *   <Input id="picture" type="file" />
+ * </div>
+ *
+ * ### With Label
+ *
+ * <div class="grid w-full max-w-sm items-center gap-3">
+ *   <Label htmlFor="email">Email</Label>
+ *   <Input id="email" type="email" placeholder="Enter your email" />
+ * </div>
+ *
+ * ### With Button
+ *
+ *  <div class="flex w-full max-w-sm items-center gap-2">
+ *    <Input type="email" placeholder="Email" />
+ *    <Button type="submit" variant="outline">
+ *      Subscribe
+ *    </Button>
+ *  </div>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "astro/types";
+
+const inputVariants = cva(
+  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "data-[size=sm]",
+        default: "data-[size=default]",
+        lg: "data-[size=lg]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+type InputUiSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
+type NativeInputSize = HTMLAttributes<"input">["size"];
+
+interface Props extends Omit<HTMLAttributes<"input">, "size"> {
+  size?: InputUiSize | NativeInputSize;
+  nativeSize?: NativeInputSize;
+}
+
+const {
+  class: className = "",
+  type = "text",
+  size: sizeProp,
+  nativeSize,
+  ...props
+} = Astro.props as Props;
+
+const isUiSize = (value: unknown): value is InputUiSize =>
+  value === "sm" || value === "default" || value === "lg";
+
+const resolvedUiSize = isUiSize(sizeProp) ? sizeProp : "default";
+const resolvedNativeSize =
+  nativeSize ?? (!isUiSize(sizeProp) ? sizeProp : undefined);
+---
+
+<input
+  type={type}
+  size={resolvedNativeSize}
+  data-slot={props["data-slot"] ?? "input"}
+  data-size={resolvedUiSize}
+  class={cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 active:border-ring rounded-lg border bg-card shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 disabled:bg-muted disabled:text-muted-foreground data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:py-1 data-[size=sm]:md:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:py-1 data-[size=default]:md:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:py-1.5 data-[size=lg]:md:text-base", inputVariants({ size: resolvedUiSize }), className)}
+  {...props}
+/>

package/src/components/input-group/InputGroup.astro

@@ -1,135 +1,135 @@
----
-/**
- * @component InputGroup
- * @title Input Group
- * @description An input field with attached addons like icons, buttons, or text labels.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2282-6923
- *
- * @preview
- *
- * <div class="grid w-full max-w-sm gap-6">
- *   <InputGroup>
- *     <InputGroupInput placeholder="Search..." />
- *     <InputGroupAddon>
- *       <SearchIcon />
- *     </InputGroupAddon>
- *     <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
- *   </InputGroup>
- *
- *   <InputGroup>
- *     <InputGroupInput placeholder="example.com" />
- *     <InputGroupAddon>
- *       <InputGroupText>https://</InputGroupText>
- *     </InputGroupAddon>
- *     <InputGroupAddon align="inline-end">
- *       <InputGroupButton size="xs">Check</InputGroupButton>
- *     </InputGroupAddon>
- *   </InputGroup>
- *
- *   <InputGroup>
- *     <InputGroupTextarea placeholder="Ask, Search or Chat..." />
- *     <InputGroupAddon align="block-end">
- *       <InputGroupButton size="icon-sm" class="rounded-full">
- *         <PlusIcon />
- *       </InputGroupButton>
- *       <InputGroupButton variant="ghost">Auto</InputGroupButton>
- *       <InputGroupText class="ml-auto">52% used</InputGroupText>
- *       <Separator orientation="vertical" class="!h-4" />
- *       <InputGroupButton size="icon-sm" variant="default" class="rounded-full">
- *         <ArrowUpIcon />
- *         <span class="sr-only">Send</span>
- *       </InputGroupButton>
- *     </InputGroupAddon>
- *   </InputGroup>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from '@bejamas/ui/components/input-group';
- * ---
- *
- * <InputGroup>
- *   <InputGroupInput placeholder="Search..." />
- *   <InputGroupAddon><SearchIcon /></InputGroupAddon>
- * </InputGroup>
- * ```
- *
- * @examples
- *
- * ### Sizes
- *
- * <div class="grid w-full max-w-sm gap-3">
- *   <InputGroup size="sm">
- *     <InputGroupInput placeholder="Small (h-8)" />
- *   </InputGroup>
- *   <InputGroup>
- *     <InputGroupInput placeholder="Default (h-9)" />
- *   </InputGroup>
- *   <InputGroup size="lg">
- *     <InputGroupInput placeholder="Large (h-10)" />
- *   </InputGroup>
- * </div>
- *
- * @api
- *
- * | Prop | Type | Default |
- * | --- | --- | --- |
- * | `size` | `"sm" \| "default" \| "lg"` | `"default"` |
- */
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  size?: "sm" | "default" | "lg";
-  class?: string;
-}
-
-const {
-  size = "default",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="group"
-  data-slot="input-group"
-  data-size={size}
-  class={cn(
-    "group/input-group border-input bg-card has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 rounded-lg border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto! has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto! has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto!",
-    className,
-  )}
->
-  <slot />
-</div>
-
-<script is:inline type="module">
-  // Focus the nearest input when clicking on addons (unless clicking a button)
-  document.addEventListener("click", (e) => {
-    const addon = e.target.closest("[data-slot='input-group-addon']");
-    if (!addon) return;
-    if (e.target.closest("button")) return;
-    const root = addon.closest("[data-slot='input-group']");
-    if (!root) return;
-    const input = root.querySelector(
-      "[data-input-group-control], [data-slot='input-group-control']",
-    );
-    input?.focus();
-  });
-  // Disabled styling passthrough when any control is disabled
-  document.querySelectorAll("[data-slot='input-group']").forEach((group) => {
-    const updateDisabled = () => {
-      const ctrl = group.querySelector(
-        "[data-input-group-control], [data-slot='input-group-control']",
-      );
-      group.dataset.disabled = ctrl?.hasAttribute("disabled")
-        ? "true"
-        : "false";
-    };
-    updateDisabled();
-    group.addEventListener("change", updateDisabled, { capture: true });
-  });
-</script>
+---
+/**
+ * @component InputGroup
+ * @title Input Group
+ * @description An input field with attached addons like icons, buttons, or text labels.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2282-6923
+ *
+ * @preview
+ *
+ * <div class="grid w-full max-w-sm gap-6">
+ *   <InputGroup>
+ *     <InputGroupInput placeholder="Search..." />
+ *     <InputGroupAddon>
+ *       <SearchIcon />
+ *     </InputGroupAddon>
+ *     <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+ *   </InputGroup>
+ *
+ *   <InputGroup>
+ *     <InputGroupInput placeholder="example.com" />
+ *     <InputGroupAddon>
+ *       <InputGroupText>https://</InputGroupText>
+ *     </InputGroupAddon>
+ *     <InputGroupAddon align="inline-end">
+ *       <InputGroupButton size="xs">Check</InputGroupButton>
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ *
+ *   <InputGroup>
+ *     <InputGroupTextarea placeholder="Ask, Search or Chat..." />
+ *     <InputGroupAddon align="block-end">
+ *       <InputGroupButton size="icon-sm" class="rounded-full">
+ *         <PlusIcon />
+ *       </InputGroupButton>
+ *       <InputGroupButton variant="ghost">Auto</InputGroupButton>
+ *       <InputGroupText class="ml-auto">52% used</InputGroupText>
+ *       <Separator orientation="vertical" class="!h-4" />
+ *       <InputGroupButton size="icon-sm" variant="default" class="rounded-full">
+ *         <ArrowUpIcon />
+ *         <span class="sr-only">Send</span>
+ *       </InputGroupButton>
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from '@bejamas/ui/components/input-group';
+ * ---
+ *
+ * <InputGroup>
+ *   <InputGroupInput placeholder="Search..." />
+ *   <InputGroupAddon><SearchIcon /></InputGroupAddon>
+ * </InputGroup>
+ * ```
+ *
+ * @examples
+ *
+ * ### Sizes
+ *
+ * <div class="grid w-full max-w-sm gap-3">
+ *   <InputGroup size="sm">
+ *     <InputGroupInput placeholder="Small (h-8)" />
+ *   </InputGroup>
+ *   <InputGroup>
+ *     <InputGroupInput placeholder="Default (h-9)" />
+ *   </InputGroup>
+ *   <InputGroup size="lg">
+ *     <InputGroupInput placeholder="Large (h-10)" />
+ *   </InputGroup>
+ * </div>
+ *
+ * @api
+ *
+ * | Prop | Type | Default |
+ * | --- | --- | --- |
+ * | `size` | `"sm" \| "default" \| "lg"` | `"default"` |
+ */
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  size?: "sm" | "default" | "lg";
+  class?: string;
+}
+
+const {
+  size = "default",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="input-group"
+  data-size={size}
+  class={cn(
+    "group/input-group border-input bg-card has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 rounded-lg border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto! has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto! has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto!",
+    className,
+  )}
+>
+  <slot />
+</div>
+
+<script is:inline type="module">
+  // Focus the nearest input when clicking on addons (unless clicking a button)
+  document.addEventListener("click", (e) => {
+    const addon = e.target.closest("[data-slot='input-group-addon']");
+    if (!addon) return;
+    if (e.target.closest("button")) return;
+    const root = addon.closest("[data-slot='input-group']");
+    if (!root) return;
+    const input = root.querySelector(
+      "[data-input-group-control], [data-slot='input-group-control']",
+    );
+    input?.focus();
+  });
+  // Disabled styling passthrough when any control is disabled
+  document.querySelectorAll("[data-slot='input-group']").forEach((group) => {
+    const updateDisabled = () => {
+      const ctrl = group.querySelector(
+        "[data-input-group-control], [data-slot='input-group-control']",
+      );
+      group.dataset.disabled = ctrl?.hasAttribute("disabled")
+        ? "true"
+        : "false";
+    };
+    updateDisabled();
+    group.addEventListener("change", updateDisabled, { capture: true });
+  });
+</script>

package/src/components/input-group/InputGroupAddon.astro

@@ -1,49 +1,49 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-type Align = "inline-start" | "inline-end" | "block-start" | "block-end";
-
-interface Props extends HTMLAttributes<"div"> {
-  align?: Align;
-  class?: string;
-}
-
-const {
-  align = "inline-start",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const addonVariants = cva(
-  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first",
-        "inline-end":
-          "pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last",
-        "block-start":
-          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
-        "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  },
-);
----
-
-<div
-  {...rest}
-  role="group"
-  data-slot="input-group-addon"
-  data-align={align}
-  class={cn(addonVariants({ align }), className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type Align = "inline-start" | "inline-end" | "block-start" | "block-end";
+
+interface Props extends HTMLAttributes<"div"> {
+  align?: Align;
+  class?: string;
+}
+
+const {
+  align = "inline-start",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const addonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end":
+          "pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="input-group-addon"
+  data-align={align}
+  class={cn(addonVariants({ align }), className)}
+>
+  <slot />
+</div>