@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/Button/Button.variants.js

@@ -1,6 +1,7 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const t = r(
+const a = r(
   [
+    "select-none",
     "border",
     "cursor-pointer",
     "disabled:pointer-events-none",
@@ -9,7 +10,7 @@ const t = r(
     "focus-visible:ring-1",
     "focus-visible:ring-ring",
     "font-semibold",
-    "gap-[7px]",
+    "gap-2",
     "inline-flex",
     "items-center",
     "justify-center",
@@ -20,22 +21,24 @@ const t = r(
     "px-4",
     "py-2",
     "text-sm",
+    "bg-aurora-500",
+    "border-aurora-500",
+    "text-metal-900",
+    "focus-visible:bg-aurora-400",
+    "hover:bg-aurora-400",
+    "hover:border-aurora-400",
     "kubefirst:border-kubefirst-primary",
     "kubefirst:bg-kubefirst-primary",
     "kubefirst:hover:bg-kubefirst-secondary",
     "kubefirst:hover:border-kubefirst-secondary",
-    "kubefirst:text-white",
-    "bg-aurora-500",
-    "border-aurora-500",
-    "text-slate-700",
-    "hover:bg-aurora-400",
-    "hover:border-aurora-400"
+    "kubefirst:text-white"
   ],
   {
     variants: {
       variant: {
         primary: "",
         secondary: ["bg-white"],
+        tertiary: [],
         danger: [
           "border-red-700",
           "bg-red-700",
@@ -43,7 +46,18 @@ const t = r(
           "hover:bg-red-800",
           "hover:border-red-800"
         ],
-        text: ["bg-transparent", "border-transparent", "text-slate-500"]
+        link: [
+          "bg-transparent",
+          "border-transparent",
+          "text-blue-600",
+          "hover:underline",
+          "hover:text-blue-700",
+          "hover:bg-transparent",
+          "hover:border-transparent",
+          "dark:text-aurora-500",
+          "dark:hover:text-aurora-500",
+          "focus-visible:bg-transparent"
+        ]
       },
       shape: {
         circle: ["rounded-full", "p-1"]
@@ -61,21 +75,29 @@ const t = r(
         large: ""
       },
       appearance: {
-        compact: [
-          "px-2",
-          "py-1",
-          "h-auto",
-          "text-[0.8125rem]",
-          "leading-[1.375rem]",
-          "h-[30px]"
-        ]
+        compact: ["px-2", "py-1", "text-[13px]", "leading-5.5", "h-7.5"]
       }
     },
     compoundVariants: [
+      {
+        variant: "primary",
+        disabled: !0,
+        class: [
+          "text-metal-900",
+          "bg-aurora-500",
+          "border-transparent",
+          "kubefirst:bg-zinc-200",
+          "kubefirst:border-zinc-200",
+          "kubefirst:text-zinc-500",
+          "text-gray-700",
+          "opacity-45"
+        ]
+      },
       {
         variant: "secondary",
         disabled: !1,
         class: [
+          "transition-colors",
           "bg-white",
           "hover:bg-white",
           "text-slate-700",
@@ -83,9 +105,11 @@ const t = r(
           "hover:text-slate-700",
           "hover:border-slate-300",
           "hover:bg-slate-50",
+          "focus-visible:bg-slate-50",
           "dark:bg-transparent",
           "dark:text-aurora-500",
           "dark:border-aurora-500",
+          "dark:focus-visible:bg-aurora-900",
           "dark:hover:bg-aurora-900",
           "dark:hover:border-aurora-500",
           "dark:hover:text-aurora-500",
@@ -98,96 +122,91 @@ const t = r(
         ]
       },
       {
-        variant: "primary",
+        variant: "secondary",
         disabled: !0,
         class: [
-          "kubefirst:bg-zinc-200",
-          "kubefirst:border-zinc-200",
+          "kubefirst:bg-white",
+          "kubefirst:border-zinc-500",
           "kubefirst:text-zinc-500",
-          "text-gray-700",
+          "border-slate-300",
+          "bg-white",
+          "text-slate-700",
+          "dark:bg-aurora-900",
+          "dark:border-aurora-500",
+          "dark:text-aurora-500",
           "opacity-45"
         ]
       },
       {
-        variant: "secondary",
+        variant: "tertiary",
+        disabled: !1,
+        class: [
+          "transition-colors",
+          "bg-transparent",
+          "border-transparent",
+          "text-slate-700",
+          "hover:bg-aurora-100",
+          "focus-visible:bg-aurora-100",
+          "hover:text-slate-700",
+          "hover:border-transparent",
+          "dark:bg-transparent",
+          "dark:text-metal-100",
+          "dark:border-transparent",
+          "dark:focus-visible:bg-green-400/15",
+          "dark:hover:bg-green-400/15",
+          "dark:hover:border-transparent",
+          "dark:hover:text-metal-100",
+          "dark:focus-visible:hover:bg-green-400/15"
+        ]
+      },
+      {
+        variant: "tertiary",
         disabled: !0,
         class: [
-          "kubefirst:bg-white",
-          "kubefirst:border-zinc-500",
-          "kubefirst:text-zinc-500",
-          "border-slate-300/45",
+          "border-transparent",
           "bg-white",
-          "text-slate-700/45"
+          "text-slate-700",
+          "opacity-45",
+          "dark:bg-transparent",
+          "dark:border-transparent",
+          "dark:text-metal-100"
         ]
       },
       {
         variant: "danger",
         version: "alternate",
         class: [
-          "kubefirst:border-red-700",
-          "kubefirst:text-red-700",
-          "kubefirst:bg-white",
-          "kubefirst:hover:bg-red-50",
-          "border-red-700",
           "text-red-700",
+          "border-red-700",
           "bg-white",
-          "hover:bg-red-50"
+          "hover:bg-red-50",
+          "dark:bg-transparent",
+          "dark:border-rose-400",
+          "dark:text-rose-400",
+          "dark:hover:bg-rose-950",
+          "dark:hover:border-rose-400",
+          "dark:focus-visible:bg-rose-950"
         ]
       },
       {
         variant: "danger",
         disabled: !0,
-        class: ["text-white", "bg-red-700/45", "border-transparent"]
+        class: ["text-white", "border-red-700", "bg-red-700", "opacity-45"]
       },
       {
-        variant: "text",
-        disabled: !1,
-        version: "default",
-        class: [
-          "kubefirst:hover:border-transparent",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:hover:bg-purple-50",
-          "kubefirst:bg-white",
-          "kubefirst:border-transparent",
-          "bg-white",
-          "border-transparent",
-          "text-slate-700",
-          "hover:border-transparent",
-          "hover:text-aurora-500",
-          "hover:bg-transparent"
-        ]
-      },
-      {
-        variant: "text",
-        disabled: !1,
+        variant: "danger",
         version: "alternate",
-        class: [
-          "bg-white",
-          "border-transparent",
-          "text-aurora-500",
-          "hover:border-transparent",
-          "hover:text-aurora-500",
-          "hover:bg-aurora-50",
-          "kubefirst:hover:border-transparent",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:border-transparent",
-          "kubefirst:bg-white",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst:hover:bg-purple-50"
-        ]
+        disabled: !0,
+        class: ["text-red-700", "border-red-700", "bg-white", "opacity-45"]
       },
       {
-        variant: "text",
+        variant: "link",
         disabled: !0,
-        version: ["default", "alternate"],
         class: [
-          "kubefirst:bg-white",
-          "kubefirst:border-white",
-          "kubefirst:text-zinc-400",
-          "bg-white",
-          "border-white",
-          "text-slate-700/45"
+          "bg-transparent",
+          "border-transparent",
+          "text-blue-600",
+          "opacity-45"
         ]
       },
       {
@@ -197,30 +216,21 @@ const t = r(
         class: [
           "w-8",
           "h-8",
-          "text-slate-400",
+          "text-slate-500",
           "bg-transparent",
           "border-transparent",
           "hover:border-transparent",
-          "hover:bg-aurora-500/5",
+          "hover:bg-aurora-50",
+          "focus-visible:bg-aurora-50",
           "hover:text-slate-800",
+          "focus-visible:text-slate-800",
           "[&>svg]:w-5",
           "[&>svg]:h-5",
-          "dark:text-slate-400",
+          "dark:text-metal-400",
+          "dark:focus-visible:text-aurora-500",
           "dark:hover:text-aurora-500",
-          "dark:hover:bg-aurora-900",
-          "kubefirst:text-slate-400",
-          "kubefirst:bg-transparent",
-          "kubefirst:border-transparent",
-          "kubefirst:hover:border-transparent",
-          "kubefirst:hover:bg-kubefirst-primary/5",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst-dark:text-slate-400",
-          "kubefirst-dark:bg-transparent",
-          "kubefirst-dark:border-transparent",
-          "kubefirst-dark:hover:border-transparent",
-          "kubefirst-dark:hover:bg-kubefirst-primary/5",
-          "kubefirst-dark:hover:text-kubefirst-primary",
-          "kubefirst-dark:hover:bg-kubefirst-primary/25"
+          "dark:hover:bg-green-400/15",
+          "dark:focus-visible:bg-green-400/15"
         ]
       },
       {
@@ -236,11 +246,15 @@ const t = r(
         disabled: !1,
         class: [
           "text-red-700",
+          "focus-visible:text-red-700",
           "hover:text-red-700",
+          "focus-visible:bg-red-50",
           "hover:bg-red-50",
-          "dark:text-red-700",
+          "dark:text-red-500",
           "dark:hover:text-red-500",
-          "dark:hover:bg-red-700/25"
+          "dark:focus-visible:text-red-500",
+          "dark:hover:bg-red-950/55",
+          "dark:focus-visible:bg-red-950/55"
         ]
       },
       {
@@ -248,13 +262,15 @@ const t = r(
         size: ["medium", "large"],
         disabled: !0,
         class: [
-          "text-slate-400",
+          "opacity-45",
+          "text-slate-500",
           "bg-transparent",
           "border-transparent",
           "w-8",
           "h-8",
           "[&>svg]:w-5",
-          "[&>svg]:h-5"
+          "[&>svg]:h-5",
+          "dark:text-metal-400"
         ]
       },
       {
@@ -273,5 +289,5 @@ const t = r(
   }
 );
 export {
-  t as buttonVariants
+  a as buttonVariants
 };

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { Props } from './ButtonGroup.types';
+/**
+ * A segmented toggle button group for single selection among options.
+ *
+ * @example
+ * ```tsx
+ * // Simple button group
+ * <ButtonGroup
+ *   name="processor"
+ *   options={[
+ *     { value: 'cpu', label: 'CPU' },
+ *     { value: 'gpu', label: 'GPU' },
+ *   ]}
+ *   defaultValue="cpu"
+ *   onValueChange={(value) => setProcessor(value)}
+ * />
+ *
+ * // With descriptions
+ * <ButtonGroup
+ *   name="instance-type"
+ *   label="Instance Type"
+ *   isRequired
+ *   options={[
+ *     { value: 'standard', label: 'Standard', description: 'Balanced compute resources' },
+ *     { value: 'spot', label: 'Spot', description: 'Cost-effective for flexible workloads' },
+ *   ]}
+ *   onValueChange={setInstanceType}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-buttongroup--docs Storybook}
+ */
+export declare const ButtonGroup: FC<Props>;

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,142 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useMemo as q } from "react";
+import { cn as n } from "../../utils/index.js";
+import { buttonGroupPillVariants as z, buttonGroupVariants as A, buttonGroupWrapperVariants as E } from "./ButtonGroup.variants.js";
+import { useButtonGroup as H } from "./hooks/useButtonGroup.js";
+import { ButtonGroupLabel as J } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { m as Q } from "../../proxy-CngVm5qA.js";
+import { ButtonGroupItem as T } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupMessage as U } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+const X = ({
+  className: p,
+  contentClassName: f,
+  defaultValue: h,
+  descriptionAlign: v,
+  descriptionClassName: G,
+  disabled: o,
+  duration: l,
+  error: b,
+  errorClassName: N,
+  helperText: y,
+  helperTextClassName: B,
+  isRequired: D,
+  itemClassName: g,
+  itemLabelClassName: x,
+  label: s,
+  labelAlign: w,
+  labelClassName: I,
+  name: K,
+  options: t,
+  pillClassName: S,
+  requiredClassName: V,
+  theme: $,
+  value: j,
+  wrapperClassName: F,
+  onValueChange: L
+}) => {
+  const {
+    animationDirection: M,
+    groupRef: C,
+    id: m,
+    selected: r,
+    handleKeyDown: O,
+    handleSelect: P
+  } = H({
+    defaultValue: h,
+    disabled: o ?? void 0,
+    options: t,
+    value: j,
+    onValueChange: L
+  }), u = t.length, c = q(
+    () => t.findIndex((e) => e.value === r),
+    [t, r]
+  );
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: n(E(), F),
+      "data-theme": $,
+      children: [
+        s && /* @__PURE__ */ a(
+          J,
+          {
+            className: I,
+            htmlFor: m,
+            isRequired: D,
+            label: s,
+            requiredClassName: V
+          }
+        ),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            ref: C,
+            role: "radiogroup",
+            "aria-labelledby": s ? m : void 0,
+            className: n(A({ disabled: o }), p),
+            children: [
+              c >= 0 && /* @__PURE__ */ a(
+                Q.div,
+                {
+                  "aria-hidden": "true",
+                  className: n(z(), S),
+                  initial: !1,
+                  animate: {
+                    left: `calc(${c} * (100% / ${u}) + 8px)`,
+                    width: `calc(100% / ${u} - 16px)`
+                  },
+                  transition: {
+                    type: "tween",
+                    ease: "linear",
+                    duration: l ?? 0.3
+                  }
+                }
+              ),
+              t.map((e, i) => {
+                const R = r === e.value, W = o || e.disabled, k = !!e.description;
+                return /* @__PURE__ */ a(
+                  T,
+                  {
+                    animationDirection: M,
+                    className: g,
+                    contentClassName: f,
+                    descriptionAlign: v,
+                    descriptionClassName: G,
+                    duration: l,
+                    hasDescription: k,
+                    index: i,
+                    isDisabled: !!W,
+                    isFirst: i === 0,
+                    isLast: i === t.length - 1,
+                    isSelected: R,
+                    labelAlign: w,
+                    labelClassName: x,
+                    option: e,
+                    value: e.value,
+                    onKeyDown: O,
+                    onSelect: P
+                  },
+                  e.value
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a("input", { type: "hidden", name: K, value: r ?? "" }),
+        /* @__PURE__ */ a(
+          U,
+          {
+            error: b,
+            errorClassName: N,
+            helperText: y,
+            helperTextClassName: B
+          }
+        )
+      ]
+    }
+  );
+};
+X.displayName = "KonstructButtonGroup";
+export {
+  X as ButtonGroup
+};

package/dist/components/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { buttonGroupVariants } from './ButtonGroup.variants';
+/** Horizontal text alignment for label and description */
+export type TextAlign = 'left' | 'center' | 'right';
+/**
+ * Configuration for a single button option in the ButtonGroup.
+ */
+export type ButtonGroupOption = {
+    /** Optional description displayed below the label */
+    description?: string;
+    /** Whether this specific option is disabled */
+    disabled?: boolean;
+    /** Optional icon to display before the label */
+    icon?: ReactNode;
+    /** The label text displayed for this option */
+    label: string;
+    /** Optional secondary label displayed right-aligned on the same line as the label */
+    secondaryLabel?: string;
+    /** The value associated with this option */
+    value: string;
+};
+/**
+ * Props for the ButtonGroup component.
+ *
+ * @example
+ * ```tsx
+ * // Simple button group
+ * <ButtonGroup
+ *   name="processor"
+ *   options={[
+ *     { value: 'cpu', label: 'CPU' },
+ *     { value: 'gpu', label: 'GPU' },
+ *   ]}
+ *   defaultValue="cpu"
+ *   onValueChange={(value) => setProcessor(value)}
+ * />
+ *
+ * // With descriptions
+ * <ButtonGroup
+ *   name="instance-type"
+ *   options={[
+ *     { value: 'standard', label: 'Standard', description: 'Balanced compute resources' },
+ *     { value: 'spot', label: 'Spot', description: 'Cost-effective for flexible workloads' },
+ *   ]}
+ *   onValueChange={setInstanceType}
+ * />
+ * ```
+ */
+export type Props = VariantProps<typeof buttonGroupVariants> & {
+    /** CSS classes for the button group container */
+    className?: string;
+    /** CSS classes for the content wrapper inside each item */
+    contentClassName?: string;
+    /** Initially selected value (uncontrolled mode) */
+    defaultValue?: string;
+    /** Horizontal alignment of the description text (default: 'left') */
+    descriptionAlign?: TextAlign;
+    /** CSS classes for description text */
+    descriptionClassName?: string;
+    /** Animation duration in seconds (default: 0.3) */
+    duration?: number;
+    /** Error message to display */
+    error?: string;
+    /** CSS classes for error message */
+    errorClassName?: string;
+    /** Helper text displayed below the button group */
+    helperText?: string;
+    /** CSS classes for helper text */
+    helperTextClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** CSS classes for individual button items */
+    itemClassName?: string;
+    /** CSS classes for the label text inside items */
+    itemLabelClassName?: string;
+    /** Horizontal alignment of the label text (default: 'left') */
+    labelAlign?: TextAlign;
+    /** Label displayed above the button group */
+    label?: string | ReactNode;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Form field name (required for form submission) */
+    name: string;
+    /** Array of button options */
+    options: ButtonGroupOption[];
+    /** CSS classes for the animated pill */
+    pillClassName?: string;
+    /** CSS classes for the required asterisk */
+    requiredClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+};

package/dist/components/ButtonGroup/ButtonGroup.variants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Animated pill background (selected state indicator)
+ */
+export declare const buttonGroupPillVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Wrapper variants for the outer container with label
+ */
+export declare const buttonGroupWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Group container variants - no outer border, just flex container
+ */
+export declare const buttonGroupVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ButtonGroup/ButtonGroup.variants.js

@@ -0,0 +1,39 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const a = t([
+  "absolute",
+  "top-2",
+  "bottom-2",
+  "bg-metal-800",
+  "rounded-lg",
+  "pointer-events-none"
+]), o = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full"
+]), l = t(
+  [
+    "inline-flex",
+    "items-stretch",
+    "w-full",
+    "relative",
+    "bg-metal-900",
+    "rounded-lg"
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+);
+export {
+  a as buttonGroupPillVariants,
+  l as buttonGroupVariants,
+  o as buttonGroupWrapperVariants
+};

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ButtonGroupItem.types';
+export declare const ButtonGroupItem: FC<Props>;