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

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

@@ -0,0 +1,116 @@
+import { jsx as s, jsxs as a } from "react/jsx-runtime";
+import { memo as L } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { buttonGroupLabelVariants as u, buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w } from "./ButtonGroupItem.variants.js";
+import { m as j } from "../../../../proxy-CngVm5qA.js";
+const k = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = L(
+  ({
+    animationDirection: r,
+    className: n,
+    contentClassName: d,
+    descriptionAlign: p,
+    descriptionClassName: h,
+    duration: b = 0.3,
+    hasDescription: f,
+    index: c,
+    isDisabled: l,
+    isFirst: y,
+    isLast: N,
+    isSelected: i,
+    labelAlign: m,
+    labelClassName: o,
+    option: e,
+    value: v,
+    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(v),
+      onKeyDown: (I) => G(I, c),
+      className: t(
+        w({ disabled: l, isFirst: y, isLast: N }),
+        "relative",
+        n
+      ),
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: t(
+            g({ hasDescription: f }),
+            "relative",
+            d
+          ),
+          children: [
+            /* @__PURE__ */ a("span", { className: "relative w-full", children: [
+              /* @__PURE__ */ a(
+                "span",
+                {
+                  className: t(
+                    u({ selected: !1, labelAlign: m }),
+                    o
+                  ),
+                  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(
+                j.span,
+                {
+                  className: t(
+                    u({ selected: !0, labelAlign: m }),
+                    "absolute inset-0",
+                    o
+                  ),
+                  "aria-hidden": "true",
+                  initial: !1,
+                  animate: {
+                    clipPath: k(i, r)
+                  },
+                  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: t(
+                  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,111 @@
+import { c as t } from "../../../../index-D29mdTf5.js";
+const 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
+    }
+  }
+), s = t(
+  ["flex", "flex-col", "flex-1", "rounded-lg", "px-4", "py-2"],
+  {
+    variants: {
+      hasDescription: {
+        true: "justify-start",
+        false: "justify-center"
+      }
+    },
+    defaultVariants: {
+      hasDescription: !1
+    }
+  }
+), n = 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"
+    }
+  }
+), a = 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 {
+  a as buttonGroupDescriptionVariants,
+  s as buttonGroupItemContentVariants,
+  r as buttonGroupItemVariants,
+  n 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 r } from "./ButtonGroupItem.js";
+export {
+  r 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,45 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { memo as l } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+const c = l(
+  ({ className: o, htmlFor: r, isRequired: m, label: a, requiredClassName: n }) => /* @__PURE__ */ p(
+    e,
+    {
+      component: "label",
+      variant: "labelLarge",
+      htmlFor: r,
+      className: t(
+        "cursor-pointer",
+        "flex",
+        "gap-1",
+        "text-sm",
+        "font-medium",
+        "text-metal-50",
+        o
+      ),
+      children: [
+        a,
+        " ",
+        m && /* @__PURE__ */ s(
+          e,
+          {
+            component: "span",
+            className: t(
+              "text-red-600",
+              "dark:text-red-500",
+              "text-xs",
+              "mt-0.5",
+              n
+            ),
+            children: "*"
+          }
+        )
+      ]
+    }
+  )
+);
+c.displayName = "KonstructButtonGroupLabel";
+export {
+  c 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 t } from "./ButtonGroupLabel.js";
+export {
+  t 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,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { cn as r } from "../../../../utils/index.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+const p = m(
+  ({ error: t, errorClassName: s, helperText: n, helperTextClassName: a }) => typeof t == "string" && t.length > 0 ? /* @__PURE__ */ o(
+    e,
+    {
+      component: "span",
+      className: r(
+        "text-xs",
+        "tracking-normal",
+        "text-red-400",
+        s
+      ),
+      children: t
+    }
+  ) : n ? /* @__PURE__ */ o(
+    e,
+    {
+      component: "span",
+      variant: "body1",
+      className: r(
+        "text-xs",
+        "text-metal-300",
+        "select-none",
+        "tracking-normal",
+        a
+      ),
+      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 r } from "./ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as p } from "./ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as m } from "./ButtonGroupMessage/ButtonGroupMessage.js";
+export {
+  r as ButtonGroupItem,
+  p as ButtonGroupLabel,
+  m 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 t } from "./useButtonGroup.js";
+export {
+  t 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,67 @@
+import { useId as A, useRef as S, useState as D, useCallback as d } from "react";
+const R = ({
+  defaultValue: g,
+  disabled: l,
+  options: o,
+  value: f,
+  onValueChange: x
+}) => {
+  const p = A(), I = S(null), u = f !== void 0, [k, w] = D(
+    () => g
+  ), a = u ? f : k, [b, m] = D("none"), s = d(
+    (e) => e ? o.findIndex((n) => n.value === e) : -1,
+    [o]
+  ), i = d(
+    (e) => {
+      if (l) return;
+      const n = s(a), t = s(e);
+      n !== -1 && t !== -1 && m(t > n ? "right" : "left"), u || w(e), x?.(e);
+    },
+    [l, s, u, x, a]
+  ), v = d(
+    (e, n) => {
+      const t = o.filter(
+        (c) => !c.disabled && !l
+      ), h = t.findIndex(
+        (c) => c.value === o[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, o]
+  );
+  return {
+    animationDirection: b,
+    groupRef: I,
+    id: p,
+    selected: a,
+    handleKeyDown: v,
+    handleSelect: i
+  };
+};
+export {
+  R 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;
+};

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { CardProps } from './Card.types';
+/**
+ * A container card component with optional hover and active states.
+ *
+ * @example
+ * ```tsx
+ * // Basic card
+ * <Card>
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Card>
+ *
+ * // Hoverable card
+ * <Card canHover onClick={handleClick}>
+ *   Hover to see effect
+ * </Card>
+ *
+ * // Active/selected card
+ * <Card isActive>
+ *   This card is selected
+ * </Card>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-card--docs Storybook}
+ */
+declare const Card: FC<CardProps>;
+export { Card };

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

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { cardVariants } from './Card.variants';
+/**
+ * Props for the Card component.
+ *
+ * @example
+ * ```tsx
+ * <Card>Basic card content</Card>
+ * <Card canHover>Hoverable card</Card>
+ * <Card isActive>Active/selected card</Card>
+ * ```
+ */
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
+    /** Enable hover effect */
+    canHover?: boolean;
+    /** Show active/selected state */
+    isActive?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+}

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

@@ -0,0 +1,8 @@
+export declare const cardBaseVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const cardVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Card/Card.variants.js

@@ -1,6 +1,6 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const o = r(
-  ["border", "border-slate-200", "rounded-xl"],
+const e = r(
+  ["rounded-xl", "border", "border-gray-200", "dark:border-metal-700"],
   {
     variants: {
       isActive: {
@@ -13,24 +13,19 @@ const o = r(
       }
     }
   }
-), a = r(
+), o = r(
   ["border", "border-4", "p-3", "text-card-foreground", "rounded-xl"],
   {
     variants: {
       isActive: {
-        true: [
-          "border-kubefirst-primary",
-          "shadow",
-          "civo:border-civo-primary"
-        ],
+        true: ["border-aurora-500", "shadow"],
         false: "border-transparent"
       },
       canHover: {
         true: [
           "cursor-pointer",
           "border-transparent",
-          "group-hover:border-kubefirst-primary",
-          "civo:group-hover:border-civo-primary"
+          "group-hover:border-aurora-500"
         ],
         false: ""
       }
@@ -45,6 +40,6 @@ const o = r(
   }
 );
 export {
-  o as cardBaseVariants,
-  a as cardVariants
+  e as cardBaseVariants,
+  o as cardVariants
 };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { CheckboxProps } from './Checkbox.types';
+/**
+ * A checkbox component built on Radix UI primitives.
+ * Supports controlled and uncontrolled modes with label support.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox with label
+ * <Checkbox label="Accept terms and conditions" />
+ *
+ * // Controlled checkbox
+ * <Checkbox
+ *   label="Subscribe to newsletter"
+ *   defaultChecked={subscribed}
+ *   onChange={(checked) => setSubscribed(checked)}
+ * />
+ *
+ * // Disabled checkbox
+ * <Checkbox label="Premium feature" disabled />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-checkbox--docs Storybook}
+ */
+declare const Checkbox: FC<CheckboxProps>;
+export { Checkbox };