@jiwambe/components 0.2.0

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+/**
+ * Size of the toggle buttons. Affects padding and typography (btn-small vs btn-reg).
+ */
+export type ToggleSize = 'small' | 'large';
+/**
+ * Shape of one option in a Toggle or ToggleButton context. value and label; optional disabled.
+ */
+export interface ToggleOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Props for the Toggle component. Exactly two options; one is selected at a time (radio-like).
+ * Use for binary choices (e.g. Monthly/Yearly, Yes/No). For a single on/off switch use ToggleButton.
+ */
+export interface ToggleProps {
+    /** Exactly two options. Each: value, label, disabled?. */
+    options: [ToggleOption, ToggleOption];
+    /** Button size. @default 'small' */
+    size?: ToggleSize;
+    /** Controlled selected value (one of the two option values). @default undefined */
+    value?: string;
+    /** Uncontrolled default value. @default options[0].value */
+    defaultValue?: string;
+    /** Called when the selected option changes. @default undefined */
+    onChange?: (value: string) => void;
+    /** Disables both options. @default false */
+    disabled?: boolean;
+    /** Additional class name on the wrapper. @default undefined */
+    className?: string;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Paired two-option toggle (e.g. Monthly | Yearly). Renders two adjacent buttons; one is
+ * selected. Use for binary choice where both options are always visible. For a single
+ * on/off control use ToggleButton instead.
+ *
+ * @example
+ * <Toggle options={[{ value: 'm', label: 'Monthly' }, { value: 'y', label: 'Yearly' }]} value={plan} onChange={setPlan} />
+ *
+ * @example
+ * <Toggle options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B', disabled: true }]} size="large" defaultValue="a" />
+ */
+export declare function Toggle({ options, size, value: valueProp, defaultValue, onChange, disabled, className, ref }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the ToggleButton component. Single button that toggles between pressed and
+ * unpressed. Use for on/off settings (e.g. "Enable notifications"). For two-option
+ * choice (A | B) use Toggle instead.
+ */
+export interface ToggleButtonProps {
+    /** Button label (e.g. "Notifications"). */
+    label: string;
+    /** Button size. @default 'small' */
+    size?: ToggleSize;
+    /** Controlled pressed state. Use with onChange. @default undefined */
+    pressed?: boolean;
+    /** Uncontrolled default pressed state. @default false */
+    defaultPressed?: boolean;
+    /** Called when the user toggles; receives the new pressed state. @default undefined */
+    onChange?: (pressed: boolean) => void;
+    /** Disables the button. @default false */
+    disabled?: boolean;
+    /** Additional class name. @default undefined */
+    className?: string;
+    /** Forwarded ref for the button. @default undefined */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * Standalone on/off toggle button (role="switch"). Renders a single button that toggles
+ * between pressed and unpressed. Use for settings like "Enable X". For a choice between
+ * two options (e.g. Monthly/Yearly) use Toggle instead.
+ *
+ * @example
+ * <ToggleButton label="Notifications" pressed={on} onChange={setOn} />
+ *
+ * @example
+ * <ToggleButton label="Dark mode" defaultPressed={false} size="large" />
+ */
+export declare function ToggleButton({ label, size, pressed: pressedProp, defaultPressed, onChange, disabled, className, ref }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,0DAA0D;IAC1D,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACtC,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAsBD;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,IAAc,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAgB,EAAE,SAAc,EAAE,GAAG,EAAE,EAAE,WAAW,2CA0D/I;AAMD;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAwBD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,IAAc,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAgB,EAAE,SAAc,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAyB/J"}

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useId, useCallback } from "react";
+function pairedBtnClasses(size, active, disabled, position) {
+  const radius = position === "left" ? "rounded-l-rad-sm" : "rounded-r-rad-sm";
+  const sizeClasses = size === "small" ? "px-space-4 py-space-2 text-btn-small" : "px-space-5 py-space-3 text-btn-reg";
+  const base = `inline-flex items-center justify-center ${radius} transition-all duration-150 outline-none select-none ${sizeClasses}`;
+  if (disabled) {
+    if (active) {
+      return `${base} bg-fill-action-primary/50 text-text-action-primary/50 cursor-not-allowed`;
+    }
+    return `${base} bg-fill-bg-primary text-text-disabled border border-border-form-primary-disabled cursor-not-allowed`;
+  }
+  if (active) {
+    return `${base} bg-fill-action-primary text-text-action-primary focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1`;
+  }
+  return `${base} bg-fill-bg-primary text-text-primary border border-border-light hover:bg-fill-action-secondary-hover hover:border-border-heavy active:bg-fill-action-secondary-active active:border-border-heavy focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 cursor-pointer`;
+}
+function Toggle({ options, size = "small", value: valueProp, defaultValue, onChange, disabled = false, className = "", ref }) {
+  const isControlled = valueProp !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? options[0].value);
+  const selected = isControlled ? valueProp : internal;
+  const baseId = useId();
+  const handleSelect = useCallback(
+    (val) => {
+      if (!isControlled) setInternal(val);
+      onChange == null ? void 0 : onChange(val);
+    },
+    [isControlled, onChange]
+  );
+  const handleKeyDown = (e, idx) => {
+    var _a, _b;
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      const nextIdx = idx === 0 ? 1 : 0;
+      const nextOpt = options[nextIdx];
+      if (!nextOpt.disabled && !disabled) {
+        handleSelect(nextOpt.value);
+        (_b = (_a = e.currentTarget.parentElement) == null ? void 0 : _a.children[nextIdx]) == null ? void 0 : _b.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "radiogroup",
+      "aria-label": "Toggle",
+      className: `inline-flex ${className}`,
+      children: options.map((opt, idx) => {
+        const isActive = selected === opt.value;
+        const isDisabled = disabled || !!opt.disabled;
+        const position = idx === 0 ? "left" : "right";
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: `${baseId}-toggle-${idx}`,
+            type: "button",
+            role: "radio",
+            "aria-checked": isActive,
+            "aria-disabled": isDisabled || void 0,
+            tabIndex: isActive ? 0 : -1,
+            disabled: isDisabled,
+            className: pairedBtnClasses(size, isActive, isDisabled, position),
+            onClick: () => handleSelect(opt.value),
+            onKeyDown: (e) => handleKeyDown(e, idx),
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+function toggleBtnClasses(size, pressed, disabled) {
+  const sizeClasses = size === "small" ? "px-space-4 py-space-2 text-btn-small" : "px-space-5 py-space-3 text-btn-reg";
+  const base = `inline-flex items-center justify-center rounded-rad-sm transition-all duration-150 outline-none select-none ${sizeClasses}`;
+  if (disabled) {
+    return `${base} bg-fill-bg-primary text-text-disabled border border-transparent cursor-not-allowed`;
+  }
+  if (pressed) {
+    return `${base} bg-fill-action-primary text-text-action-primary border border-transparent focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 cursor-pointer`;
+  }
+  return [
+    base,
+    "bg-fill-bg-primary text-text-primary border border-border-light",
+    "hover:bg-fill-action-secondary-hover hover:border-border-heavy",
+    "active:bg-fill-action-secondary-active active:border-border-heavy",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1",
+    "cursor-pointer"
+  ].join(" ");
+}
+function ToggleButton({ label, size = "small", pressed: pressedProp, defaultPressed, onChange, disabled = false, className = "", ref }) {
+  const isControlled = pressedProp !== void 0;
+  const [internal, setInternal] = useState(defaultPressed ?? false);
+  const pressed = isControlled ? pressedProp : internal;
+  const handleClick = useCallback(() => {
+    const next = !pressed;
+    if (!isControlled) setInternal(next);
+    onChange == null ? void 0 : onChange(next);
+  }, [pressed, isControlled, onChange]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-pressed": pressed,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      className: `${toggleBtnClasses(size, pressed, disabled)} ${className}`,
+      onClick: handleClick,
+      children: label
+    }
+  );
+}
+export {
+  Toggle,
+  ToggleButton
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useId } from 'react';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Size of the toggle buttons. Affects padding and typography (btn-small vs btn-reg).\n */\nexport type ToggleSize = 'small' | 'large';\n\n/**\n * Shape of one option in a Toggle or ToggleButton context. value and label; optional disabled.\n */\nexport interface ToggleOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Toggle — paired two-option toggle (left / right)\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the Toggle component. Exactly two options; one is selected at a time (radio-like).\n * Use for binary choices (e.g. Monthly/Yearly, Yes/No). For a single on/off switch use ToggleButton.\n */\nexport interface ToggleProps {\n  /** Exactly two options. Each: value, label, disabled?. */\n  options: [ToggleOption, ToggleOption];\n  /** Button size. @default 'small' */\n  size?: ToggleSize;\n  /** Controlled selected value (one of the two option values). @default undefined */\n  value?: string;\n  /** Uncontrolled default value. @default options[0].value */\n  defaultValue?: string;\n  /** Called when the selected option changes. @default undefined */\n  onChange?: (value: string) => void;\n  /** Disables both options. @default false */\n  disabled?: boolean;\n  /** Additional class name on the wrapper. @default undefined */\n  className?: string;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction pairedBtnClasses(size: ToggleSize, active: boolean, disabled: boolean, position: 'left' | 'right') {\n  const radius = position === 'left' ? 'rounded-l-rad-sm' : 'rounded-r-rad-sm';\n  const sizeClasses = size === 'small' ? 'px-space-4 py-space-2 text-btn-small' : 'px-space-5 py-space-3 text-btn-reg';\n\n  const base = `inline-flex items-center justify-center ${radius} transition-all duration-150 outline-none select-none ${sizeClasses}`;\n\n  if (disabled) {\n    if (active) {\n      return `${base} bg-fill-action-primary/50 text-text-action-primary/50 cursor-not-allowed`;\n    }\n    return `${base} bg-fill-bg-primary text-text-disabled border border-border-form-primary-disabled cursor-not-allowed`;\n  }\n\n  if (active) {\n    return `${base} bg-fill-action-primary text-text-action-primary focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1`;\n  }\n\n  return `${base} bg-fill-bg-primary text-text-primary border border-border-light hover:bg-fill-action-secondary-hover hover:border-border-heavy active:bg-fill-action-secondary-active active:border-border-heavy focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 cursor-pointer`;\n}\n\n/**\n * Paired two-option toggle (e.g. Monthly | Yearly). Renders two adjacent buttons; one is\n * selected. Use for binary choice where both options are always visible. For a single\n * on/off control use ToggleButton instead.\n *\n * @example\n * <Toggle options={[{ value: 'm', label: 'Monthly' }, { value: 'y', label: 'Yearly' }]} value={plan} onChange={setPlan} />\n *\n * @example\n * <Toggle options={[{ value: 'a', label: 'A' }, { value: 'b', label: 'B', disabled: true }]} size=\"large\" defaultValue=\"a\" />\n */\nexport function Toggle({ options, size = 'small', value: valueProp, defaultValue, onChange, disabled = false, className = '', ref }: ToggleProps) {\n    const isControlled = valueProp !== undefined;\n    const [internal, setInternal] = useState(defaultValue ?? options[0].value);\n    const selected = isControlled ? valueProp : internal;\n    const baseId = useId();\n\n    const handleSelect = useCallback(\n      (val: string) => {\n        if (!isControlled) setInternal(val);\n        onChange?.(val);\n      },\n      [isControlled, onChange],\n    );\n\n    const handleKeyDown = (e: React.KeyboardEvent, idx: number) => {\n      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n        e.preventDefault();\n        const nextIdx = idx === 0 ? 1 : 0;\n        const nextOpt = options[nextIdx];\n        if (!nextOpt.disabled && !disabled) {\n          handleSelect(nextOpt.value);\n          (e.currentTarget.parentElement?.children[nextIdx] as HTMLElement)?.focus();\n        }\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label=\"Toggle\"\n        className={`inline-flex ${className}`}\n      >\n        {options.map((opt, idx) => {\n          const isActive = selected === opt.value;\n          const isDisabled = disabled || !!opt.disabled;\n          const position = idx === 0 ? 'left' : 'right';\n\n          return (\n            <button\n              key={opt.value}\n              id={`${baseId}-toggle-${idx}`}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isActive}\n              aria-disabled={isDisabled || undefined}\n              tabIndex={isActive ? 0 : -1}\n              disabled={isDisabled}\n              className={pairedBtnClasses(size, isActive, isDisabled, position as 'left' | 'right')}\n              onClick={() => handleSelect(opt.value)}\n              onKeyDown={(e) => handleKeyDown(e, idx)}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    );\n}\n\n// ---------------------------------------------------------------------------\n// ToggleButton — standalone on/off toggle button\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the ToggleButton component. Single button that toggles between pressed and\n * unpressed. Use for on/off settings (e.g. \"Enable notifications\"). For two-option\n * choice (A | B) use Toggle instead.\n */\nexport interface ToggleButtonProps {\n  /** Button label (e.g. \"Notifications\"). */\n  label: string;\n  /** Button size. @default 'small' */\n  size?: ToggleSize;\n  /** Controlled pressed state. Use with onChange. @default undefined */\n  pressed?: boolean;\n  /** Uncontrolled default pressed state. @default false */\n  defaultPressed?: boolean;\n  /** Called when the user toggles; receives the new pressed state. @default undefined */\n  onChange?: (pressed: boolean) => void;\n  /** Disables the button. @default false */\n  disabled?: boolean;\n  /** Additional class name. @default undefined */\n  className?: string;\n  /** Forwarded ref for the button. @default undefined */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nfunction toggleBtnClasses(size: ToggleSize, pressed: boolean, disabled: boolean) {\n  const sizeClasses = size === 'small' ? 'px-space-4 py-space-2 text-btn-small' : 'px-space-5 py-space-3 text-btn-reg';\n  const base = `inline-flex items-center justify-center rounded-rad-sm transition-all duration-150 outline-none select-none ${sizeClasses}`;\n\n  if (disabled) {\n    return `${base} bg-fill-bg-primary text-text-disabled border border-transparent cursor-not-allowed`;\n  }\n\n  if (pressed) {\n    return `${base} bg-fill-action-primary text-text-action-primary border border-transparent focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 cursor-pointer`;\n  }\n\n  return [\n    base,\n    'bg-fill-bg-primary text-text-primary border border-border-light',\n    'hover:bg-fill-action-secondary-hover hover:border-border-heavy',\n    'active:bg-fill-action-secondary-active active:border-border-heavy',\n    'focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1',\n    'cursor-pointer',\n  ].join(' ');\n}\n\n/**\n * Standalone on/off toggle button (role=\"switch\"). Renders a single button that toggles\n * between pressed and unpressed. Use for settings like \"Enable X\". For a choice between\n * two options (e.g. Monthly/Yearly) use Toggle instead.\n *\n * @example\n * <ToggleButton label=\"Notifications\" pressed={on} onChange={setOn} />\n *\n * @example\n * <ToggleButton label=\"Dark mode\" defaultPressed={false} size=\"large\" />\n */\nexport function ToggleButton({ label, size = 'small', pressed: pressedProp, defaultPressed, onChange, disabled = false, className = '', ref }: ToggleButtonProps) {\n    const isControlled = pressedProp !== undefined;\n    const [internal, setInternal] = useState(defaultPressed ?? false);\n    const pressed = isControlled ? pressedProp : internal;\n\n    const handleClick = useCallback(() => {\n      const next = !pressed;\n      if (!isControlled) setInternal(next);\n      onChange?.(next);\n    }, [pressed, isControlled, onChange]);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-pressed={pressed}\n        aria-disabled={disabled || undefined}\n        disabled={disabled}\n        className={`${toggleBtnClasses(size, pressed, disabled)} ${className}`}\n        onClick={handleClick}\n      >\n        {label}\n      </button>\n    );\n}\n"],"names":[],"mappings":";;;AAiDA;AACE;AACA;AAEA;AAEA;AACE;AACE;AAAc;AAEhB;AAAc;AAGhB;AACE;AAAc;AAGhB;AACF;AAaO;AACH;AACA;AACA;AACA;AAEA;AAAqB;AAEjB;AACA;AAAW;AACb;AACuB;AAGzB;;AACE;AACE;AACA;AACA;AACA;AACE;AACC;AAAkE;AACrE;AACF;AAGF;AACE;AAAC;AAAA;AACC;AACK;AACM;AACwB;AAGjC;AACA;AACA;AAEA;AACE;AAAC;AAAA;AAE4B;AACtB;AACA;AACS;AACe;AACJ;AACf;AAC0E;AAC/C;AACC;AAEjC;AAAA;AAZI;AAAA;AAed;AAAA;AAGT;AA8BA;AACE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AAAc;AAGhB;AAAO;AACL;AACA;AACA;AACA;AACA;AACA;AAEJ;AAaO;AACH;AACA;AACA;AAEA;AACE;AACA;AACA;AAAW;AAGb;AACE;AAAC;AAAA;AACC;AACK;AACA;AACS;AACa;AAC3B;AACoE;AAC3D;AAER;AAAA;AAGT;;;;;"}

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,321 @@
+import { default as React } from 'react';
+import { TypographyVariant, TypographyElement } from '../../types';
+/**
+ * Props for the Typography component. Extends HTML attributes for the chosen element.
+ */
+export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Design-system typographic style. Maps to a .text-{variant} class generated
+     * by jiwambe-plugin (e.g. title-sm, text-sm, form-label). Choose the variant
+     * that matches the semantic role of the text (heading, body, label, etc.).
+     */
+    variant: TypographyVariant;
+    /**
+     * The HTML element to render. Use for semantic correctness (e.g. as="h1" for
+     * page title, as="p" for body, as="label" for form labels).
+     * @default 'p'
+     */
+    as?: TypographyElement;
+    /** Text or inline content to render inside the element. */
+    children: React.ReactNode;
+    /** Forwarded ref for the root element. @default undefined */
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * Renders text with a design-system typographic style. Applies font family,
+ * size, weight, line-height, and optional letter-spacing from the Jiwambe
+ * theme. Use Typography instead of raw elements when you want consistent
+ * type scale and token-based styling.
+ *
+ * @example
+ * // Page heading
+ * <Typography variant="title-lg" as="h1">Hello World</Typography>
+ *
+ * @example
+ * // Body and label
+ * <Typography variant="text-sm" as="p">Body copy here.</Typography>
+ * <Typography variant="form-label" as="label">Field name</Typography>
+ */
+export declare function Typography({ variant, as: Tag, children, className, style, ref, ...rest }: TypographyProps): React.DetailedReactHTMLElement<{
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: React.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLElement, Element> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onError?: React.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: React.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
+    onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
+    onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
+    onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+    ref: React.Ref<HTMLElement> | undefined;
+    className: string;
+    style: React.CSSProperties | undefined;
+}, HTMLElement>;
+//# sourceMappingURL=Typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACxE;;;;OAIG;IACH,OAAO,EAAE,iBAAiB,CAAC;IAC3B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,EAAE,EAAE,GAAS,EACb,QAAQ,EACR,SAAc,EACd,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAQjB"}

package/dist/components/Typography/Typography.js

@@ -0,0 +1,21 @@
+import React from "react";
+function Typography({
+  variant,
+  as: Tag = "p",
+  children,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const classes = [`text-${variant}`, className].filter(Boolean).join(" ");
+  return React.createElement(
+    Tag,
+    { ref, className: classes, style, ...rest },
+    children
+  );
+}
+export {
+  Typography
+};
+//# sourceMappingURL=Typography.js.map

package/dist/components/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TypographyVariant, TypographyElement } from '../../types';\n\n/**\n * Props for the Typography component. Extends HTML attributes for the chosen element.\n */\nexport interface TypographyProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Design-system typographic style. Maps to a .text-{variant} class generated\n   * by jiwambe-plugin (e.g. title-sm, text-sm, form-label). Choose the variant\n   * that matches the semantic role of the text (heading, body, label, etc.).\n   */\n  variant: TypographyVariant;\n  /**\n   * The HTML element to render. Use for semantic correctness (e.g. as=\"h1\" for\n   * page title, as=\"p\" for body, as=\"label\" for form labels).\n   * @default 'p'\n   */\n  as?: TypographyElement;\n  /** Text or inline content to render inside the element. */\n  children: React.ReactNode;\n  /** Forwarded ref for the root element. @default undefined */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Renders text with a design-system typographic style. Applies font family,\n * size, weight, line-height, and optional letter-spacing from the Jiwambe\n * theme. Use Typography instead of raw elements when you want consistent\n * type scale and token-based styling.\n *\n * @example\n * // Page heading\n * <Typography variant=\"title-lg\" as=\"h1\">Hello World</Typography>\n *\n * @example\n * // Body and label\n * <Typography variant=\"text-sm\" as=\"p\">Body copy here.</Typography>\n * <Typography variant=\"form-label\" as=\"label\">Field name</Typography>\n */\nexport function Typography({\n  variant,\n  as: Tag = 'p',\n  children,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: TypographyProps) {\n  const classes = [`text-${variant}`, className].filter(Boolean).join(' ');\n\n  return React.createElement(\n    Tag,\n    { ref, className: classes, style, ...rest },\n    children,\n  );\n}\n"],"names":[],"mappings":";AAwCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,IAAI,MAAM;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,CAAC,QAAQ,OAAO,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEvE,SAAO,MAAM;AAAA,IACX;AAAA,IACA,EAAE,KAAK,WAAW,SAAS,OAAO,GAAG,KAAA;AAAA,IACrC;AAAA,EAAA;AAEJ;"}

package/dist/components/UploadInput/UploadInput.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+/**
+ * Props for the UploadInput component. Renders a file input (hidden) plus a visible
+ * upload button and a list of selected files with remove. Use accept to limit file types
+ * (e.g. "image/*", ".pdf"); use multiple for multi-file selection. No drag-and-drop;
+ * user clicks the button to open the file picker. onFilesChange is called after add or remove.
+ */
+export interface UploadInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
+    /** Label text displayed above the upload button. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Label on the upload button. @default 'Upload' */
+    uploadLabel?: string;
+    /** Called when the file list changes (user adds or removes a file). Receives the new File[]. @default undefined */
+    onFilesChange?: (files: File[]) => void;
+    /** Places the component in an error state. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below when error is true. @default undefined */
+    errorMessage?: string;
+    /** Forwarded ref for the native file input. @default undefined */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/**
+ * File upload control: a visible upload button (opens the file picker) and a list of
+ * selected files with remove buttons. Pass accept (e.g. "image/*") to limit types;
+ * pass multiple to allow multiple selection. onFilesChange is called when files are
+ * added or removed. No drag-and-drop; use the button to select files.
+ *
+ * @example
+ * <UploadInput label="Document" uploadLabel="Choose file" onFilesChange={setFiles} accept=".pdf" />
+ *
+ * @example
+ * <UploadInput label="Images" multiple accept="image/*" error={!!err} errorMessage={err} />
+ */
+export declare function UploadInput({ label, secondaryLabel, supportText, uploadLabel, onFilesChange, error, errorMessage, disabled, className, id: idProp, multiple, accept, ref, ...rest }: UploadInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UploadInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/components/UploadInput/UploadInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAQvD;;;;;GAKG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACxF,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mHAAmH;IACnH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AA4KD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,cAAc,EACd,WAAW,EACX,WAAsB,EACtB,aAAa,EACb,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA4JlB"}