@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,88 @@
+import { t as n } from "../../utils-DHuiYnx1.js";
+import { t as k } from "../../proxy-uLtw-ZML.js";
+import { buttonGroupPillVariants as q, buttonGroupVariants as z, buttonGroupWrapperVariants as A } from "./ButtonGroup.variants.js";
+import { ButtonGroupItem as E } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as H } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as J } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+import { useButtonGroup as Q } from "./hooks/useButtonGroup.js";
+import { useMemo as T } from "react";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+var U = ({ className: p, contentClassName: f, defaultValue: h, descriptionAlign: v, descriptionClassName: G, disabled: s, duration: l, error: b, errorClassName: N, helperText: y, helperTextClassName: B, isRequired: D, itemClassName: g, itemLabelClassName: x, label: i, 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 } = Q({
+    defaultValue: h,
+    disabled: s ?? void 0,
+    options: t,
+    value: j,
+    onValueChange: L
+  }), u = t.length, c = T(() => t.findIndex((e) => e.value === r), [t, r]);
+  return /* @__PURE__ */ d("div", {
+    className: n(A(), F),
+    "data-theme": $,
+    children: [
+      i && /* @__PURE__ */ a(H, {
+        className: I,
+        htmlFor: m,
+        isRequired: D,
+        label: i,
+        requiredClassName: V
+      }),
+      /* @__PURE__ */ d("div", {
+        ref: C,
+        role: "radiogroup",
+        "aria-labelledby": i ? m : void 0,
+        className: n(z({ disabled: s }), p),
+        children: [c >= 0 && /* @__PURE__ */ a(k.div, {
+          "aria-hidden": "true",
+          className: n(q(), 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, o) => {
+          const R = r === e.value, W = s || e.disabled;
+          return /* @__PURE__ */ a(E, {
+            animationDirection: M,
+            className: g,
+            contentClassName: f,
+            descriptionAlign: v,
+            descriptionClassName: G,
+            duration: l,
+            hasDescription: !!e.description,
+            index: o,
+            isDisabled: !!W,
+            isFirst: o === 0,
+            isLast: o === 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(J, {
+        error: b,
+        errorClassName: N,
+        helperText: y,
+        helperTextClassName: B
+      })
+    ]
+  });
+};
+U.displayName = "KonstructButtonGroup";
+export {
+  U 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,32 @@
+import { t } from "../../dist-DtEbXv47.js";
+var e = t([
+  "absolute",
+  "top-2",
+  "bottom-2",
+  "bg-metal-800",
+  "rounded-lg",
+  "pointer-events-none"
+]), l = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full"
+]), r = 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 {
+  e as buttonGroupPillVariants,
+  r as buttonGroupVariants,
+  l 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>;

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -0,0 +1,60 @@
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { t as L } from "../../../../proxy-uLtw-ZML.js";
+import { buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w, buttonGroupLabelVariants as o } from "./ButtonGroupItem.variants.js";
+import { memo as j } from "react";
+import { jsx as s, jsxs as a } from "react/jsx-runtime";
+var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = j(({ animationDirection: t, className: n, contentClassName: d, descriptionAlign: p, descriptionClassName: h, duration: b = 0.3, hasDescription: f, index: c, isDisabled: l, isFirst: v, isLast: y, isSelected: i, labelAlign: m, labelClassName: u, option: e, value: N, onKeyDown: G, onSelect: x }) => /* @__PURE__ */ s("button", {
+  type: "button",
+  role: "radio",
+  "aria-checked": i,
+  "data-value": e.value,
+  disabled: l,
+  tabIndex: i || c === 0 ? 0 : -1,
+  onClick: () => !l && x(N),
+  onKeyDown: (I) => G(I, c),
+  className: r(w({
+    disabled: l,
+    isFirst: v,
+    isLast: y
+  }), "relative", n),
+  children: /* @__PURE__ */ a("div", {
+    className: r(g({ hasDescription: f }), "relative", d),
+    children: [/* @__PURE__ */ a("span", {
+      className: "relative w-full",
+      children: [/* @__PURE__ */ a("span", {
+        className: r(o({
+          selected: !1,
+          labelAlign: m
+        }), u),
+        children: [/* @__PURE__ */ a("span", {
+          className: "flex items-center gap-2",
+          children: [e.icon, e.label]
+        }), e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })]
+      }), /* @__PURE__ */ a(L.span, {
+        className: r(o({
+          selected: !0,
+          labelAlign: m
+        }), "absolute inset-0", u),
+        "aria-hidden": "true",
+        initial: !1,
+        animate: { clipPath: k(i, t) },
+        transition: {
+          type: "tween",
+          ease: "linear",
+          duration: b
+        },
+        children: [/* @__PURE__ */ a("span", {
+          className: "flex items-center gap-2",
+          children: [e.icon, e.label]
+        }), e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })]
+      })]
+    }), e.description && /* @__PURE__ */ s("span", {
+      className: r(V({ descriptionAlign: p }), h),
+      children: e.description
+    })]
+  })
+}, e.value));
+B.displayName = "KonstructButtonGroupItem";
+export {
+  B as ButtonGroupItem
+};

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

@@ -0,0 +1,23 @@
+import { KeyboardEvent } from 'react';
+import { ButtonGroupOption, TextAlign } from '../../ButtonGroup.types';
+import { AnimationDirection } from '../../hooks';
+export type Props = {
+    animationDirection: AnimationDirection;
+    className?: string;
+    contentClassName?: string;
+    descriptionAlign?: TextAlign;
+    descriptionClassName?: string;
+    duration?: number;
+    labelAlign?: TextAlign;
+    hasDescription: boolean;
+    index: number;
+    isDisabled: boolean;
+    isFirst: boolean;
+    isLast: boolean;
+    isSelected: boolean;
+    labelClassName?: string;
+    option: ButtonGroupOption;
+    value: string;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>, index: number) => void;
+    onSelect: (value: string) => void;
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Individual button item variants - outer container with borders
+ */
+export declare const buttonGroupItemVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    isFirst?: boolean | null | undefined;
+    isLast?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Inner content container (the content layer above the pill)
+ */
+export declare const buttonGroupItemContentVariants: (props?: ({
+    hasDescription?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Label text variants inside button item
+ */
+export declare const buttonGroupLabelVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    labelAlign?: "center" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Description text variants inside button item
+ */
+export declare const buttonGroupDescriptionVariants: (props?: ({
+    descriptionAlign?: "center" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,98 @@
+import { t } from "../../../../dist-DtEbXv47.js";
+var r = t([
+  "flex",
+  "flex-1",
+  "items-start",
+  "cursor-pointer",
+  "select-none",
+  "transition-colors",
+  "p-2",
+  "border-metal-700",
+  "border-t",
+  "border-b",
+  "bg-transparent",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-aurora-500",
+  "focus-visible:ring-inset"
+], {
+  variants: {
+    disabled: {
+      true: "pointer-events-none opacity-50",
+      false: ""
+    },
+    isFirst: {
+      true: "border-l rounded-l-lg",
+      false: ""
+    },
+    isLast: {
+      true: "border-r rounded-r-lg",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: !1,
+    isFirst: !1,
+    isLast: !1
+  }
+}), a = t([
+  "flex",
+  "flex-col",
+  "flex-1",
+  "rounded-lg",
+  "px-4",
+  "py-2"
+], {
+  variants: { hasDescription: {
+    true: "justify-start",
+    false: "justify-center"
+  } },
+  defaultVariants: { hasDescription: !1 }
+}), s = t([
+  "text-sm",
+  "font-medium",
+  "leading-5",
+  "tracking-[0.1px]",
+  "flex",
+  "items-center",
+  "gap-2",
+  "w-full",
+  "justify-between",
+  "transition-colors",
+  "ease-in-out"
+], {
+  variants: {
+    selected: {
+      true: "text-aurora-500",
+      false: "text-metal-50"
+    },
+    labelAlign: {
+      left: "justify-between",
+      center: "justify-center",
+      right: "justify-end"
+    }
+  },
+  defaultVariants: {
+    selected: !1,
+    labelAlign: "left"
+  }
+}), i = t([
+  "text-sm",
+  "font-normal",
+  "leading-5",
+  "tracking-[0.15px]",
+  "text-metal-300"
+], {
+  variants: { descriptionAlign: {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  } },
+  defaultVariants: { descriptionAlign: "left" }
+});
+export {
+  i as buttonGroupDescriptionVariants,
+  a as buttonGroupItemContentVariants,
+  r as buttonGroupItemVariants,
+  s as buttonGroupLabelVariants
+};

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

@@ -0,0 +1,2 @@
+export { ButtonGroupItem } from './ButtonGroupItem';
+export type { Props as ButtonGroupItemProps } from './ButtonGroupItem.types';

package/dist/components/ButtonGroup/components/ButtonGroupItem/index.js

@@ -0,0 +1,4 @@
+import { ButtonGroupItem as t } from "./ButtonGroupItem.js";
+export {
+  t as ButtonGroupItem
+};

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

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

package/dist/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.js

@@ -0,0 +1,23 @@
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+import { memo as n } from "react";
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+var i = n(({ className: r, htmlFor: o, isRequired: a, label: m, requiredClassName: p }) => /* @__PURE__ */ l(e, {
+  component: "label",
+  variant: "labelLarge",
+  htmlFor: o,
+  className: t("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", "text-metal-50", r),
+  children: [
+    m,
+    " ",
+    a && /* @__PURE__ */ s(e, {
+      component: "span",
+      className: t("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5", p),
+      children: "*"
+    })
+  ]
+}));
+i.displayName = "KonstructButtonGroupLabel";
+export {
+  i as ButtonGroupLabel
+};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type Props = {
+    className?: string;
+    htmlFor: string;
+    isRequired?: boolean;
+    label: ReactNode | string;
+    requiredClassName?: string;
+};

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

@@ -0,0 +1,2 @@
+export { ButtonGroupLabel } from './ButtonGroupLabel';
+export type { Props as ButtonGroupLabelProps } from './ButtonGroupLabel.types';

package/dist/components/ButtonGroup/components/ButtonGroupLabel/index.js

@@ -0,0 +1,4 @@
+import { ButtonGroupLabel as r } from "./ButtonGroupLabel.js";
+export {
+  r as ButtonGroupLabel
+};

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

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

package/dist/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.js

@@ -0,0 +1,18 @@
+import { t as o } from "../../../../utils-DHuiYnx1.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+import { memo as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var p = s(({ error: t, errorClassName: a, helperText: n, helperTextClassName: m }) => typeof t == "string" && t.length > 0 ? /* @__PURE__ */ r(e, {
+  component: "span",
+  className: o("text-xs", "tracking-normal", "text-red-400", a),
+  children: t
+}) : n ? /* @__PURE__ */ r(e, {
+  component: "span",
+  variant: "body1",
+  className: o("text-xs", "text-metal-300", "select-none", "tracking-normal", m),
+  children: n
+}) : null);
+p.displayName = "KonstructButtonGroupMessage";
+export {
+  p as ButtonGroupMessage
+};

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

@@ -0,0 +1,6 @@
+export type Props = {
+    error?: string;
+    errorClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+};

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

@@ -0,0 +1,2 @@
+export { ButtonGroupMessage } from './ButtonGroupMessage';
+export type { Props as ButtonGroupMessageProps } from './ButtonGroupMessage.types';

package/dist/components/ButtonGroup/components/ButtonGroupMessage/index.js

@@ -0,0 +1,4 @@
+import { ButtonGroupMessage as r } from "./ButtonGroupMessage.js";
+export {
+  r as ButtonGroupMessage
+};

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

@@ -0,0 +1,3 @@
+export { ButtonGroupItem } from './ButtonGroupItem';
+export { ButtonGroupLabel } from './ButtonGroupLabel';
+export { ButtonGroupMessage } from './ButtonGroupMessage';

package/dist/components/ButtonGroup/components/index.js

@@ -0,0 +1,8 @@
+import { ButtonGroupItem as t } from "./ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as m } from "./ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as u } from "./ButtonGroupMessage/ButtonGroupMessage.js";
+export {
+  t as ButtonGroupItem,
+  m as ButtonGroupLabel,
+  u as ButtonGroupMessage
+};

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

@@ -0,0 +1,2 @@
+export { useButtonGroup } from './useButtonGroup';
+export type { AnimationDirection, UseButtonGroupProps, UseButtonGroupReturn, } from './useButtonGroup.types';

package/dist/components/ButtonGroup/hooks/index.js

@@ -0,0 +1,4 @@
+import { useButtonGroup as r } from "./useButtonGroup.js";
+export {
+  r as useButtonGroup
+};

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

@@ -0,0 +1,3 @@
+import { UseButtonGroupProps, UseButtonGroupReturn } from './useButtonGroup.types';
+export type { AnimationDirection } from './useButtonGroup.types';
+export declare const useButtonGroup: ({ defaultValue, disabled, options, value, onValueChange, }: UseButtonGroupProps) => UseButtonGroupReturn;

package/dist/components/ButtonGroup/hooks/useButtonGroup.js

@@ -0,0 +1,54 @@
+import { useCallback as d, useId as m, useRef as A, useState as D } from "react";
+var y = ({ defaultValue: g, disabled: l, options: a, value: f, onValueChange: x }) => {
+  const p = m(), I = A(null), o = f !== void 0, [k, v] = D(() => g), u = o ? f : k, [w, b] = D("none"), s = d((e) => e ? a.findIndex((n) => n.value === e) : -1, [a]), i = d((e) => {
+    if (l) return;
+    const n = s(u), t = s(e);
+    n !== -1 && t !== -1 && b(t > n ? "right" : "left"), o || v(e), x?.(e);
+  }, [
+    l,
+    s,
+    o,
+    x,
+    u
+  ]);
+  return {
+    animationDirection: w,
+    groupRef: I,
+    id: p,
+    selected: u,
+    handleKeyDown: d((e, n) => {
+      const t = a.filter((c) => !c.disabled && !l), h = t.findIndex((c) => c.value === a[n].value);
+      let r = -1;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), r = (h + 1) % t.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), r = (h - 1 + t.length) % t.length;
+          break;
+        case "Home":
+          e.preventDefault(), r = 0;
+          break;
+        case "End":
+          e.preventDefault(), r = t.length - 1;
+          break;
+        default:
+          return;
+      }
+      if (r >= 0) {
+        const c = t[r];
+        i(c.value), I.current?.querySelector(`[data-value="${c.value}"]`)?.focus();
+      }
+    }, [
+      l,
+      i,
+      a
+    ]),
+    handleSelect: i
+  };
+};
+export {
+  y as useButtonGroup
+};

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

@@ -0,0 +1,18 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { ButtonGroupOption } from '../ButtonGroup.types';
+export type AnimationDirection = 'left' | 'right' | 'none';
+export type UseButtonGroupProps = {
+    defaultValue?: string;
+    disabled?: boolean;
+    options: ButtonGroupOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export type UseButtonGroupReturn = {
+    animationDirection: AnimationDirection;
+    groupRef: RefObject<HTMLDivElement | null>;
+    id: string;
+    selected: string | undefined;
+    handleKeyDown: (event: KeyboardEvent<HTMLButtonElement>, currentIndex: number) => void;
+    handleSelect: (value: string) => void;
+};