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

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

@@ -0,0 +1,90 @@
+type HexColor = `#${string}`;
+type CSSColor = `var(--${string})` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
+/**
+ * Props for the PieChart component.
+ * A doughnut/pie chart built on Chart.js for data visualization.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   values={[30, 70]}
+ *   colors={['#ef4444', '#22c55e']}
+ *   title="70%"
+ *   subtitle="Complete"
+ *   cutoutPercentage={75}
+ * />
+ * ```
+ */
+export type Props = {
+    /**
+     * Array of hexadecimal colors for the borders of the pie chart segments
+     * @default ['#FFFFFF', '#FFFFFF']
+     */
+    borderColors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
+    /**
+     * Width of the border for pie chart segments in pixels
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * Array of hexadecimal colors for filling the pie chart segments
+     * @default ['#525252', '#00D492']
+     */
+    colors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
+    /**
+     * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
+     * @default 80
+     */
+    cutoutPercentage?: number;
+    /**
+     * Whether to redraw the entire chart when props change
+     * @default true
+     */
+    redraw?: boolean;
+    /**
+     * Hexadecimal color for the subtitle text
+     * @default '#6B7280'
+     */
+    subtitleColor?: HexColor;
+    /**
+     * Font size for the subtitle in pixels
+     * @default 14
+     */
+    subtitleFontSize?: number;
+    /**
+     * Font weight for the subtitle
+     * @default 'normal'
+     */
+    subtitleFontWeight?: 'bold' | 'normal';
+    /**
+     * Hexadecimal color for the title text
+     * @default '#111827'
+     */
+    titleColor?: HexColor;
+    /**
+     * Font size for the title in pixels
+     * @default 16
+     */
+    titleFontSize?: number;
+    /**
+     * Font weight for the title
+     * @default 'bold'
+     */
+    titleFontWeight?: 'bold' | 'normal';
+    /**
+     * Array of numeric values representing data for each segment of the pie chart
+     * @required
+     */
+    values: number[];
+} /**
+ * Union type that enforces either:
+ * - No title and no subtitle
+ * - Title with optional subtitle
+ */ & ({
+    title?: undefined;
+    subtitle?: never;
+} | {
+    title: string;
+    subtitle?: string;
+});
+export {};

package/dist/components/ProgressBar/ProgressBar.d.ts

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

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,62 +1,41 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { cn as s } from "../../utils/index.js";
-import { progressBarProgress as f, progressBarVariants as N } from "./ProgressBar.variants.js";
-const j = ({
-  backgroundBarClassName: t,
-  label: r,
-  labelClassName: o,
-  labelWrapperClassName: l,
-  percent: a,
-  percentClassName: n,
-  progressBarClassName: d,
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { cn as n } from "../../utils/index.js";
+import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
+const w = ({
+  className: c,
+  fillClassName: r,
+  leftContent: e,
+  percent: l,
+  rightContent: a,
   status: m,
-  theme: c,
-  wrapperClassName: h
-}) => /* @__PURE__ */ i(
-  "div",
-  {
-    className: s("w-full text-inherit", h),
-    "data-theme": c,
-    children: [
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: s(
-            "flex font-semibold",
-            {
-              "justify-between": r,
-              "justify-end": !r
-            },
-            l
-          ),
-          children: [
-            r ? /* @__PURE__ */ e("label", { className: s(o), children: r }) : null,
-            /* @__PURE__ */ i("span", { className: s(n), children: [
-              a,
-              "%"
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: s(N({ className: t })),
-          children: /* @__PURE__ */ e(
-            "div",
-            {
-              className: s(
-                f({ status: m, className: d }),
-                a > 0 && a < 99 ? "transition-width duration-500" : "transition-colors duration-0"
-              ),
-              style: { width: `${a}%` }
-            }
-          )
-        }
-      )
-    ]
-  }
-);
+  theme: d,
+  trackClassName: t
+}) => {
+  const o = Math.min(Math.max(l, 0), 100), h = e || a;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: n("flex flex-col gap-1 w-full", c),
+      "data-theme": d,
+      children: [
+        h && /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+          e && /* @__PURE__ */ s("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: e }),
+          a && /* @__PURE__ */ s("div", { className: "text-right shrink-0", children: a })
+        ] }),
+        /* @__PURE__ */ s("div", { className: x({ className: t }), children: /* @__PURE__ */ s(
+          "div",
+          {
+            className: p({
+              status: r ? null : m,
+              className: r
+            }),
+            style: { width: `${o}%` }
+          }
+        ) })
+      ]
+    }
+  );
+};
 export {
-  j as ProgressBar
+  w as ProgressBar
 };

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { progressBarFillVariants } from './ProgressBar.variants';
+export interface ProgressBarProps extends VariantProps<typeof progressBarFillVariants> {
+    /** Additional CSS classes for the outer wrapper */
+    className?: string;
+    /** Custom CSS class for the progress bar fill (e.g., "bg-purple-500") */
+    fillClassName?: string;
+    /** Content displayed on the left side (e.g., "26%") */
+    leftContent?: ReactNode;
+    /** Progress percentage (0-100) */
+    percent: number;
+    /** Content displayed on the right side (e.g., "130/500 GB") */
+    rightContent?: ReactNode;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Custom CSS class for the track background (e.g., "bg-gray-200") */
+    trackClassName?: string;
+}

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

@@ -0,0 +1,4 @@
+export declare const progressBarTrackVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const progressBarFillVariants: (props?: ({
+    status?: "warning" | "error" | "default" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ProgressBar/ProgressBar.variants.js

@@ -1,36 +1,35 @@
-import { c as s } from "../../index-D29mdTf5.js";
-const a = s([
+import { c as r } from "../../index-D29mdTf5.js";
+const t = r([
+  "relative",
   "h-2",
-  "rounded-full",
-  "overflow-hidden",
-  "mt-4",
-  "bg-zinc-200"
-]), t = s(
-  ["h-full", "bg-[length:100%_100%]", "animate-gradient-move"],
+  "w-full",
+  "rounded",
+  "bg-gray-300",
+  "dark:bg-gray-700"
+]), s = r(
+  [
+    "absolute",
+    "inset-y-0",
+    "left-0",
+    "rounded",
+    "transition-[width,background-color]",
+    "duration-500"
+  ],
   {
     variants: {
       status: {
-        success: "",
-        progress: "",
-        error: ""
+        default: "bg-metal-600",
+        success: "bg-green-600",
+        warning: "bg-amber-500",
+        error: "bg-red-500"
       }
     },
-    compoundVariants: [
-      {
-        status: "progress",
-        class: ["bg-linear-to-r from-[#81e2b4] to-kubefirst-primary"]
-      },
-      {
-        status: "success",
-        class: ["bg-[#81E2B4]"]
-      }
-    ],
     defaultVariants: {
-      status: "success"
+      status: "default"
     }
   }
 );
 export {
-  t as progressBarProgress,
-  a as progressBarVariants
+  s as progressBarFillVariants,
+  t as progressBarTrackVariants
 };

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { RadioProps } from './Radio.types';
+/**
+ * A radio button component with label and optional description.
+ * Use RadioGroup to manage a group of radio buttons.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   description="Free forever"
+ *   checked={plan === 'basic'}
+ *   onChange={(value) => setPlan(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radio--docs Storybook}
+ */
+declare const Radio: FC<RadioProps>;
+export { Radio };

package/dist/components/Radio/Radio.js

@@ -1,53 +1,54 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { forwardRef as g, useId as j, useCallback as w } from "react";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V, useId as j, useCallback as w } from "react";
+import { Typography as d } from "../Typography/Typography.js";
 import { cn as a } from "../../utils/index.js";
-import { radioVariants as y, labelRadioVariants as t, wrapperRadioVariants as F } from "./Radio.variants.js";
-const $ = g(
+import { radioVariants as F, labelRadioVariants as p, wrapperRadioVariants as $ } from "./Radio.variants.js";
+const C = V(
   ({
     checked: r = !1,
-    className: p,
-    defaultChecked: o,
+    className: f,
+    defaultChecked: l,
     disabled: e,
-    label: f,
-    labelTextClassName: N,
-    description: l,
-    descriptionClassName: h,
-    name: i,
-    theme: x,
-    value: m,
-    wrapperClassName: R,
-    onChange: c
-  }, u) => {
-    const d = `${j()}-${i}`, b = w(
-      (V) => {
-        c?.(V);
+    label: N,
+    labelTextClassName: h,
+    description: o,
+    descriptionClassName: x,
+    name: m,
+    theme: R,
+    value: n,
+    wrapperClassName: u,
+    onChange: i
+  }, y) => {
+    const t = `${j()}-${m}`, b = w(
+      (g) => {
+        i?.(g);
       },
-      [c]
+      [i]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(
       "label",
       {
-        htmlFor: d,
+        htmlFor: t,
         className: a(
-          F({
-            className: R,
+          $({
+            className: u,
             disabled: e || !1
           })
         ),
-        "data-theme": x,
+        "data-theme": R,
         children: [
           /* @__PURE__ */ s(
             "input",
             {
-              ref: u,
-              id: d,
+              ref: y,
+              id: t,
               type: "radio",
-              name: i,
-              value: m,
+              name: m,
+              value: n,
               checked: r,
-              defaultChecked: o,
+              defaultChecked: l,
               className: "hidden peer",
-              onChange: () => b(m),
+              onChange: () => b(n),
               disabled: e
             }
           ),
@@ -55,31 +56,33 @@ const $ = g(
             "span",
             {
               className: a(
-                y({
-                  className: p,
+                F({
+                  className: f,
                   disabled: e || !1,
-                  checked: r || o || !1
+                  checked: r || l || !1
                 })
               )
             }
           ),
-          /* @__PURE__ */ n("div", { className: a(l && "flex flex-col gap-1"), children: [
+          /* @__PURE__ */ c("div", { className: a(o && "flex flex-col gap-1"), children: [
             /* @__PURE__ */ s(
-              "span",
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: N })
+                  p({ className: h })
                 ),
-                children: f
+                children: N
               }
             ),
-            l && /* @__PURE__ */ s(
-              "span",
+            o && /* @__PURE__ */ s(
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: h })
+                  p({ className: x })
                 ),
-                children: l
+                children: o
               }
             )
           ] })
@@ -88,7 +91,7 @@ const $ = g(
     );
   }
 );
-$.displayName = "KonstructRadio";
+C.displayName = "KonstructRadio";
 export {
-  $ as Radio
+  C as Radio
 };

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

@@ -0,0 +1,44 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { radioVariants } from './Radio.variants';
+/**
+ * Props for the Radio component.
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="basic"
+ *   label="Basic Plan"
+ *   checked={selected === 'basic'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'>, VariantProps<typeof radioVariants> {
+    /** Whether the radio is checked */
+    checked?: boolean;
+    /** Initial checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Whether the radio is disabled */
+    disabled?: boolean;
+    /** Label text or element */
+    label?: string | ReactNode;
+    /** CSS classes for the label text */
+    labelTextClassName?: string;
+    /** Form field name (groups radios together) */
+    name: string;
+    /** Description text below the label */
+    description?: string | ReactNode;
+    /** CSS classes for the description */
+    descriptionClassName?: string;
+    /** Value submitted when selected */
+    value: string;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when selected */
+    onChange?: (value: string) => void;
+}

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

@@ -0,0 +1,8 @@
+export declare const wrapperRadioVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const radioVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelRadioVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Radio/Radio.variants.js

@@ -15,7 +15,8 @@ const a = e(
 ), o = e(
   [
     "border",
-    "border-gray-300",
+    "border-zinc-400",
+    "dark:border-metal-600",
     "duration-300",
     "inline-block",
     "rounded-full",
@@ -61,22 +62,25 @@ const a = e(
         disabled: !0,
         checked: !0,
         class: [
-          "peer-checked:border-gray-300",
-          "peer-checked:before:bg-gray-300",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-300",
           "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed"
+          "[&+span]:cursor-not-allowed",
+          "dark:peer-checked:before:bg-aurora-500/50",
+          "dark:peer-checked:border-aurora-500/50"
         ]
       },
       {
         disabled: !0,
         checked: !1,
         class: [
-          "peer-checked:border-gray-200",
-          "peer-checked:border-gray-200",
-          "peer-checked:before:bg-gray-200",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-50",
           "cursor-not-allowed",
           "[&+span]:cursor-not-allowed",
-          "bg-gray-50"
+          "bg-gray-50",
+          "dark:bg-metal-800",
+          "dark:bg-metal-800"
         ]
       }
     ],

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { RadioCardProps } from './RadioCard.types';
+/**
+ * A card-style radio button for visually prominent selection options.
+ * Use RadioCardGroup to manage a group of radio cards.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="tier"
+ *   value="enterprise"
+ *   label="Enterprise"
+ *   description="Custom pricing"
+ *   checked={tier === 'enterprise'}
+ *   onChange={(value) => setTier(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocard--docs Storybook}
+ */
+declare const RadioCard: FC<RadioCardProps>;
+export { RadioCard };

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

@@ -0,0 +1,23 @@
+import { Theme } from '../../domain/theme';
+import { CardProps } from '../Card/Card.types';
+import { RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioCard component.
+ * Combines Card styling with Radio functionality.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="plan"
+ *   value="pro"
+ *   label="Pro Plan"
+ *   description="$29/month"
+ *   checked={selected === 'pro'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+    labelWrapperClassName?: string;
+    theme?: Theme;
+};

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

@@ -0,0 +1 @@
+export declare const radioCardVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,10 +1,5 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
-  "flex",
-  "items-center",
-  "p-0",
-  "border-2"
-]);
+const e = r(["flex", "items-center", "p-0", "border"]);
 export {
   e as radioCardVariants
 };

package/dist/components/RadioCardGroup/RadioCardGroup.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { RadioCardGroupProps } from './RadioCardGroup.types';
+/**
+ * A group of card-style radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="plan"
+ *   direction="row"
+ *   options={[
+ *     { value: 'starter', label: 'Starter', description: 'For individuals' },
+ *     { value: 'team', label: 'Team', description: 'For small teams' },
+ *     { value: 'business', label: 'Business', description: 'For organizations' },
+ *   ]}
+ *   defaultChecked="team"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocardgroup--docs Storybook}
+ */
+export declare const RadioCardGroup: FC<RadioCardGroupProps>;

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

@@ -0,0 +1,30 @@
+import { Theme } from '../../domain/theme';
+import { RadioCardProps } from '../RadioCard/RadioCard.types';
+/**
+ * Props for the RadioCardGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="pricing"
+ *   options={[
+ *     { value: 'basic', label: 'Basic', description: '$9/mo' },
+ *     { value: 'pro', label: 'Pro', description: '$29/mo' },
+ *     { value: 'enterprise', label: 'Enterprise', description: 'Custom' },
+ *   ]}
+ *   defaultChecked="pro"
+ *   onValueChange={(value) => setTier(value)}
+ * />
+ * ```
+ */
+export type RadioCardGroupProps = {
+    asChild?: boolean;
+    className?: string;
+    defaultChecked?: string;
+    direction?: 'row' | 'col';
+    name: string;
+    options: Omit<RadioCardProps, 'name' | 'checked' | 'defaultChecked'>[];
+    theme?: Theme;
+    wrapperClassName?: string;
+    onValueChange?: (value: string) => void;
+};

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

@@ -0,0 +1,3 @@
+export declare const radioCardGroupVariants: (props?: ({
+    direction?: "col" | "row" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;