@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/item/ItemGroup.astro

@@ -1,24 +1,24 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes, HTMLTag } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  as?: HTMLTag;
-  class?: string;
-}
-
-const {
-  as: Tag = "div",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<Tag
-  {...rest}
-  role="list"
-  data-slot="item-group"
-  class={cn("gap-4 has-data-[size=sm]:gap-2.5 group/item-group flex flex-col", className)}
->
-  <slot />
-</Tag>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes, HTMLTag } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  as?: HTMLTag;
+  class?: string;
+}
+
+const {
+  as: Tag = "div",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<Tag
+  {...rest}
+  role="list"
+  data-slot="item-group"
+  class={cn("gap-4 has-data-[size=sm]:gap-2.5 group/item-group flex flex-col", className)}
+>
+  <slot />
+</Tag>

package/src/components/item/ItemHeader.astro

@@ -1,24 +1,24 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="item-header"
-  class={cn(
-    "gap-2 flex basis-full items-center justify-between",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="item-header"
+  class={cn(
+    "gap-2 flex basis-full items-center justify-between",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/item/ItemMedia.astro

@@ -1,47 +1,47 @@
----
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type ItemMediaVariant = "default" | "icon" | "image";
-
-interface Props extends HTMLAttributes<"div"> {
-  mediaVariant?: ItemMediaVariant;
-  class?: string;
-}
-
-const {
-  class: className = "",
-  mediaVariant = "default",
-  ...rest
-} = Astro.props as Props;
-
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:self-start group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-data-[size=header]/item:translate-y-0 group-data-[size=header]/item:self-auto",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "[&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=header]/item:size-auto group-data-[size=header]/item:w-full group-data-[size=header]/item:aspect-square [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
----
-
-<div
-  {...rest}
-  data-slot="item-media"
-  class={cn(
-    "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start group-data-[size=header]/item:translate-y-0 group-data-[size=header]/item:self-auto",
-    itemMediaVariants({ variant: mediaVariant }),
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type ItemMediaVariant = "default" | "icon" | "image";
+
+interface Props extends HTMLAttributes<"div"> {
+  mediaVariant?: ItemMediaVariant;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  mediaVariant = "default",
+  ...rest
+} = Astro.props as Props;
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:self-start group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-data-[size=header]/item:translate-y-0 group-data-[size=header]/item:self-auto",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=header]/item:size-auto group-data-[size=header]/item:w-full group-data-[size=header]/item:aspect-square [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+---
+
+<div
+  {...rest}
+  data-slot="item-media"
+  class={cn(
+    "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start group-data-[size=header]/item:translate-y-0 group-data-[size=header]/item:self-auto",
+    itemMediaVariants({ variant: mediaVariant }),
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/item/ItemSeparator.astro

@@ -1,21 +1,21 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Separator } from "../separator";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<Separator
-  {...rest}
-  data-slot="item-separator"
-  aria-hidden="true"
-  class={cn("my-2", className)}
-/>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Separator } from "../separator";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<Separator
+  {...rest}
+  data-slot="item-separator"
+  aria-hidden="true"
+  class={cn("my-2", className)}
+/>

package/src/components/item/ItemTitle.astro

@@ -1,25 +1,25 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="item-title"
-  class={cn(
-    "gap-2 text-sm leading-snug font-semibold underline-offset-4 cn-font-heading",
-    "flex w-fit items-center",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="item-title"
+  class={cn(
+    "gap-2 text-sm leading-snug font-semibold underline-offset-4 cn-font-heading",
+    "flex w-fit items-center",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/kbd/Kbd.astro

@@ -1,145 +1,145 @@
----
-/**
- * @component Kbd
- * @title Kbd
- * @description A visual indicator for keyboard keys and shortcuts, styled to match system keyboard key appearance.
- * @status stable
- *
- * @preview
- *
- * <div class="flex flex-col items-center gap-4">
- *   <KbdGroup>
- *     <Kbd>⌘</Kbd>
- *     <Kbd>⇧</Kbd>
- *     <Kbd>⌥</Kbd>
- *     <Kbd>⌃</Kbd>
- *   </KbdGroup>
- *   <KbdGroup>
- *     <Kbd>Ctrl</Kbd>
- *     <span>+</span>
- *     <Kbd>B</Kbd>
- *   </KbdGroup>
- *   <KbdGroup>
- *     <Kbd>⌘</Kbd>
- *     <Kbd>K</Kbd>
- *   </KbdGroup>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
- * ---
- *
- * <KbdGroup>
- *   <Kbd>⌘</Kbd>
- *   <Kbd>K</Kbd>
- * </KbdGroup>
- *
- * <KbdGroup>
- *   <Kbd>Ctrl</Kbd>
- *   <span>+</span>
- *   <Kbd>B</Kbd>
- * </KbdGroup>
- * ```
- *
- * @examples
- *
- * ### Group
- *
- * Use the `KbdGroup` component to group keyboard keys together.
- *
- * <div class="flex flex-col items-center gap-4">
- *   <p class="text-muted-foreground text-sm">
- *    Use{" "}
- *     <KbdGroup>
- *       <Kbd>Ctrl + B</Kbd>
- *       <Kbd>Ctrl + K</Kbd>
- *     </KbdGroup>{" "}
- *     to open the command palette
- *   </p>
- * </div>
- *
- * ### Button
- *
- * Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.
- *
- * <Button variant="outline">
- *   Accept <Kbd class="translate-x-0.5">
- *     ⏎
- *   </Kbd>
- * </Button>
- *
- * ### Tooltip
- *
- * You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.
- *
- * <div class="flex flex-wrap gap-4">
- *   <Tooltip>
- *     <TooltipTrigger asChild>
- *       <Button variant="outline">Save</Button>
- *     </TooltipTrigger>
- *     <TooltipContent class="pr-1.5">
- *       <div class="flex items-center gap-2">
- *         Save Changes <Kbd>S</Kbd>
- *       </div>
- *     </TooltipContent>
- *   </Tooltip>
- *   <Tooltip>
- *     <TooltipTrigger asChild>
- *       <Button variant="outline">Print</Button>
- *     </TooltipTrigger>
- *     <TooltipContent class="pr-1.5">
- *       <div class="flex items-center gap-2">
- *         Print Document <KbdGroup>
- *           <Kbd>Ctrl</Kbd>
- *           <Kbd>P</Kbd>
- *         </KbdGroup>
- *       </div>
- *     </TooltipContent>
- *   </Tooltip>
- * </div>
- *
- * ### Input Group
- *
- * You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.
- *
- * <div class="flex w-full max-w-xs flex-col gap-6">
- *   <InputGroup>
- *     <InputGroupInput placeholder="Search..." />
- *     <InputGroupAddon>
- *       <SearchIcon />
- *     </InputGroupAddon>
- *     <InputGroupAddon align="inline-end">
- *       <Kbd>⌘</Kbd>
- *       <Kbd>K</Kbd>
- *     </InputGroupAddon>
- *   </InputGroup>
- * </div>
- *
- * @props
- * - class?: string — Additional classes for styling.
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const { class: className = "", ...props } = Astro.props;
----
-
-<kbd
-  data-slot="kbd"
-  class={cn("bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3", 
-    "bg-muted text-muted-foreground",
-    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background",
-    "dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-    "h-5 w-fit min-w-5 gap-1 rounded-sm px-1",
-    "font-sans text-xs font-medium",
-    "[&_svg:not([class*='size-'])]:size-3",
-    "pointer-events-none inline-flex items-center justify-center select-none",
-    className,
-  )}
-  {...props}
->
-  <slot />
-</kbd>
+---
+/**
+ * @component Kbd
+ * @title Kbd
+ * @description A visual indicator for keyboard keys and shortcuts, styled to match system keyboard key appearance.
+ * @status stable
+ *
+ * @preview
+ *
+ * <div class="flex flex-col items-center gap-4">
+ *   <KbdGroup>
+ *     <Kbd>⌘</Kbd>
+ *     <Kbd>⇧</Kbd>
+ *     <Kbd>⌥</Kbd>
+ *     <Kbd>⌃</Kbd>
+ *   </KbdGroup>
+ *   <KbdGroup>
+ *     <Kbd>Ctrl</Kbd>
+ *     <span>+</span>
+ *     <Kbd>B</Kbd>
+ *   </KbdGroup>
+ *   <KbdGroup>
+ *     <Kbd>⌘</Kbd>
+ *     <Kbd>K</Kbd>
+ *   </KbdGroup>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
+ * ---
+ *
+ * <KbdGroup>
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </KbdGroup>
+ *
+ * <KbdGroup>
+ *   <Kbd>Ctrl</Kbd>
+ *   <span>+</span>
+ *   <Kbd>B</Kbd>
+ * </KbdGroup>
+ * ```
+ *
+ * @examples
+ *
+ * ### Group
+ *
+ * Use the `KbdGroup` component to group keyboard keys together.
+ *
+ * <div class="flex flex-col items-center gap-4">
+ *   <p class="text-muted-foreground text-sm">
+ *    Use{" "}
+ *     <KbdGroup>
+ *       <Kbd>Ctrl + B</Kbd>
+ *       <Kbd>Ctrl + K</Kbd>
+ *     </KbdGroup>{" "}
+ *     to open the command palette
+ *   </p>
+ * </div>
+ *
+ * ### Button
+ *
+ * Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.
+ *
+ * <Button variant="outline">
+ *   Accept <Kbd class="translate-x-0.5">
+ *     ⏎
+ *   </Kbd>
+ * </Button>
+ *
+ * ### Tooltip
+ *
+ * You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.
+ *
+ * <div class="flex flex-wrap gap-4">
+ *   <Tooltip>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Save</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent class="pr-1.5">
+ *       <div class="flex items-center gap-2">
+ *         Save Changes <Kbd>S</Kbd>
+ *       </div>
+ *     </TooltipContent>
+ *   </Tooltip>
+ *   <Tooltip>
+ *     <TooltipTrigger asChild>
+ *       <Button variant="outline">Print</Button>
+ *     </TooltipTrigger>
+ *     <TooltipContent class="pr-1.5">
+ *       <div class="flex items-center gap-2">
+ *         Print Document <KbdGroup>
+ *           <Kbd>Ctrl</Kbd>
+ *           <Kbd>P</Kbd>
+ *         </KbdGroup>
+ *       </div>
+ *     </TooltipContent>
+ *   </Tooltip>
+ * </div>
+ *
+ * ### Input Group
+ *
+ * You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.
+ *
+ * <div class="flex w-full max-w-xs flex-col gap-6">
+ *   <InputGroup>
+ *     <InputGroupInput placeholder="Search..." />
+ *     <InputGroupAddon>
+ *       <SearchIcon />
+ *     </InputGroupAddon>
+ *     <InputGroupAddon align="inline-end">
+ *       <Kbd>⌘</Kbd>
+ *       <Kbd>K</Kbd>
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ * </div>
+ *
+ * @props
+ * - class?: string — Additional classes for styling.
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const { class: className = "", ...props } = Astro.props;
+---
+
+<kbd
+  data-slot="kbd"
+  class={cn("bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3", 
+    "bg-muted text-muted-foreground",
+    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background",
+    "dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+    "h-5 w-fit min-w-5 gap-1 rounded-sm px-1",
+    "font-sans text-xs font-medium",
+    "[&_svg:not([class*='size-'])]:size-3",
+    "pointer-events-none inline-flex items-center justify-center select-none",
+    className,
+  )}
+  {...props}
+>
+  <slot />
+</kbd>