@jiwambe/components 0.2.0

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,87 @@
+import { default as React } from 'react';
+import { SkeletonProps, SkeletonRadius } from '../../types/skeleton';
+/**
+ * Loading placeholder primitive. Renders an animated shimmer shape
+ * that communicates content is loading. Use in place of content
+ * while data is being fetched.
+ *
+ * Three preset sub-components are available for common use cases:
+ * - Skeleton.Text   — single line text placeholder
+ * - Skeleton.Avatar — circular profile image placeholder
+ * - Skeleton.Card   — rectangular card-shaped placeholder
+ *
+ * For custom shapes, use the Skeleton primitive directly with
+ * explicit width, height, and radius props.
+ *
+ * The shimmer animation uses design system colour tokens:
+ * background: var(--col-neutral-100), highlight: var(--col-neutral-50).
+ *
+ * @example
+ * // Custom shape
+ * <Skeleton width="100%" height="2rem" radius="xs" />
+ *
+ * @example
+ * // Paragraph placeholder
+ * <Stack spacing="space-2">
+ *   <Skeleton.Text width="100%" />
+ *   <Skeleton.Text width="90%" />
+ *   <Skeleton.Text width="75%" />
+ * </Stack>
+ *
+ * @example
+ * // Profile header placeholder
+ * <Stack direction="row" spacing="space-3" alignItems="center">
+ *   <Skeleton.Avatar size="2.5rem" />
+ *   <Stack spacing="space-1">
+ *     <Skeleton.Text width="8rem" />
+ *     <Skeleton.Text width="5rem" size="xs" />
+ *   </Stack>
+ * </Stack>
+ */
+export declare function Skeleton({ width, height, radius, label, className, style, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Skeleton {
+    var Text: ({ width, size, className, style, }: SkeletonTextProps) => import("react/jsx-runtime").JSX.Element;
+    var Avatar: ({ size, className, style, }: SkeletonAvatarProps) => import("react/jsx-runtime").JSX.Element;
+    var Card: ({ width, height, radius, className, style, }: SkeletonCardProps) => import("react/jsx-runtime").JSX.Element;
+}
+/** Props for Skeleton.Text. Single-line text placeholder. */
+interface SkeletonTextProps {
+    /** Width of the text placeholder. Number = rem. @default '100%' */
+    width?: string | number;
+    /**
+     * Typography size to match. Controls height: xs=0.75rem, sm=1rem, md=1.125rem, lg=1.5rem.
+     * @default 'sm'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Additional className. @default undefined */
+    className?: string;
+    /** Additional inline styles. @default undefined */
+    style?: React.CSSProperties;
+}
+/** Props for Skeleton.Avatar. Circular avatar placeholder. */
+interface SkeletonAvatarProps {
+    /**
+     * Diameter of the avatar circle. Number = rem, string = used as-is.
+     * @default '2.5rem'
+     */
+    size?: string | number;
+    /** Additional className. @default undefined */
+    className?: string;
+    /** Additional inline styles. @default undefined */
+    style?: React.CSSProperties;
+}
+/** Props for Skeleton.Card. Rectangular card-shaped placeholder. */
+interface SkeletonCardProps {
+    /** Width of the card. Number = rem. @default '100%' */
+    width?: string | number;
+    /** Height of the card. Number = rem. @default '8rem' */
+    height?: string | number;
+    /** Border radius token. @default 'md' */
+    radius?: SkeletonRadius;
+    /** Additional className. @default undefined */
+    className?: string;
+    /** Additional inline styles. @default undefined */
+    style?: React.CSSProperties;
+}
+export {};
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,sBAAsB,CAAC;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAM,EACN,MAAa,EACb,KAAoB,EACpB,SAAc,EACd,KAAK,GACN,EAAE,aAAa,2CAiBf;yBAxBe,QAAQ;mDAwDrB,iBAAiB;8CAiCjB,mBAAmB;6DAqCnB,iBAAiB;;AAlGpB,6DAA6D;AAC7D,UAAU,iBAAiB;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA8BD,8DAA8D;AAC9D,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAuBD,oEAAoE;AACpE,UAAU,iBAAiB;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { skeletonRadiusMap } from "../../types/skeleton.js";
+function resolveSize(value, fallback) {
+  if (value === void 0) return fallback;
+  if (typeof value === "number") return `${value}rem`;
+  return value;
+}
+function Skeleton({
+  width,
+  height,
+  radius = "xs",
+  label = "Loading...",
+  className = "",
+  style
+}) {
+  const internalStyle = {
+    width: resolveSize(width, "100%"),
+    height: resolveSize(height, "1rem"),
+    borderRadius: skeletonRadiusMap[radius],
+    display: "block",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      className: ["jiwambe-skeleton", className].filter(Boolean).join(" "),
+      style: internalStyle
+    }
+  );
+}
+const textHeightMap = {
+  xs: "0.75rem",
+  sm: "1rem",
+  md: "1.125rem",
+  lg: "1.5rem"
+};
+Skeleton.Text = function SkeletonText({
+  width,
+  size = "sm",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      width: width ?? "100%",
+      height: textHeightMap[size],
+      radius: "xs",
+      label: "Loading text...",
+      className,
+      style
+    }
+  );
+};
+Skeleton.Avatar = function SkeletonAvatar({
+  size = "2.5rem",
+  className,
+  style
+}) {
+  const resolved = typeof size === "number" ? `${size}rem` : size;
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      width: resolved,
+      height: resolved,
+      radius: "rounded",
+      label: "Loading avatar...",
+      className,
+      style
+    }
+  );
+};
+Skeleton.Card = function SkeletonCard({
+  width,
+  height = "8rem",
+  radius = "md",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      width: width ?? "100%",
+      height,
+      radius,
+      label: "Loading card...",
+      className,
+      style
+    }
+  );
+};
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  skeletonRadiusMap,\n  type SkeletonProps,\n  type SkeletonRadius,\n} from '../../types/skeleton';\n\nfunction resolveSize(value: string | number | undefined, fallback: string): string {\n  if (value === undefined) return fallback;\n  if (typeof value === 'number') return `${value}rem`;\n  return value;\n}\n\n/**\n * Loading placeholder primitive. Renders an animated shimmer shape\n * that communicates content is loading. Use in place of content\n * while data is being fetched.\n *\n * Three preset sub-components are available for common use cases:\n * - Skeleton.Text   — single line text placeholder\n * - Skeleton.Avatar — circular profile image placeholder\n * - Skeleton.Card   — rectangular card-shaped placeholder\n *\n * For custom shapes, use the Skeleton primitive directly with\n * explicit width, height, and radius props.\n *\n * The shimmer animation uses design system colour tokens:\n * background: var(--col-neutral-100), highlight: var(--col-neutral-50).\n *\n * @example\n * // Custom shape\n * <Skeleton width=\"100%\" height=\"2rem\" radius=\"xs\" />\n *\n * @example\n * // Paragraph placeholder\n * <Stack spacing=\"space-2\">\n *   <Skeleton.Text width=\"100%\" />\n *   <Skeleton.Text width=\"90%\" />\n *   <Skeleton.Text width=\"75%\" />\n * </Stack>\n *\n * @example\n * // Profile header placeholder\n * <Stack direction=\"row\" spacing=\"space-3\" alignItems=\"center\">\n *   <Skeleton.Avatar size=\"2.5rem\" />\n *   <Stack spacing=\"space-1\">\n *     <Skeleton.Text width=\"8rem\" />\n *     <Skeleton.Text width=\"5rem\" size=\"xs\" />\n *   </Stack>\n * </Stack>\n */\nexport function Skeleton({\n  width,\n  height,\n  radius = 'xs',\n  label = 'Loading...',\n  className = '',\n  style,\n}: SkeletonProps) {\n  const internalStyle: React.CSSProperties = {\n    width: resolveSize(width, '100%'),\n    height: resolveSize(height, '1rem'),\n    borderRadius: skeletonRadiusMap[radius],\n    display: 'block',\n    ...style,\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={['jiwambe-skeleton', className].filter(Boolean).join(' ')}\n      style={internalStyle}\n    />\n  );\n}\n\n// --- Skeleton.Text ---\n\n/** Props for Skeleton.Text. Single-line text placeholder. */\ninterface SkeletonTextProps {\n  /** Width of the text placeholder. Number = rem. @default '100%' */\n  width?: string | number;\n  /**\n   * Typography size to match. Controls height: xs=0.75rem, sm=1rem, md=1.125rem, lg=1.5rem.\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\nconst textHeightMap = {\n  xs: '0.75rem',\n  sm: '1rem',\n  md: '1.125rem',\n  lg: '1.5rem',\n};\n\n/** Single-line text loading placeholder. Height matches typography size. */\nSkeleton.Text = function SkeletonText({\n  width,\n  size = 'sm',\n  className,\n  style,\n}: SkeletonTextProps) {\n  return (\n    <Skeleton\n      width={width ?? '100%'}\n      height={textHeightMap[size]}\n      radius=\"xs\"\n      label=\"Loading text...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n\n// --- Skeleton.Avatar ---\n\n/** Props for Skeleton.Avatar. Circular avatar placeholder. */\ninterface SkeletonAvatarProps {\n  /**\n   * Diameter of the avatar circle. Number = rem, string = used as-is.\n   * @default '2.5rem'\n   */\n  size?: string | number;\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\n/** Circular profile image loading placeholder. Always uses radius=\"rounded\". */\nSkeleton.Avatar = function SkeletonAvatar({\n  size = '2.5rem',\n  className,\n  style,\n}: SkeletonAvatarProps) {\n  const resolved = typeof size === 'number' ? `${size}rem` : size;\n  return (\n    <Skeleton\n      width={resolved}\n      height={resolved}\n      radius=\"rounded\"\n      label=\"Loading avatar...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n\n// --- Skeleton.Card ---\n\n/** Props for Skeleton.Card. Rectangular card-shaped placeholder. */\ninterface SkeletonCardProps {\n  /** Width of the card. Number = rem. @default '100%' */\n  width?: string | number;\n  /** Height of the card. Number = rem. @default '8rem' */\n  height?: string | number;\n  /** Border radius token. @default 'md' */\n  radius?: SkeletonRadius;\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\n/** Card-shaped content block loading placeholder. */\nSkeleton.Card = function SkeletonCard({\n  width,\n  height = '8rem',\n  radius = 'md',\n  className,\n  style,\n}: SkeletonCardProps) {\n  return (\n    <Skeleton\n      width={width ?? '100%'}\n      height={height}\n      radius={radius}\n      label=\"Loading card...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n"],"names":[],"mappings":";;AAOA,SAAS,YAAY,OAAoC,UAA0B;AACjF,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO,GAAG,KAAK;AAC9C,SAAO;AACT;AAwCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,gBAAqC;AAAA,IACzC,OAAO,YAAY,OAAO,MAAM;AAAA,IAChC,QAAQ,YAAY,QAAQ,MAAM;AAAA,IAClC,cAAc,kBAAkB,MAAM;AAAA,IACtC,SAAS;AAAA,IACT,GAAG;AAAA,EAAA;AAGL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,CAAC,oBAAoB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACnE,OAAO;AAAA,IAAA;AAAA,EAAA;AAGb;AAmBA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,SAAS,OAAO,SAAS,aAAa;AAAA,EACpC;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,QAAQ,cAAc,IAAI;AAAA,MAC1B,QAAO;AAAA,MACP,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAkBA,SAAS,SAAS,SAAS,eAAe;AAAA,EACxC,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WAAW,OAAO,SAAS,WAAW,GAAG,IAAI,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAmBA,SAAS,OAAO,SAAS,aAAa;AAAA,EACpC;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,3 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonRadius } from '../../types/skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+/**
+ * Props for the Slider component. Range input with optional labels and min/max labels.
+ * Supports controlled (value/onChange) or uncontrolled (defaultValue) usage. Track and
+ * thumb use design tokens (e.g. green for fill when not disabled).
+ */
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Optional label above the slider. @default undefined */
+    label?: string;
+    /** Supportive text below the label. @default undefined */
+    supportText?: string;
+    /** Label shown under the track at the min end (e.g. "5,000 KES"). Falls back to min. @default undefined */
+    minLabel?: string;
+    /** Label shown under the track at the max end (e.g. "255,000 KES"). Falls back to max. @default undefined */
+    maxLabel?: string;
+    /** Controlled value (number). Use with onChange. @default undefined */
+    value?: number;
+    /** Uncontrolled default value. @default min */
+    defaultValue?: number;
+    /** Called when the value changes (drag or keyboard). @default undefined */
+    onChange?: (value: number) => void;
+    /** Minimum value. @default 0 */
+    min?: number;
+    /** Maximum value. @default 100 */
+    max?: number;
+    /** Step increment. @default 1 */
+    step?: number;
+    /** Additional class name on the wrapper. @default undefined */
+    className?: string;
+    /** ID for the range input. @default undefined */
+    id?: string;
+    /** Forwarded ref for the native range input. @default undefined */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Range slider with optional label, support text, and min/max value labels. Renders a
+ * custom track and thumb (design-token colours) with a hidden native range input for
+ * accessibility. Supports controlled (value/onChange) or uncontrolled (defaultValue) usage.
+ *
+ * @example
+ * <Slider label="Amount" min={0} max={100} defaultValue={50} minLabel="0" maxLabel="100" />
+ *
+ * @example
+ * <Slider label="Price" value={price} onChange={setPrice} min={5000} max={255000} step={1000} minLabel="5,000 KES" maxLabel="255,000 KES" />
+ */
+export declare function Slider({ label, supportText, minLabel, maxLabel, value: valueProp, defaultValue, onChange, min, max, step, disabled, className, id: idProp, ref, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D;;;;GAIG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACzG,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,QAAgB,EAChB,SAAS,EACT,EAAE,EAAE,MAAM,EACV,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CA+Hb"}

package/dist/components/Slider/Slider.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useRef, useCallback } from "react";
+const THUMB = 24;
+const TRACK = 1.25;
+function Slider({
+  label,
+  supportText,
+  minLabel,
+  maxLabel,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  className,
+  id: idProp,
+  ref,
+  ...rest
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const isControlled = valueProp !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue ?? min);
+  const value = isControlled ? valueProp : internal;
+  const [focused, setFocused] = React.useState(false);
+  const trackRef = useRef(null);
+  const handleChange = useCallback(
+    (e) => {
+      const next = Number(e.target.value);
+      if (!isControlled) setInternal(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, onChange]
+  );
+  const percent = max > min ? (value - min) / (max - min) * 100 : 0;
+  const pct = Math.min(100, Math.max(0, percent));
+  const thumbBg = disabled ? "#ABB5B3" : "#005748";
+  const filledBg = disabled ? "#ABB5B3" : "#005748";
+  const unfilledBg = "#CED3D2";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col gap-space-2 w-full ${className ?? ""}`,
+      children: [
+        (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+              children: label
+            }
+          ),
+          supportText && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`,
+              children: supportText
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: trackRef,
+              className: "relative w-full",
+              style: { height: THUMB },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute left-0 right-0 rounded-full",
+                    style: {
+                      height: TRACK,
+                      top: (THUMB - TRACK) / 2,
+                      background: `linear-gradient(to right, ${filledBg} ${pct}%, ${unfilledBg} ${pct}%)`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute rounded-rad-xs transition-shadow duration-150",
+                    style: {
+                      width: THUMB,
+                      height: THUMB,
+                      top: 0,
+                      background: thumbBg,
+                      left: `calc(${pct}% - ${pct / 100 * THUMB}px)`,
+                      boxShadow: focused && !disabled ? "0 0 0 2px #fff, 0 0 0 4px var(--color-border-focus, #005748)" : "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    type: "range",
+                    id,
+                    min,
+                    max,
+                    step,
+                    value,
+                    disabled,
+                    onChange: handleChange,
+                    onFocus: () => setFocused(true),
+                    onBlur: () => setFocused(false),
+                    "aria-valuemin": min,
+                    "aria-valuemax": max,
+                    "aria-valuenow": value,
+                    className: "absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed",
+                    style: { height: THUMB, margin: 0 },
+                    ...rest
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: disabled ? "text-text-disabled" : "text-text-primary",
+                children: minLabel ?? min
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: disabled ? "text-text-disabled" : "text-text-primary",
+                children: maxLabel ?? max
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Slider
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId, useCallback, useRef } from 'react';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the Slider component. Range input with optional labels and min/max labels.\n * Supports controlled (value/onChange) or uncontrolled (defaultValue) usage. Track and\n * thumb use design tokens (e.g. green for fill when not disabled).\n */\nexport interface SliderProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Optional label above the slider. @default undefined */\n  label?: string;\n  /** Supportive text below the label. @default undefined */\n  supportText?: string;\n  /** Label shown under the track at the min end (e.g. \"5,000 KES\"). Falls back to min. @default undefined */\n  minLabel?: string;\n  /** Label shown under the track at the max end (e.g. \"255,000 KES\"). Falls back to max. @default undefined */\n  maxLabel?: string;\n  /** Controlled value (number). Use with onChange. @default undefined */\n  value?: number;\n  /** Uncontrolled default value. @default min */\n  defaultValue?: number;\n  /** Called when the value changes (drag or keyboard). @default undefined */\n  onChange?: (value: number) => void;\n  /** Minimum value. @default 0 */\n  min?: number;\n  /** Maximum value. @default 100 */\n  max?: number;\n  /** Step increment. @default 1 */\n  step?: number;\n  /** Additional class name on the wrapper. @default undefined */\n  className?: string;\n  /** ID for the range input. @default undefined */\n  id?: string;\n  /** Forwarded ref for the native range input. @default undefined */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\nconst THUMB = 24;\nconst TRACK = 1.25;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Range slider with optional label, support text, and min/max value labels. Renders a\n * custom track and thumb (design-token colours) with a hidden native range input for\n * accessibility. Supports controlled (value/onChange) or uncontrolled (defaultValue) usage.\n *\n * @example\n * <Slider label=\"Amount\" min={0} max={100} defaultValue={50} minLabel=\"0\" maxLabel=\"100\" />\n *\n * @example\n * <Slider label=\"Price\" value={price} onChange={setPrice} min={5000} max={255000} step={1000} minLabel=\"5,000 KES\" maxLabel=\"255,000 KES\" />\n */\nexport function Slider({\n  label,\n  supportText,\n  minLabel,\n  maxLabel,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  className,\n  id: idProp,\n  ref,\n  ...rest\n}: SliderProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n\n  const isControlled = valueProp !== undefined;\n  const [internal, setInternal] = React.useState(defaultValue ?? min);\n  const value = isControlled ? valueProp : internal;\n  const [focused, setFocused] = React.useState(false);\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const next = Number(e.target.value);\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const percent = max > min ? ((value - min) / (max - min)) * 100 : 0;\n  const pct = Math.min(100, Math.max(0, percent));\n\n  const thumbBg = disabled ? '#ABB5B3' : '#005748';\n  const filledBg = disabled ? '#ABB5B3' : '#005748';\n  const unfilledBg = '#CED3D2';\n\n  return (\n    <div\n      className={`flex flex-col gap-space-2 w-full ${className ?? ''}`}\n    >\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <label\n              htmlFor={id}\n              className={`text-form-label ${\n                disabled ? 'text-text-disabled' : 'text-text-primary'\n              }`}\n            >\n              {label}\n            </label>\n          )}\n          {supportText && (\n            <p\n              className={`text-text-xs ${\n                disabled ? 'text-text-disabled' : 'text-text-secondary'\n              }`}\n            >\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-space-2\">\n        <div\n          ref={trackRef}\n          className=\"relative w-full\"\n          style={{ height: THUMB }}\n        >\n          {/* Track — thin line centered at 50% of the 24px container */}\n          <div\n            className=\"absolute left-0 right-0 rounded-full\"\n            style={{\n              height: TRACK,\n              top: (THUMB - TRACK) / 2,\n              background: `linear-gradient(to right, ${filledBg} ${pct}%, ${unfilledBg} ${pct}%)`,\n            }}\n          />\n\n          {/* Thumb — 24×24, rad-xs (6px), centered vertically */}\n          <div\n            className=\"absolute rounded-rad-xs transition-shadow duration-150\"\n            style={{\n              width: THUMB,\n              height: THUMB,\n              top: 0,\n              background: thumbBg,\n              left: `calc(${pct}% - ${(pct / 100) * THUMB}px)`,\n              boxShadow: focused && !disabled\n                ? '0 0 0 2px #fff, 0 0 0 4px var(--color-border-focus, #005748)'\n                : 'none',\n            }}\n          />\n\n          {/* Hidden native input for accessibility & interaction */}\n          <input\n            ref={ref}\n            type=\"range\"\n            id={id}\n            min={min}\n            max={max}\n            step={step}\n            value={value}\n            disabled={disabled}\n            onChange={handleChange}\n            onFocus={() => setFocused(true)}\n            onBlur={() => setFocused(false)}\n            aria-valuemin={min}\n            aria-valuemax={max}\n            aria-valuenow={value}\n            className=\"absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed\"\n            style={{ height: THUMB, margin: 0 }}\n            {...rest}\n          />\n        </div>\n\n        <div className=\"flex justify-between text-text-sm\">\n          <span\n            className={\n              disabled ? 'text-text-disabled' : 'text-text-primary'\n            }\n          >\n            {minLabel ?? min}\n          </span>\n          <span\n            className={\n              disabled ? 'text-text-disabled' : 'text-text-primary'\n            }\n          >\n            {maxLabel ?? max}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA2CA;AACA;AAiBO;AAAgB;AACrB;AACA;AACA;AACA;AACO;AACP;AACA;AACM;AACA;AACC;AACI;AACX;AACI;AACJ;AAEF;AACE;AACA;AAEA;AACA;AACA;AACA;AAEA;AAEA;AAAqB;AAEjB;AACA;AACA;AAAW;AACb;AACuB;AAGzB;AACA;AAEA;AACA;AACA;AAEA;AACE;AAAC;AAAA;AAC+D;AAE5D;AAEG;AACC;AAAC;AAAA;AACU;AAGT;AAEC;AAAA;AAAA;AAIH;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AAGP;AAIA;AAAA;AAAC;AAAA;AACM;AACK;AACO;AAGjB;AAAA;AAAC;AAAA;AACW;AACH;AACG;AACe;AACwD;AAAA;AACjF;AAAA;AAIF;AAAC;AAAA;AACW;AACH;AACE;AACC;AACH;AACO;AAC+B;AAGvC;AAAA;AACN;AAAA;AAIF;AAAC;AAAA;AACC;AACK;AACL;AACA;AACA;AACA;AACA;AACA;AACU;AACoB;AACA;AACf;AACA;AACA;AACL;AACsB;AAC5B;AAAA;AAAA;AACN;AAAA;AAAA;AAIA;AAAA;AAAC;AAAA;AAEqC;AAGvB;AAAA;AAAA;AAEf;AAAC;AAAA;AAEqC;AAGvB;AAAA;AAAA;AAEjB;AACF;AAAA;AAAA;AAGN;;;;"}

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,145 @@
+import { default as React } from 'react';
+import { SpacingProps, SpacingToken, GapProps } from '../../types/spacing';
+import { DimensionProps } from '../../utils/responsive-props';
+import { StackLayoutProps, AlignItemsValue, JustifyContentValue } from '../../types/layout';
+import { StackAlign, StackJustify } from '../../utils/spacing';
+export type { StackAlign, StackJustify } from '../../utils/spacing';
+/** Flex direction for Stack: column (vertical) or row (horizontal). */
+export type StackDirection = 'column' | 'row';
+/**
+ * Tailwind display utility class values accepted by Stack's `display` prop.
+ * When provided, this replaces the default hardcoded `flex` base class so
+ * that responsive visibility utilities (e.g. `className="hidden lg:flex"`)
+ * can work correctly without specificity conflicts.
+ *
+ * @example
+ * // Visible only at lg+ (940px)
+ * <Stack display="hidden" className="lg:flex" direction="row">…</Stack>
+ *
+ * @example
+ * // Always flex (default, no prop needed)
+ * <Stack direction="row">…</Stack>
+ */
+export type StackDisplay = 'flex' | 'hidden' | 'block' | 'inline-flex' | 'inline-block' | 'inline' | 'grid' | 'inline-grid' | 'contents';
+/**
+ * Props for the Stack component. Extends SpacingProps, StackLayoutProps
+ * (alignItems, justifyContent), and div attributes.
+ */
+export interface StackProps extends SpacingProps, GapProps, DimensionProps, StackLayoutProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'display'> {
+    /**
+     * Flex direction. Controls whether children are stacked vertically
+     * or arranged horizontally.
+     * @default 'column'
+     */
+    direction?: StackDirection;
+    /**
+     * Gap between direct children using CSS gap — not margin. Accepts any
+     * SpacingToken string. Spacing is consistent regardless of child
+     * visibility, since gap behaves differently from margin with hidden children.
+     * @default undefined
+     */
+    spacing?: SpacingToken;
+    /**
+     * Shorthand for aligning children on the cross axis. Accepts Jiwambe
+     * shorthand values ('start', 'center', 'end', 'stretch'). When both
+     * align and alignItems are provided, alignItems takes precedence.
+     * @see alignItems
+     */
+    align?: StackAlign;
+    /**
+     * CSS-value alias for the align prop. Cross-axis alignment. Takes
+     * precedence over align when both are provided. Prefer for clarity.
+     * @default undefined
+     * @see align
+     */
+    alignItems?: AlignItemsValue;
+    /**
+     * Shorthand for distributing children along the main axis. Accepts
+     * Jiwambe shorthand ('start', 'center', 'end', 'between', 'around').
+     * When both justify and justifyContent are provided, justifyContent
+     * takes precedence.
+     * @see justifyContent
+     */
+    justify?: StackJustify;
+    /**
+     * CSS-value alias for the justify prop. Main-axis distribution. Takes
+     * precedence over justify when both are provided.
+     * @default undefined
+     * @see justify
+     */
+    justifyContent?: JustifyContentValue;
+    /**
+     * When true, children wrap to the next line when the Stack overflows
+     * its container. Sets flex-wrap: wrap. Only meaningful when
+     * direction="row".
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * The HTML element to render as the root. Use for semantic correctness
+     * (e.g. as="nav", as="section").
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /** Forwarded ref for the root element. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Child content. @default undefined */
+    children?: React.ReactNode;
+    /**
+     * Controls the CSS display value of the root element via a Tailwind utility
+     * class. When provided, replaces the default `flex` base class so that
+     * responsive overrides in `className` work without CSS specificity conflicts.
+     *
+     * Use this together with a responsive class in `className` to implement
+     * responsive show/hide:
+     *
+     * @example
+     * // Hidden by default, shown as flex at lg (940px+)
+     * <Stack display="hidden" className="lg:flex" direction="row" align="center">…</Stack>
+     *
+     * @example
+     * // Shown as flex from sm (600px), hidden again at lg (940px+)
+     * <Stack display="hidden" className="sm:flex lg:hidden" direction="row">…</Stack>
+     *
+     * @default undefined — falls back to the hardcoded 'flex' base class
+     */
+    display?: StackDisplay;
+}
+/**
+ * One-dimensional flex layout component. Stacks children vertically
+ * (default) or horizontally with consistent spacing between them.
+ *
+ * Stack is specifically for linear sequences of children. For
+ * two-dimensional or multi-column layouts, use Grid. For a
+ * general-purpose wrapper, use Box.
+ *
+ * Spacing between children is controlled by the spacing prop (CSS gap),
+ * not by margin on children. This means spacing is consistent regardless
+ * of which children are visible.
+ *
+ * @example
+ * // Vertical stack — form fields, card content
+ * <Stack spacing="space-4">
+ *   <Input label="Name" />
+ *   <Input label="Email" />
+ *   <Button>Submit</Button>
+ * </Stack>
+ *
+ * @example
+ * // Horizontal stack — toolbar, inline actions
+ * <Stack direction="row" spacing="space-3" alignItems="center">
+ *   <Icon />
+ *   <Text>Label</Text>
+ * </Stack>
+ *
+ * @example
+ * // Responsive visibility — hidden on mobile, flex at lg+
+ * <Stack display="hidden" className="lg:flex" direction="row" align="center">
+ *   …desktop nav…
+ * </Stack>
+ */
+export declare function Stack({ direction, spacing, align, justify, alignItems, justifyContent, wrap, as: Tag, children, className, ref, display, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var displayName: string;
+}
+//# sourceMappingURL=Stack.d.ts.map

package/dist/components/Stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAQ5B,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEpE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEpE,uEAAuE;AACvE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE9C;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,aAAa,GACb,cAAc,GACd,QAAQ,GACR,MAAM,GACN,aAAa,GACb,UAAU,CAAC;AAEf;;;GAGG;AACH,MAAM,WAAW,UACf,SAAQ,YAAY,EACpB,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACrD;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAoB,EACpB,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAY,EACZ,EAAE,EAAE,GAAW,EACf,QAAQ,EACR,SAAc,EACd,GAAG,EACH,OAAO,EACP,GAAG,IAAI,EACR,EAAE,UAAU,2CAqDZ;yBAnEe,KAAK"}

package/dist/components/Stack/Stack.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import { resolveSpacing, gapMap, alignMap, justifyMap } from "../../utils/spacing.js";
+import { alignItemsMap, justifyContentMap } from "../../utils/layoutClasses.js";
+function Stack({
+  direction = "column",
+  spacing,
+  align,
+  justify,
+  alignItems,
+  justifyContent,
+  wrap = false,
+  as: Tag = "div",
+  children,
+  className = "",
+  ref,
+  display,
+  ...rest
+}) {
+  const directionClass = direction === "row" ? "flex-row" : "flex-col";
+  const spacingClass = spacing !== void 0 ? gapMap[spacing] : "";
+  const alignClass = align ? alignMap[align] : "";
+  const justifyClass = justify ? justifyMap[justify] : "";
+  const alignItemsClass = alignItems !== void 0 ? alignItemsMap[alignItems] : "";
+  const justifyContentClass = justifyContent !== void 0 ? justifyContentMap[justifyContent] : "";
+  const wrapClass = wrap ? "flex-wrap" : "";
+  const spacingPropsClasses = resolveSpacing(rest);
+  const displayClass = display !== void 0 ? display : "flex";
+  const classes = [
+    displayClass,
+    directionClass,
+    spacingClass,
+    alignClass,
+    justifyClass,
+    alignItemsClass,
+    justifyContentClass,
+    wrapClass,
+    spacingPropsClasses,
+    className
+  ].filter(Boolean).join(" ");
+  const {
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    pl,
+    pr,
+    m,
+    mx,
+    my,
+    mt,
+    mb,
+    ml,
+    mr,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    gap,
+    rowGap,
+    columnGap,
+    ...domRest
+  } = rest;
+  const dimensionStyle = {};
+  if (width !== void 0) dimensionStyle.width = typeof width === "string" ? width : void 0;
+  if (height !== void 0) dimensionStyle.height = typeof height === "string" ? height : void 0;
+  if (minWidth !== void 0) dimensionStyle.minWidth = typeof minWidth === "string" ? minWidth : void 0;
+  if (minHeight !== void 0) dimensionStyle.minHeight = typeof minHeight === "string" ? minHeight : void 0;
+  if (maxWidth !== void 0) dimensionStyle.maxWidth = typeof maxWidth === "string" ? maxWidth : void 0;
+  if (maxHeight !== void 0) dimensionStyle.maxHeight = typeof maxHeight === "string" ? maxHeight : void 0;
+  const inlineStyle = Object.keys(dimensionStyle).length > 0 ? dimensionStyle : void 0;
+  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, style: inlineStyle, ...domRest, children });
+}
+Stack.displayName = "Stack";
+export {
+  Stack
+};
+//# sourceMappingURL=Stack.js.map