@cl-light-ds/ui 0.2.0 → 0.3.0

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>

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

@@ -1,58 +1,58 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Button } from "../button";
-
-type GroupButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
-
-interface Props extends HTMLAttributes<"button"> {
-  size?: GroupButtonSize;
-  variant?:
-  | "default"
-  | "secondary"
-  | "outline"
-  | "ghost"
-  | "destructive"
-  | "link";
-  type?: "button" | "submit" | "reset";
-  class?: string;
-}
-
-const {
-  size = "xs",
-  variant = "ghost",
-  type = "button",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const inputGroupButtonVariants = cva(
-  "gap-2 text-sm flex items-center shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  },
-);
----
-
-<Button
-  type={type}
-  data-size={size}
-  variant={variant}
-  data-slot="input-group-button"
-  class={cn(inputGroupButtonVariants({ size }), className)}
-  {...rest}
->
-  <slot />
-</Button>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Button } from "../button";
+
+type GroupButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
+
+interface Props extends HTMLAttributes<"button"> {
+  size?: GroupButtonSize;
+  variant?:
+  | "default"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "destructive"
+  | "link";
+  type?: "button" | "submit" | "reset";
+  class?: string;
+}
+
+const {
+  size = "xs",
+  variant = "ghost",
+  type = "button",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const inputGroupButtonVariants = cva(
+  "gap-2 text-sm flex items-center shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+---
+
+<Button
+  type={type}
+  data-size={size}
+  variant={variant}
+  data-slot="input-group-button"
+  class={cn(inputGroupButtonVariants({ size }), className)}
+  {...rest}
+>
+  <slot />
+</Button>

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

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Input } from "../input";
-import { inputGroupControlClasses } from "./controlClasses";
-
-interface Props extends HTMLAttributes<"input"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<Input
-  data-slot="input-group-control"
-  class={cn(inputGroupControlClasses, className)}
-  {...rest}
-/>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Input } from "../input";
+import { inputGroupControlClasses } from "./controlClasses";
+
+interface Props extends HTMLAttributes<"input"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Input
+  data-slot="input-group-control"
+  class={cn(inputGroupControlClasses, className)}
+  {...rest}
+/>

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

@@ -1,21 +1,21 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"span"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<span
-  {...rest}
-  data-slot="input-group-text"
-  class={cn(
-    "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-    className,
-  )}
->
-  <slot />
-</span>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  data-slot="input-group-text"
+  class={cn(
+    "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+    className,
+  )}
+>
+  <slot />
+</span>

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

@@ -1,17 +1,17 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Textarea } from "../textarea";
-
-interface Props extends HTMLAttributes<"textarea"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<Textarea
-  data-slot="input-group-control"
-  class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none", className)}
-  {...rest}
-/>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Textarea } from "../textarea";
+
+interface Props extends HTMLAttributes<"textarea"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Textarea
+  data-slot="input-group-control"
+  class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none", className)}
+  {...rest}
+/>

package/src/components/input-group/controlClasses.ts

@@ -1,2 +1,2 @@
-export const inputGroupControlClasses =
-  "rounded-none border-0 bg-transparent text-base shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 min-w-0 group-data-[size=sm]/input-group:h-8! group-data-[size=sm]/input-group:px-2.5! group-data-[size=sm]/input-group:py-1! group-data-[size=sm]/input-group:md:text-xs! group-data-[size=default]/input-group:h-9! group-data-[size=default]/input-group:px-3! group-data-[size=default]/input-group:py-1! group-data-[size=default]/input-group:md:text-sm! group-data-[size=lg]/input-group:h-10! group-data-[size=lg]/input-group:px-3.5! group-data-[size=lg]/input-group:py-1.5! group-data-[size=lg]/input-group:md:text-base!";
+export const inputGroupControlClasses =
+  "rounded-none border-0 bg-transparent text-base shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 min-w-0 group-data-[size=sm]/input-group:h-8! group-data-[size=sm]/input-group:px-2.5! group-data-[size=sm]/input-group:py-1! group-data-[size=sm]/input-group:md:text-xs! group-data-[size=default]/input-group:h-9! group-data-[size=default]/input-group:px-3! group-data-[size=default]/input-group:py-1! group-data-[size=default]/input-group:md:text-sm! group-data-[size=lg]/input-group:h-10! group-data-[size=lg]/input-group:px-3.5! group-data-[size=lg]/input-group:py-1.5! group-data-[size=lg]/input-group:md:text-base!";

package/src/components/input-group/index.ts

@@ -1,6 +1,6 @@
-export { default as InputGroup } from "./InputGroup.astro";
-export { default as InputGroupAddon } from "./InputGroupAddon.astro";
-export { default as InputGroupButton } from "./InputGroupButton.astro";
-export { default as InputGroupInput } from "./InputGroupInput.astro";
-export { default as InputGroupText } from "./InputGroupText.astro";
-export { default as InputGroupTextarea } from "./InputGroupTextarea.astro";
+export { default as InputGroup } from "./InputGroup.astro";
+export { default as InputGroupAddon } from "./InputGroupAddon.astro";
+export { default as InputGroupButton } from "./InputGroupButton.astro";
+export { default as InputGroupInput } from "./InputGroupInput.astro";
+export { default as InputGroupText } from "./InputGroupText.astro";
+export { default as InputGroupTextarea } from "./InputGroupTextarea.astro";