@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/button-group/ButtonGroup.astro

@@ -1,130 +1,130 @@
----
-/**
- * @component ButtonGroup
- * @title Button Group
- * @description A set of related buttons grouped together, with support for horizontal or vertical layouts.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=114-9882
- *
- * @preview
- *
- * <ButtonGroup>
- *   <Button variant="outline">Left</Button>
- *   <Button variant="outline">Middle</Button>
- *   <Button variant="outline">Right</Button>
- * </ButtonGroup>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { ButtonGroup } from '@bejamas/ui/components/button-group';
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- * <ButtonGroup>
- *   <Button>One</Button>
- *   <Button>Two</Button>
- *   <Button>Three</Button>
- * </ButtonGroup>
- * ```
- *
- * @props
- * - orientation?: "horizontal" | "vertical" — Default: "horizontal".
- * - class?: string — Additional classes for the container.
- *
- * @examples
- *
- * ### Orientation
- *
- * <ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
- *   <Button variant="outline" size="icon">
- *     <PlusIcon />
- *   </Button>
- *   <Button variant="outline" size="icon">
- *     <MinusIcon />
- *   </Button>
- * </ButtonGroup>
- *
- * ### Size
- *
- * <div class="flex flex-col items-start gap-8">
- *   <ButtonGroup>
- *     <Button variant="outline" size="sm">
- *       Small
- *     </Button>
- *     <Button variant="outline" size="sm">
- *       Button
- *     </Button>
- *     <Button variant="outline" size="sm">
- *       Group
- *     </Button>
- *     <Button variant="outline" size="icon-sm">
- *       <PlusIcon />
- *      </Button>
- *   </ButtonGroup>
- *   <ButtonGroup>
- *     <Button variant="outline">Default</Button>
- *     <Button variant="outline">Button</Button>
- *     <Button variant="outline">Group</Button>
- *     <Button variant="outline" size="icon">
- *       <PlusIcon />
- *     </Button>
- *   </ButtonGroup>
- *   <ButtonGroup>
- *     <Button variant="outline" size="lg">
- *       Large
- *     </Button>
- *     <Button variant="outline" size="lg">
- *       Button
- *     </Button>
- *     <Button variant="outline" size="lg">
- *       Group
- *     </Button>
- *     <Button variant="outline" size="icon-lg">
- *       <PlusIcon />
- *     </Button>
- *   </ButtonGroup>
- * </div>
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props
-  extends VariantProps<typeof buttonGroupVariants>, HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const {
-  orientation = "horizontal",
-  class: className = "",
-  ...props
-} = Astro.props as Props;
-
-export const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]_[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-s-none",
-        vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]_[data-slot]]:border-t-0",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  },
-);
----
-
-<div
-  role="group"
-  data-slot="button-group"
-  data-orientation={orientation}
-  class={cn("has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md", buttonGroupVariants({ orientation }), className)}
-  {...props}
->
-  <slot />
-</div>
+---
+/**
+ * @component ButtonGroup
+ * @title Button Group
+ * @description A set of related buttons grouped together, with support for horizontal or vertical layouts.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=114-9882
+ *
+ * @preview
+ *
+ * <ButtonGroup>
+ *   <Button variant="outline">Left</Button>
+ *   <Button variant="outline">Middle</Button>
+ *   <Button variant="outline">Right</Button>
+ * </ButtonGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { ButtonGroup } from '@bejamas/ui/components/button-group';
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ * <ButtonGroup>
+ *   <Button>One</Button>
+ *   <Button>Two</Button>
+ *   <Button>Three</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * @props
+ * - orientation?: "horizontal" | "vertical" — Default: "horizontal".
+ * - class?: string — Additional classes for the container.
+ *
+ * @examples
+ *
+ * ### Orientation
+ *
+ * <ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
+ *   <Button variant="outline" size="icon">
+ *     <PlusIcon />
+ *   </Button>
+ *   <Button variant="outline" size="icon">
+ *     <MinusIcon />
+ *   </Button>
+ * </ButtonGroup>
+ *
+ * ### Size
+ *
+ * <div class="flex flex-col items-start gap-8">
+ *   <ButtonGroup>
+ *     <Button variant="outline" size="sm">
+ *       Small
+ *     </Button>
+ *     <Button variant="outline" size="sm">
+ *       Button
+ *     </Button>
+ *     <Button variant="outline" size="sm">
+ *       Group
+ *     </Button>
+ *     <Button variant="outline" size="icon-sm">
+ *       <PlusIcon />
+ *      </Button>
+ *   </ButtonGroup>
+ *   <ButtonGroup>
+ *     <Button variant="outline">Default</Button>
+ *     <Button variant="outline">Button</Button>
+ *     <Button variant="outline">Group</Button>
+ *     <Button variant="outline" size="icon">
+ *       <PlusIcon />
+ *     </Button>
+ *   </ButtonGroup>
+ *   <ButtonGroup>
+ *     <Button variant="outline" size="lg">
+ *       Large
+ *     </Button>
+ *     <Button variant="outline" size="lg">
+ *       Button
+ *     </Button>
+ *     <Button variant="outline" size="lg">
+ *       Group
+ *     </Button>
+ *     <Button variant="outline" size="icon-lg">
+ *       <PlusIcon />
+ *     </Button>
+ *   </ButtonGroup>
+ * </div>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props
+  extends VariantProps<typeof buttonGroupVariants>, HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  orientation = "horizontal",
+  class: className = "",
+  ...props
+} = Astro.props as Props;
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]_[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-s-none",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]_[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+---
+
+<div
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={cn("has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md", buttonGroupVariants({ orientation }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/button-group/ButtonGroupSeparator.astro

@@ -1,30 +1,30 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import Separator from "../separator/Separator.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  orientation?: "horizontal" | "vertical";
-  decorative?: boolean;
-}
-
-const {
-  class: className = "",
-  orientation = "vertical",
-  decorative = true,
-  ...rest
-} = Astro.props as Props;
----
-
-<Separator
-  {...rest}
-  decorative={decorative}
-  data-slot="button-group-separator"
-  data-orientation={orientation}
-  orientation={orientation}
-  class={cn(
-    "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
-    className,
-  )}
-/>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import Separator from "../separator/Separator.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}
+
+const {
+  class: className = "",
+  orientation = "vertical",
+  decorative = true,
+  ...rest
+} = Astro.props as Props;
+---
+
+<Separator
+  {...rest}
+  decorative={decorative}
+  data-slot="button-group-separator"
+  data-orientation={orientation}
+  orientation={orientation}
+  class={cn(
+    "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+    className,
+  )}
+/>

package/src/components/button-group/ButtonGroupText.astro

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