@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/RadioGroup/index.cjs

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const radioGroup = require("@base-ui/react/radio-group");
+const RadioGroup_module = require("./RadioGroup.module.scss.cjs");
+const RadioRoot = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/radio/root/RadioRoot.cjs");
+const RadioIndicator = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/radio/indicator/RadioIndicator.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function mergeAriaIds(...ids) {
+  const merged = ids.filter(Boolean).join(" ").trim();
+  return merged.length > 0 ? merged : void 0;
+}
+const RadioSizeContext = React__namespace.createContext("md");
+function RadioItem({
+  value,
+  label,
+  description,
+  disabled = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  className
+}) {
+  const size = React__namespace.useContext(RadioSizeContext);
+  const id = React__namespace.useId();
+  const labelId = label ? `radio-label-${id}` : void 0;
+  const descriptionId = description ? `radio-desc-${id}` : void 0;
+  const radioClasses = [
+    RadioGroup_module.default.radio,
+    size === "sm" && RadioGroup_module.default.radioSm,
+    size === "lg" && RadioGroup_module.default.radioLg
+  ].filter(Boolean).join(" ");
+  const labelClasses = [
+    RadioGroup_module.default.label,
+    size === "sm" && RadioGroup_module.default.labelSm,
+    size === "lg" && RadioGroup_module.default.labelLg
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [RadioGroup_module.default.itemWrapper, className].filter(Boolean).join(" ");
+  if (!label && !description) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RadioRoot.RadioRoot,
+      {
+        value,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        className: [radioClasses, className].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxRuntime.jsx(RadioIndicator.RadioIndicator, { className: RadioGroup_module.default.indicator })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: wrapperClasses,
+      "data-disabled": disabled || void 0,
+      "data-has-description": description ? true : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadioRoot.RadioRoot,
+          {
+            value,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
+            "aria-describedby": mergeAriaIds(ariaDescribedBy, descriptionId),
+            className: radioClasses,
+            children: /* @__PURE__ */ jsxRuntime.jsx(RadioIndicator.RadioIndicator, { className: RadioGroup_module.default.indicator })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: RadioGroup_module.default.content, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: labelClasses, children: label }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: RadioGroup_module.default.description, children: description })
+        ] })
+      ]
+    }
+  );
+}
+function RadioGroupRoot({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical",
+  disabled = false,
+  name,
+  label,
+  error,
+  size = "md",
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}) {
+  const groupId = React__namespace.useId();
+  const labelId = label ? `radio-group-label-${groupId}` : void 0;
+  const errorId = error ? `radio-group-error-${groupId}` : void 0;
+  const groupClasses = [
+    RadioGroup_module.default.group,
+    RadioGroup_module.default[orientation],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: RadioGroup_module.default.wrapper, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: RadioGroup_module.default.groupLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radioGroup.RadioGroup,
+      {
+        value,
+        defaultValue,
+        onValueChange,
+        disabled,
+        name,
+        "aria-label": ariaLabel,
+        "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
+        "aria-describedby": mergeAriaIds(ariaDescribedBy, errorId),
+        className: groupClasses,
+        children
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { id: errorId, className: RadioGroup_module.default.error, children: error })
+  ] }) });
+}
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioItem
+});
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=index.cjs.map

package/dist/components/RadioGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["React","styles","jsx","BaseRadio.Root","BaseRadio.Indicator","jsxs","BaseRadioGroup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAS,gBAAgB,KAAoD;AAC3E,QAAM,SAAS,IAAI,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAA;AAC7C,SAAO,OAAO,SAAS,IAAI,SAAS;AACtC;AAMA,MAAM,mBAAmBA,iBAAM,cAAkC,IAAI;AAMrE,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB;AACF,GAAmB;AACjB,QAAM,OAAOA,iBAAM,WAAW,gBAAgB;AAC9C,QAAM,KAAKA,iBAAM,MAAA;AACjB,QAAM,UAAU,QAAQ,eAAe,EAAE,KAAK;AAC9C,QAAM,gBAAgB,cAAc,cAAc,EAAE,KAAK;AAEzD,QAAM,eAAe;AAAA,IACnBC,kBAAAA,QAAO;AAAA,IACP,SAAS,QAAQA,kBAAAA,QAAO;AAAA,IACxB,SAAS,QAAQA,0BAAO;AAAA,EAAA,EACxB,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,eAAe;AAAA,IACnBA,kBAAAA,QAAO;AAAA,IACP,SAAS,QAAQA,kBAAAA,QAAO;AAAA,IACxB,SAAS,QAAQA,0BAAO;AAAA,EAAA,EACxB,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,iBAAiB,CAACA,kBAAAA,QAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAG/E,MAAI,CAAC,SAAS,CAAC,aAAa;AAC1B,WACEC,2BAAAA;AAAAA,MAACC,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAE7D,yCAACC,eAAAA,gBAAA,EAAoB,WAAWH,kBAAAA,QAAO,UAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxD;AAEA,SACEI,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,iBAAe,YAAY;AAAA,MAC3B,wBAAsB,cAAc,OAAO;AAAA,MAE3C,UAAA;AAAA,QAAAH,2BAAAA;AAAAA,UAACC,UAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAY;AAAA,YACZ,mBAAiB,aAAa,gBAAgB,OAAO;AAAA,YACrD,oBAAkB,aAAa,iBAAiB,aAAa;AAAA,YAC7D,WAAW;AAAA,YAEX,yCAACC,eAAAA,gBAAA,EAAoB,WAAWH,kBAAAA,QAAO,UAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpDI,2BAAAA,KAAC,OAAA,EAAI,WAAWJ,kBAAAA,QAAO,SACrB,UAAA;AAAA,UAAAC,+BAAC,QAAA,EAAK,IAAI,SAAS,WAAW,cAAe,UAAA,OAAM;AAAA,UAClD,8CACE,QAAA,EAAK,IAAI,eAAe,WAAWD,0BAAO,aAAc,UAAA,YAAA,CAAY;AAAA,QAAA,EAAA,CAEzE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAMA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACL,GAAoB;AAClB,QAAM,UAAUD,iBAAM,MAAA;AACtB,QAAM,UAAU,QAAQ,qBAAqB,OAAO,KAAK;AACzD,QAAM,UAAU,QAAQ,qBAAqB,OAAO,KAAK;AAEzD,QAAM,eAAe;AAAA,IACnBC,kBAAAA,QAAO;AAAA,IACPA,kBAAAA,QAAO,WAAW;AAAA,IAClB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACEC,2BAAAA,IAAC,iBAAiB,UAAjB,EAA0B,OAAO,MAChC,UAAAG,2BAAAA,KAAC,OAAA,EAAK,GAAG,WAAW,WAAWJ,kBAAAA,QAAO,SACnC,UAAA;AAAA,IAAA,wCAAU,QAAA,EAAK,IAAI,SAAS,WAAWA,0BAAO,YAAa,UAAA,MAAA,CAAM;AAAA,IAClEC,2BAAAA;AAAAA,MAACI,WAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB,aAAa,gBAAgB,OAAO;AAAA,QACrD,oBAAkB,aAAa,iBAAiB,OAAO;AAAA,QACvD,WAAW;AAAA,QAEV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,wCAAU,QAAA,EAAK,IAAI,SAAS,WAAWL,0BAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,EAAA,EAAA,CAC/D,EAAA,CACF;AAEJ;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AACR,CAAC;;"}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Current value (controlled) */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Orientation of the radio group */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether the group is disabled */
+    disabled?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Label for the group */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Children (Radio.Item components) */
+    children: React.ReactNode;
+}
+export interface RadioItemProps {
+    /** The value for this radio item */
+    value: string;
+    /** Label text */
+    label?: string;
+    /** Description text below the label */
+    description?: string;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Accessible name for icon-only mode */
+    'aria-label'?: string;
+    /** Accessible labelled-by relationship */
+    'aria-labelledby'?: string;
+    /** Accessible described-by relationship */
+    'aria-describedby'?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function RadioItem({ value, label, description, disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, className, }: RadioItemProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupRoot({ value, defaultValue, onValueChange, orientation, disabled, name, label, error, size, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...htmlProps }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof RadioItem;
+};
+export type { RadioGroupProps as RadioGroupRootProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9G,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,SAAS,GACV,EAAE,cAAc,2CA4DhB;AAMD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAwB,EACxB,QAAgB,EAChB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,SAAS,EACb,EAAE,eAAe,2CAgCjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC;AAEH,YAAY,EAAE,eAAe,IAAI,mBAAmB,EAAE,CAAC"}

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import styles from "./RadioGroup.module.scss.js";
+import { RadioRoot } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/radio/root/RadioRoot.js";
+import { RadioIndicator } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/radio/indicator/RadioIndicator.js";
+function mergeAriaIds(...ids) {
+  const merged = ids.filter(Boolean).join(" ").trim();
+  return merged.length > 0 ? merged : void 0;
+}
+const RadioSizeContext = React.createContext("md");
+function RadioItem({
+  value,
+  label,
+  description,
+  disabled = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  className
+}) {
+  const size = React.useContext(RadioSizeContext);
+  const id = React.useId();
+  const labelId = label ? `radio-label-${id}` : void 0;
+  const descriptionId = description ? `radio-desc-${id}` : void 0;
+  const radioClasses = [
+    styles.radio,
+    size === "sm" && styles.radioSm,
+    size === "lg" && styles.radioLg
+  ].filter(Boolean).join(" ");
+  const labelClasses = [
+    styles.label,
+    size === "sm" && styles.labelSm,
+    size === "lg" && styles.labelLg
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(" ");
+  if (!label && !description) {
+    return /* @__PURE__ */ jsx(
+      RadioRoot,
+      {
+        value,
+        disabled,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        className: [radioClasses, className].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx(RadioIndicator, { className: styles.indicator })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: wrapperClasses,
+      "data-disabled": disabled || void 0,
+      "data-has-description": description ? true : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          RadioRoot,
+          {
+            value,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
+            "aria-describedby": mergeAriaIds(ariaDescribedBy, descriptionId),
+            className: radioClasses,
+            children: /* @__PURE__ */ jsx(RadioIndicator, { className: styles.indicator })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          /* @__PURE__ */ jsx("span", { id: labelId, className: labelClasses, children: label }),
+          description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: description })
+        ] })
+      ]
+    }
+  );
+}
+function RadioGroupRoot({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical",
+  disabled = false,
+  name,
+  label,
+  error,
+  size = "md",
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}) {
+  const groupId = React.useId();
+  const labelId = label ? `radio-group-label-${groupId}` : void 0;
+  const errorId = error ? `radio-group-error-${groupId}` : void 0;
+  const groupClasses = [
+    styles.group,
+    styles[orientation],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs("div", { ...htmlProps, className: styles.wrapper, children: [
+    label && /* @__PURE__ */ jsx("span", { id: labelId, className: styles.groupLabel, children: label }),
+    /* @__PURE__ */ jsx(
+      RadioGroup$1,
+      {
+        value,
+        defaultValue,
+        onValueChange,
+        disabled,
+        name,
+        "aria-label": ariaLabel,
+        "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
+        "aria-describedby": mergeAriaIds(ariaDescribedBy, errorId),
+        className: groupClasses,
+        children
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { id: errorId, className: styles.error, children: error })
+  ] }) });
+}
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioItem
+});
+export {
+  RadioGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/components/RadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/RadioGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport styles from './RadioGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Orientation of the radio group */\n  orientation?: 'horizontal' | 'vertical';\n  /** Whether the group is disabled */\n  disabled?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Label for the group */\n  label?: string;\n  /** Error message */\n  error?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Children (Radio.Item components) */\n  children: React.ReactNode;\n}\n\nexport interface RadioItemProps {\n  /** The value for this radio item */\n  value: string;\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Accessible name for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: string;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction mergeAriaIds(...ids: Array<string | undefined>): string | undefined {\n  const merged = ids.filter(Boolean).join(' ').trim();\n  return merged.length > 0 ? merged : undefined;\n}\n\n// ============================================\n// Context for size\n// ============================================\n\nconst RadioSizeContext = React.createContext<'sm' | 'md' | 'lg'>('md');\n\n// ============================================\n// Radio Item Component\n// ============================================\n\nfunction RadioItem({\n  value,\n  label,\n  description,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  className,\n}: RadioItemProps) {\n  const size = React.useContext(RadioSizeContext);\n  const id = React.useId();\n  const labelId = label ? `radio-label-${id}` : undefined;\n  const descriptionId = description ? `radio-desc-${id}` : undefined;\n\n  const radioClasses = [\n    styles.radio,\n    size === 'sm' && styles.radioSm,\n    size === 'lg' && styles.radioLg,\n  ].filter(Boolean).join(' ');\n\n  const labelClasses = [\n    styles.label,\n    size === 'sm' && styles.labelSm,\n    size === 'lg' && styles.labelLg,\n  ].filter(Boolean).join(' ');\n\n  const wrapperClasses = [styles.itemWrapper, className].filter(Boolean).join(' ');\n\n  // If no label/description, render just the radio\n  if (!label && !description) {\n    return (\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        className={[radioClasses, className].filter(Boolean).join(' ')}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n    );\n  }\n\n  return (\n    <label\n      className={wrapperClasses}\n      data-disabled={disabled || undefined}\n      data-has-description={description ? true : undefined}\n    >\n      <BaseRadio.Root\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n        className={radioClasses}\n      >\n        <BaseRadio.Indicator className={styles.indicator} />\n      </BaseRadio.Root>\n      <div className={styles.content}>\n        <span id={labelId} className={labelClasses}>{label}</span>\n        {description && (\n          <span id={descriptionId} className={styles.description}>{description}</span>\n        )}\n      </div>\n    </label>\n  );\n}\n\n// ============================================\n// Radio Group Component\n// ============================================\n\nfunction RadioGroupRoot({\n  value,\n  defaultValue,\n  onValueChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  label,\n  error,\n  size = 'md',\n  children,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...htmlProps\n}: RadioGroupProps) {\n  const groupId = React.useId();\n  const labelId = label ? `radio-group-label-${groupId}` : undefined;\n  const errorId = error ? `radio-group-error-${groupId}` : undefined;\n\n  const groupClasses = [\n    styles.group,\n    styles[orientation],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <RadioSizeContext.Provider value={size}>\n      <div {...htmlProps} className={styles.wrapper}>\n        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}\n        <BaseRadioGroup\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          name={name}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}\n          className={groupClasses}\n        >\n          {children}\n        </BaseRadioGroup>\n        {error && <span id={errorId} className={styles.error}>{error}</span>}\n      </div>\n    </RadioSizeContext.Provider>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport type { RadioGroupProps as RadioGroupRootProps };\n"],"names":["BaseRadio.Root","BaseRadio.Indicator","BaseRadioGroup"],"mappings":"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"}

package/dist/components/ScrollArea/ScrollArea.module.scss.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_umvhi_1";
+const fadeMaskEnd = "_fadeMaskEnd_umvhi_6";
+const horizontal = "_horizontal_umvhi_6";
+const vertical = "_vertical_umvhi_9";
+const both = "_both_umvhi_12";
+const fadeMaskStart = "_fadeMaskStart_umvhi_16";
+const fadeMaskBoth = "_fadeMaskBoth_umvhi_26";
+const viewport = "_viewport_umvhi_36";
+const scrollbarAlways = "_scrollbarAlways_umvhi_72";
+const scrollbarHover = "_scrollbarHover_umvhi_76";
+const styles = {
+  root,
+  fadeMaskEnd,
+  horizontal,
+  vertical,
+  both,
+  fadeMaskStart,
+  fadeMaskBoth,
+  viewport,
+  scrollbarAlways,
+  scrollbarHover
+};
+exports.both = both;
+exports.default = styles;
+exports.fadeMaskBoth = fadeMaskBoth;
+exports.fadeMaskEnd = fadeMaskEnd;
+exports.fadeMaskStart = fadeMaskStart;
+exports.horizontal = horizontal;
+exports.root = root;
+exports.scrollbarAlways = scrollbarAlways;
+exports.scrollbarHover = scrollbarHover;
+exports.vertical = vertical;
+exports.viewport = viewport;
+//# sourceMappingURL=ScrollArea.module.scss.cjs.map

package/dist/components/ScrollArea/ScrollArea.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ScrollArea/ScrollArea.module.scss.js

@@ -0,0 +1,36 @@
+const root = "_root_umvhi_1";
+const fadeMaskEnd = "_fadeMaskEnd_umvhi_6";
+const horizontal = "_horizontal_umvhi_6";
+const vertical = "_vertical_umvhi_9";
+const both = "_both_umvhi_12";
+const fadeMaskStart = "_fadeMaskStart_umvhi_16";
+const fadeMaskBoth = "_fadeMaskBoth_umvhi_26";
+const viewport = "_viewport_umvhi_36";
+const scrollbarAlways = "_scrollbarAlways_umvhi_72";
+const scrollbarHover = "_scrollbarHover_umvhi_76";
+const styles = {
+  root,
+  fadeMaskEnd,
+  horizontal,
+  vertical,
+  both,
+  fadeMaskStart,
+  fadeMaskBoth,
+  viewport,
+  scrollbarAlways,
+  scrollbarHover
+};
+export {
+  both,
+  styles as default,
+  fadeMaskBoth,
+  fadeMaskEnd,
+  fadeMaskStart,
+  horizontal,
+  root,
+  scrollbarAlways,
+  scrollbarHover,
+  vertical,
+  viewport
+};
+//# sourceMappingURL=ScrollArea.module.scss.js.map

package/dist/components/ScrollArea/ScrollArea.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ScrollArea/index.cjs

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ScrollArea_module = require("./ScrollArea.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function ScrollAreaRoot({
+  children,
+  orientation = "vertical",
+  scrollbarVisibility = "auto",
+  showFades = false,
+  className,
+  ...htmlProps
+}) {
+  const viewportRef = React__namespace.useRef(null);
+  const [canScrollStart, setCanScrollStart] = React__namespace.useState(false);
+  const [canScrollEnd, setCanScrollEnd] = React__namespace.useState(false);
+  const updateScrollState = React__namespace.useCallback(() => {
+    const el = viewportRef.current;
+    if (!el || !showFades) return;
+    if (orientation === "horizontal") {
+      setCanScrollStart(el.scrollLeft > 1);
+      setCanScrollEnd(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+    } else {
+      setCanScrollStart(el.scrollTop > 1);
+      setCanScrollEnd(el.scrollTop < el.scrollHeight - el.clientHeight - 1);
+    }
+  }, [orientation, showFades]);
+  React__namespace.useEffect(() => {
+    const el = viewportRef.current;
+    if (!el || !showFades) return;
+    const raf = requestAnimationFrame(updateScrollState);
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    Array.from(el.children).forEach((child) => observer.observe(child));
+    return () => {
+      cancelAnimationFrame(raf);
+      el.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [showFades, updateScrollState]);
+  const rootClasses = [
+    ScrollArea_module.default.root,
+    className
+  ].filter(Boolean).join(" ");
+  const fadeMask = showFades ? canScrollStart && canScrollEnd ? ScrollArea_module.default.fadeMaskBoth : canScrollStart ? ScrollArea_module.default.fadeMaskStart : canScrollEnd ? ScrollArea_module.default.fadeMaskEnd : void 0 : void 0;
+  const viewportClasses = [
+    ScrollArea_module.default.viewport,
+    ScrollArea_module.default[orientation],
+    scrollbarVisibility === "always" && ScrollArea_module.default.scrollbarAlways,
+    scrollbarVisibility === "hover" && ScrollArea_module.default.scrollbarHover,
+    fadeMask
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: rootClasses,
+      "data-orientation": orientation,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: viewportRef, className: viewportClasses, children })
+    }
+  );
+}
+const ScrollArea = Object.assign(ScrollAreaRoot, {
+  Root: ScrollAreaRoot
+});
+exports.ScrollArea = ScrollArea;
+//# sourceMappingURL=index.cjs.map

package/dist/components/ScrollArea/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/ScrollArea/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ScrollArea.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Scroll direction */\n  orientation?: 'horizontal' | 'vertical' | 'both';\n  /** Scrollbar visibility behavior */\n  scrollbarVisibility?: 'auto' | 'always' | 'hover';\n  /** Whether to show fade indicators at scroll edges */\n  showFades?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * ScrollArea - A styled scrollable container with customizable scrollbars.\n *\n * Provides thin, unobtrusive scrollbars that appear on hover or scroll,\n * with optional fade indicators to hint at overflowing content.\n */\nfunction ScrollAreaRoot({\n  children,\n  orientation = 'vertical',\n  scrollbarVisibility = 'auto',\n  showFades = false,\n  className,\n  ...htmlProps\n}: ScrollAreaProps) {\n  const viewportRef = React.useRef<HTMLDivElement>(null);\n  const [canScrollStart, setCanScrollStart] = React.useState(false);\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n\n  const updateScrollState = React.useCallback(() => {\n    const el = viewportRef.current;\n    if (!el || !showFades) return;\n\n    if (orientation === 'horizontal') {\n      setCanScrollStart(el.scrollLeft > 1);\n      setCanScrollEnd(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);\n    } else {\n      setCanScrollStart(el.scrollTop > 1);\n      setCanScrollEnd(el.scrollTop < el.scrollHeight - el.clientHeight - 1);\n    }\n  }, [orientation, showFades]);\n\n  React.useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || !showFades) return;\n\n    // Defer initial check to ensure children have laid out\n    const raf = requestAnimationFrame(updateScrollState);\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    // Observe both the viewport AND its children for size changes\n    // (viewport size stays constant when children overflow — only scrollWidth changes)\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n    Array.from(el.children).forEach(child => observer.observe(child));\n\n    return () => {\n      cancelAnimationFrame(raf);\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [showFades, updateScrollState]);\n\n  const rootClasses = [\n    styles.root,\n    className,\n  ].filter(Boolean).join(' ');\n\n  // Determine which fade mask to apply to the viewport\n  const fadeMask = showFades\n    ? canScrollStart && canScrollEnd\n      ? styles.fadeMaskBoth\n      : canScrollStart\n        ? styles.fadeMaskStart\n        : canScrollEnd\n          ? styles.fadeMaskEnd\n          : undefined\n    : undefined;\n\n  const viewportClasses = [\n    styles.viewport,\n    styles[orientation],\n    scrollbarVisibility === 'always' && styles.scrollbarAlways,\n    scrollbarVisibility === 'hover' && styles.scrollbarHover,\n    fadeMask,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      {...htmlProps}\n      className={rootClasses}\n      data-orientation={orientation}\n    >\n      <div ref={viewportRef} className={viewportClasses}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ============================================\n// Export\n// ============================================\n\nexport const ScrollArea = Object.assign(ScrollAreaRoot, {\n  Root: ScrollAreaRoot,\n});\n"],"names":["React","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,cAAcA,iBAAM,OAAuB,IAAI;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,iBAAM,SAAS,KAAK;AAChE,QAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,KAAK;AAE5D,QAAM,oBAAoBA,iBAAM,YAAY,MAAM;AAChD,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,MAAM,CAAC,UAAW;AAEvB,QAAI,gBAAgB,cAAc;AAChC,wBAAkB,GAAG,aAAa,CAAC;AACnC,sBAAgB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,CAAC;AAAA,IACrE,OAAO;AACL,wBAAkB,GAAG,YAAY,CAAC;AAClC,sBAAgB,GAAG,YAAY,GAAG,eAAe,GAAG,eAAe,CAAC;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAE3BA,mBAAM,UAAU,MAAM;AACpB,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,MAAM,CAAC,UAAW;AAGvB,UAAM,MAAM,sBAAsB,iBAAiB;AAEnD,OAAG,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,MAAM;AAIlE,UAAM,WAAW,IAAI,eAAe,iBAAiB;AACrD,aAAS,QAAQ,EAAE;AACnB,UAAM,KAAK,GAAG,QAAQ,EAAE,QAAQ,CAAA,UAAS,SAAS,QAAQ,KAAK,CAAC;AAEhE,WAAO,MAAM;AACX,2BAAqB,GAAG;AACxB,SAAG,oBAAoB,UAAU,iBAAiB;AAClD,eAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,QAAM,cAAc;AAAA,IAClBC,kBAAAA,QAAO;AAAA,IACP;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,WAAW,YACb,kBAAkB,eAChBA,kBAAAA,QAAO,eACP,iBACEA,kBAAAA,QAAO,gBACP,eACEA,kBAAAA,QAAO,cACP,SACN;AAEJ,QAAM,kBAAkB;AAAA,IACtBA,kBAAAA,QAAO;AAAA,IACPA,kBAAAA,QAAO,WAAW;AAAA,IAClB,wBAAwB,YAAYA,kBAAAA,QAAO;AAAA,IAC3C,wBAAwB,WAAWA,kBAAAA,QAAO;AAAA,IAC1C;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,oBAAkB;AAAA,MAElB,yCAAC,OAAA,EAAI,KAAK,aAAa,WAAW,iBAC/B,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AACR,CAAC;;"}

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Scroll direction */
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    /** Scrollbar visibility behavior */
+    scrollbarVisibility?: 'auto' | 'always' | 'hover';
+    /** Whether to show fade indicators at scroll edges */
+    showFades?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * ScrollArea - A styled scrollable container with customizable scrollbars.
+ *
+ * Provides thin, unobtrusive scrollbars that appear on hover or scroll,
+ * with optional fade indicators to hint at overflowing content.
+ */
+declare function ScrollAreaRoot({ children, orientation, scrollbarVisibility, showFades, className, ...htmlProps }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare const ScrollArea: typeof ScrollAreaRoot & {
+    Root: typeof ScrollAreaRoot;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,WAAwB,EACxB,mBAA4B,EAC5B,SAAiB,EACjB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,2CA2EjB;AAMD,eAAO,MAAM,UAAU;;CAErB,CAAC"}

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./ScrollArea.module.scss.js";
+function ScrollAreaRoot({
+  children,
+  orientation = "vertical",
+  scrollbarVisibility = "auto",
+  showFades = false,
+  className,
+  ...htmlProps
+}) {
+  const viewportRef = React.useRef(null);
+  const [canScrollStart, setCanScrollStart] = React.useState(false);
+  const [canScrollEnd, setCanScrollEnd] = React.useState(false);
+  const updateScrollState = React.useCallback(() => {
+    const el = viewportRef.current;
+    if (!el || !showFades) return;
+    if (orientation === "horizontal") {
+      setCanScrollStart(el.scrollLeft > 1);
+      setCanScrollEnd(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+    } else {
+      setCanScrollStart(el.scrollTop > 1);
+      setCanScrollEnd(el.scrollTop < el.scrollHeight - el.clientHeight - 1);
+    }
+  }, [orientation, showFades]);
+  React.useEffect(() => {
+    const el = viewportRef.current;
+    if (!el || !showFades) return;
+    const raf = requestAnimationFrame(updateScrollState);
+    el.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    Array.from(el.children).forEach((child) => observer.observe(child));
+    return () => {
+      cancelAnimationFrame(raf);
+      el.removeEventListener("scroll", updateScrollState);
+      observer.disconnect();
+    };
+  }, [showFades, updateScrollState]);
+  const rootClasses = [
+    styles.root,
+    className
+  ].filter(Boolean).join(" ");
+  const fadeMask = showFades ? canScrollStart && canScrollEnd ? styles.fadeMaskBoth : canScrollStart ? styles.fadeMaskStart : canScrollEnd ? styles.fadeMaskEnd : void 0 : void 0;
+  const viewportClasses = [
+    styles.viewport,
+    styles[orientation],
+    scrollbarVisibility === "always" && styles.scrollbarAlways,
+    scrollbarVisibility === "hover" && styles.scrollbarHover,
+    fadeMask
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: rootClasses,
+      "data-orientation": orientation,
+      children: /* @__PURE__ */ jsx("div", { ref: viewportRef, className: viewportClasses, children })
+    }
+  );
+}
+const ScrollArea = Object.assign(ScrollAreaRoot, {
+  Root: ScrollAreaRoot
+});
+export {
+  ScrollArea
+};
+//# sourceMappingURL=index.js.map