@fragments-sdk/ui 0.9.0 → 0.9.2

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultChecked'> {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback when checked state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the checkbox is required */
+    required?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label text */
+    label?: string;
+    /** Description text below the label */
+    description?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Value attribute for form submission */
+    value?: string;
+    /** ID for the checkbox input */
+    id?: string;
+    /** Accessible label for icon-only mode */
+    'aria-label'?: string;
+    /** Accessible labelled-by relationship for icon-only mode */
+    'aria-labelledby'?: string;
+    /** Accessible described-by relationship */
+    'aria-describedby'?: string;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>> & {
+    Root: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC;IAChH,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA2JD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}

package/dist/components/Checkbox/index.js

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import styles from "./Checkbox.module.scss.js";
+function mergeAriaIds(...ids) {
+  const merged = ids.filter(Boolean).join(" ").trim();
+  return merged.length > 0 ? merged : void 0;
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function MinusIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    }
+  );
+}
+const CheckboxRoot = React.forwardRef(
+  function Checkbox2({
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    indeterminate = false,
+    disabled = false,
+    required = false,
+    size = "md",
+    label,
+    description,
+    name,
+    value,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...htmlProps
+  }, ref) {
+    const generatedId = React.useId();
+    const checkboxId = id ?? `checkbox-${generatedId}`;
+    const labelId = label ? `${checkboxId}-label` : void 0;
+    const descriptionId = description ? `${checkboxId}-description` : void 0;
+    const checkboxClasses = [
+      styles.checkbox,
+      size === "sm" && styles.sm,
+      size === "lg" && styles.lg
+    ].filter(Boolean).join(" ");
+    const labelClasses = [
+      styles.label,
+      size === "sm" && styles.labelSm,
+      size === "lg" && styles.labelLg
+    ].filter(Boolean).join(" ");
+    const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
+    if (!label && !description) {
+      return /* @__PURE__ */ jsx(
+        Checkbox$1.Root,
+        {
+          ref,
+          checked,
+          defaultChecked,
+          onCheckedChange,
+          indeterminate,
+          disabled,
+          required,
+          name,
+          value,
+          id: checkboxId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          className: [checkboxClasses, className].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: styles.indicator, keepMounted: true, children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ...htmlProps,
+        className: wrapperClasses,
+        "data-disabled": disabled || void 0,
+        "data-has-description": description ? true : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox$1.Root,
+            {
+              ref,
+              checked,
+              defaultChecked,
+              onCheckedChange,
+              indeterminate,
+              disabled,
+              required,
+              name,
+              value,
+              id: checkboxId,
+              "aria-label": ariaLabel,
+              "aria-labelledby": mergeAriaIds(ariaLabelledBy, labelId),
+              "aria-describedby": mergeAriaIds(ariaDescribedBy, descriptionId),
+              className: checkboxClasses,
+              children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: styles.indicator, keepMounted: true, children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) })
+            }
+          ),
+          /* @__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 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const Checkbox = Object.assign(CheckboxRoot, {
+  Root: CheckboxRoot
+});
+export {
+  Checkbox
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport styles from './Checkbox.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultChecked'> {\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Whether the checkbox is in an indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Label text */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Name attribute for form submission */\n  name?: string;\n  /** Value attribute for form submission */\n  value?: string;\n  /** ID for the checkbox input */\n  id?: string;\n  /** Accessible label for icon-only mode */\n  'aria-label'?: string;\n  /** Accessible labelled-by relationship for icon-only mode */\n  'aria-labelledby'?: string;\n  /** Accessible described-by relationship */\n  'aria-describedby'?: 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// Icons\n// ============================================\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Component\n// ============================================\n\nconst CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      indeterminate = false,\n      disabled = false,\n      required = false,\n      size = 'md',\n      label,\n      description,\n      name,\n      value,\n      className,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const generatedId = React.useId();\n    const checkboxId = id ?? `checkbox-${generatedId}`;\n    const labelId = label ? `${checkboxId}-label` : undefined;\n    const descriptionId = description ? `${checkboxId}-description` : undefined;\n\n    const checkboxClasses = [\n      styles.checkbox,\n      size === 'sm' && styles.sm,\n      size === 'lg' && styles.lg,\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.wrapper, className].filter(Boolean).join(' ');\n\n    // If no label/description, render just the checkbox\n    if (!label && !description) {\n      return (\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={[checkboxClasses, className].filter(Boolean).join(' ')}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.Root>\n      );\n    }\n\n    return (\n      <label\n        {...htmlProps}\n        className={wrapperClasses}\n        data-disabled={disabled || undefined}\n        data-has-description={description ? true : undefined}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onCheckedChange={onCheckedChange}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          required={required}\n          name={name}\n          value={value}\n          id={checkboxId}\n          aria-label={ariaLabel}\n          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}\n          aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}\n          className={checkboxClasses}\n        >\n          <BaseCheckbox.Indicator className={styles.indicator} keepMounted>\n            {indeterminate ? <MinusIcon /> : <CheckIcon />}\n          </BaseCheckbox.Indicator>\n        </BaseCheckbox.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\nexport const Checkbox = Object.assign(CheckboxRoot, {\n  Root: CheckboxRoot,\n});\n"],"names":["Checkbox","BaseCheckbox"],"mappings":"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"}

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const chip = "_chip_169ej_1";
+const withRemove = "_withRemove_169ej_37";
+const sm = "_sm_169ej_42";
+const md = "_md_169ej_48";
+const lg = "_lg_169ej_54";
+const filled = "_filled_169ej_60";
+const selected = "_selected_169ej_70";
+const outlined = "_outlined_169ej_81";
+const soft = "_soft_169ej_107";
+const avatar = "_avatar_169ej_128";
+const icon = "_icon_169ej_144";
+const removableChip = "_removableChip_169ej_149";
+const remove = "_remove_169ej_154";
+const group = "_group_169ej_244";
+const styles = {
+  chip,
+  withRemove,
+  sm,
+  md,
+  lg,
+  filled,
+  selected,
+  outlined,
+  soft,
+  avatar,
+  icon,
+  removableChip,
+  remove,
+  group
+};
+exports.avatar = avatar;
+exports.chip = chip;
+exports.default = styles;
+exports.filled = filled;
+exports.group = group;
+exports.icon = icon;
+exports.lg = lg;
+exports.md = md;
+exports.outlined = outlined;
+exports.removableChip = removableChip;
+exports.remove = remove;
+exports.selected = selected;
+exports.sm = sm;
+exports.soft = soft;
+exports.withRemove = withRemove;
+//# sourceMappingURL=Chip.module.scss.cjs.map

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

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

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

@@ -0,0 +1,48 @@
+const chip = "_chip_169ej_1";
+const withRemove = "_withRemove_169ej_37";
+const sm = "_sm_169ej_42";
+const md = "_md_169ej_48";
+const lg = "_lg_169ej_54";
+const filled = "_filled_169ej_60";
+const selected = "_selected_169ej_70";
+const outlined = "_outlined_169ej_81";
+const soft = "_soft_169ej_107";
+const avatar = "_avatar_169ej_128";
+const icon = "_icon_169ej_144";
+const removableChip = "_removableChip_169ej_149";
+const remove = "_remove_169ej_154";
+const group = "_group_169ej_244";
+const styles = {
+  chip,
+  withRemove,
+  sm,
+  md,
+  lg,
+  filled,
+  selected,
+  outlined,
+  soft,
+  avatar,
+  icon,
+  removableChip,
+  remove,
+  group
+};
+export {
+  avatar,
+  chip,
+  styles as default,
+  filled,
+  group,
+  icon,
+  lg,
+  md,
+  outlined,
+  removableChip,
+  remove,
+  selected,
+  sm,
+  soft,
+  withRemove
+};
+//# sourceMappingURL=Chip.module.scss.js.map

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

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

package/dist/components/Chip/index.cjs

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Chip_module = require("./Chip.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);
+const ChipBase = React__namespace.forwardRef(
+  function Chip2({
+    children,
+    variant = "filled",
+    size = "md",
+    selected = false,
+    disabled = false,
+    icon,
+    avatar,
+    onRemove,
+    className,
+    onClick,
+    value: _value,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      Chip_module.default.chip,
+      Chip_module.default[size],
+      Chip_module.default[variant],
+      selected && Chip_module.default.selected,
+      onRemove && Chip_module.default.withRemove,
+      className
+    ].filter(Boolean).join(" ");
+    const handleRemoveClick = (e) => {
+      e.stopPropagation();
+      onRemove == null ? void 0 : onRemove();
+    };
+    const removeAriaLabel = `Remove ${typeof children === "string" ? children : "chip"}`;
+    const chipButton = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        disabled,
+        className: classes,
+        onClick,
+        ...htmlProps,
+        children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chip_module.default.avatar, "aria-hidden": "true", children: avatar }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chip_module.default.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+        ]
+      }
+    );
+    if (!onRemove) {
+      return chipButton;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Chip_module.default.removableChip, "data-disabled": disabled || void 0, children: [
+      chipButton,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: Chip_module.default.remove,
+          onClick: handleRemoveClick,
+          "aria-label": removeAriaLabel,
+          disabled,
+          children: "×"
+        }
+      )
+    ] });
+  }
+);
+function ChipGroupInner({ children, value: controlledValue, defaultValue = [], onChange, className }, ref) {
+  const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const toggle = React__namespace.useCallback(
+    (chipValue) => {
+      const next = currentValue.includes(chipValue) ? currentValue.filter((v) => v !== chipValue) : [...currentValue, chipValue];
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onChange == null ? void 0 : onChange(next);
+    },
+    [currentValue, isControlled, onChange]
+  );
+  const classes = [Chip_module.default.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, children: React__namespace.Children.map(children, (child) => {
+    if (!React__namespace.isValidElement(child)) return child;
+    const chipValue = child.props.value ?? (typeof child.props.children === "string" ? child.props.children : "");
+    return React__namespace.cloneElement(child, {
+      selected: currentValue.includes(chipValue),
+      onClick: (e) => {
+        var _a, _b;
+        (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, e);
+        if (!e.defaultPrevented) {
+          toggle(chipValue);
+        }
+      }
+    });
+  }) });
+}
+const ChipGroup = React__namespace.forwardRef(ChipGroupInner);
+const Chip = Object.assign(ChipBase, { Group: ChipGroup });
+exports.Chip = Chip;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Chip.module.scss';\n\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant */\n  variant?: 'filled' | 'outlined' | 'soft';\n  /** Size of the chip */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the chip is selected */\n  selected?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Avatar element rendered before the label */\n  avatar?: React.ReactNode;\n  /** Makes chip removable. Called when X is clicked. */\n  onRemove?: () => void;\n  /** Value identifier used by Chip.Group */\n  value?: string;\n}\n\nexport interface ChipGroupProps {\n  children: React.ReactNode;\n  /** Controlled selected values */\n  value?: string[];\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[];\n  /** Called when selection changes */\n  onChange?: (value: string[]) => void;\n  className?: string;\n}\n\nconst ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(\n    {\n      children,\n      variant = 'filled',\n      size = 'md',\n      selected = false,\n      disabled = false,\n      icon,\n      avatar,\n      onRemove,\n      className,\n      onClick,\n      value: _value,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [\n      styles.chip,\n      styles[size],\n      styles[variant],\n      selected && styles.selected,\n      onRemove && styles.withRemove,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onRemove?.();\n    };\n\n    const removeAriaLabel = `Remove ${typeof children === 'string' ? children : 'chip'}`;\n\n    const chipButton = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        disabled={disabled}\n        className={classes}\n        onClick={onClick}\n        {...htmlProps}\n      >\n        {avatar && (\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </button>\n    );\n\n    if (!onRemove) {\n      return chipButton;\n    }\n\n    return (\n      <span className={styles.removableChip} data-disabled={disabled || undefined}>\n        {chipButton}\n        <button\n          type=\"button\"\n          className={styles.remove}\n          onClick={handleRemoveClick}\n          aria-label={removeAriaLabel}\n          disabled={disabled}\n        >\n          &times;\n        </button>\n      </span>\n    );\n  }\n);\n\nfunction ChipGroupInner(\n  { children, value: controlledValue, defaultValue = [], onChange, className }: ChipGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const toggle = React.useCallback(\n    (chipValue: string) => {\n      const next = currentValue.includes(chipValue)\n        ? currentValue.filter((v) => v !== chipValue)\n        : [...currentValue, chipValue];\n\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      onChange?.(next);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div ref={ref} className={classes}>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement<ChipProps>(child)) return child;\n        const chipValue = child.props.value ?? (typeof child.props.children === 'string' ? child.props.children : '');\n        return React.cloneElement(child, {\n          selected: currentValue.includes(chipValue),\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            child.props.onClick?.(e);\n            if (!e.defaultPrevented) {\n              toggle(chipValue);\n            }\n          },\n        } as Partial<ChipProps>);\n      })}\n    </div>\n  );\n}\n\nconst ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);\n\n// Compose Chip with static Group property\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"names":["React","Chip","styles","jsxs","jsx"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    children: React.ReactNode;
+    /** Visual style variant */
+    variant?: 'filled' | 'outlined' | 'soft';
+    /** Size of the chip */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the chip is selected */
+    selected?: boolean;
+    /** Icon element rendered before the label */
+    icon?: React.ReactNode;
+    /** Avatar element rendered before the label */
+    avatar?: React.ReactNode;
+    /** Makes chip removable. Called when X is clicked. */
+    onRemove?: () => void;
+    /** Value identifier used by Chip.Group */
+    value?: string;
+}
+export interface ChipGroupProps {
+    children: React.ReactNode;
+    /** Controlled selected values */
+    value?: string[];
+    /** Default selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Called when selection changes */
+    onChange?: (value: string[]) => void;
+    className?: string;
+}
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>> & {
+    Group: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACzC,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiID,eAAO,MAAM,IAAI;;CAAgD,CAAC"}

package/dist/components/Chip/index.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Chip.module.scss.js";
+const ChipBase = React.forwardRef(
+  function Chip2({
+    children,
+    variant = "filled",
+    size = "md",
+    selected = false,
+    disabled = false,
+    icon,
+    avatar,
+    onRemove,
+    className,
+    onClick,
+    value: _value,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      styles.chip,
+      styles[size],
+      styles[variant],
+      selected && styles.selected,
+      onRemove && styles.withRemove,
+      className
+    ].filter(Boolean).join(" ");
+    const handleRemoveClick = (e) => {
+      e.stopPropagation();
+      onRemove == null ? void 0 : onRemove();
+    };
+    const removeAriaLabel = `Remove ${typeof children === "string" ? children : "chip"}`;
+    const chipButton = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        disabled,
+        className: classes,
+        onClick,
+        ...htmlProps,
+        children: [
+          avatar && /* @__PURE__ */ jsx("span", { className: styles.avatar, "aria-hidden": "true", children: avatar }),
+          icon && /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("span", { children })
+        ]
+      }
+    );
+    if (!onRemove) {
+      return chipButton;
+    }
+    return /* @__PURE__ */ jsxs("span", { className: styles.removableChip, "data-disabled": disabled || void 0, children: [
+      chipButton,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.remove,
+          onClick: handleRemoveClick,
+          "aria-label": removeAriaLabel,
+          disabled,
+          children: "×"
+        }
+      )
+    ] });
+  }
+);
+function ChipGroupInner({ children, value: controlledValue, defaultValue = [], onChange, className }, ref) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const toggle = React.useCallback(
+    (chipValue) => {
+      const next = currentValue.includes(chipValue) ? currentValue.filter((v) => v !== chipValue) : [...currentValue, chipValue];
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onChange == null ? void 0 : onChange(next);
+    },
+    [currentValue, isControlled, onChange]
+  );
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const chipValue = child.props.value ?? (typeof child.props.children === "string" ? child.props.children : "");
+    return React.cloneElement(child, {
+      selected: currentValue.includes(chipValue),
+      onClick: (e) => {
+        var _a, _b;
+        (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, e);
+        if (!e.defaultPrevented) {
+          toggle(chipValue);
+        }
+      }
+    });
+  }) });
+}
+const ChipGroup = React.forwardRef(ChipGroupInner);
+const Chip = Object.assign(ChipBase, { Group: ChipGroup });
+export {
+  Chip
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Chip.module.scss';\n\nexport interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  children: React.ReactNode;\n  /** Visual style variant */\n  variant?: 'filled' | 'outlined' | 'soft';\n  /** Size of the chip */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether the chip is selected */\n  selected?: boolean;\n  /** Icon element rendered before the label */\n  icon?: React.ReactNode;\n  /** Avatar element rendered before the label */\n  avatar?: React.ReactNode;\n  /** Makes chip removable. Called when X is clicked. */\n  onRemove?: () => void;\n  /** Value identifier used by Chip.Group */\n  value?: string;\n}\n\nexport interface ChipGroupProps {\n  children: React.ReactNode;\n  /** Controlled selected values */\n  value?: string[];\n  /** Default selected values (uncontrolled) */\n  defaultValue?: string[];\n  /** Called when selection changes */\n  onChange?: (value: string[]) => void;\n  className?: string;\n}\n\nconst ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(\n  function Chip(\n    {\n      children,\n      variant = 'filled',\n      size = 'md',\n      selected = false,\n      disabled = false,\n      icon,\n      avatar,\n      onRemove,\n      className,\n      onClick,\n      value: _value,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [\n      styles.chip,\n      styles[size],\n      styles[variant],\n      selected && styles.selected,\n      onRemove && styles.withRemove,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const handleRemoveClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onRemove?.();\n    };\n\n    const removeAriaLabel = `Remove ${typeof children === 'string' ? children : 'chip'}`;\n\n    const chipButton = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        disabled={disabled}\n        className={classes}\n        onClick={onClick}\n        {...htmlProps}\n      >\n        {avatar && (\n          <span className={styles.avatar} aria-hidden=\"true\">\n            {avatar}\n          </span>\n        )}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n      </button>\n    );\n\n    if (!onRemove) {\n      return chipButton;\n    }\n\n    return (\n      <span className={styles.removableChip} data-disabled={disabled || undefined}>\n        {chipButton}\n        <button\n          type=\"button\"\n          className={styles.remove}\n          onClick={handleRemoveClick}\n          aria-label={removeAriaLabel}\n          disabled={disabled}\n        >\n          &times;\n        </button>\n      </span>\n    );\n  }\n);\n\nfunction ChipGroupInner(\n  { children, value: controlledValue, defaultValue = [], onChange, className }: ChipGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  const toggle = React.useCallback(\n    (chipValue: string) => {\n      const next = currentValue.includes(chipValue)\n        ? currentValue.filter((v) => v !== chipValue)\n        : [...currentValue, chipValue];\n\n      if (!isControlled) {\n        setInternalValue(next);\n      }\n      onChange?.(next);\n    },\n    [currentValue, isControlled, onChange]\n  );\n\n  const classes = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div ref={ref} className={classes}>\n      {React.Children.map(children, (child) => {\n        if (!React.isValidElement<ChipProps>(child)) return child;\n        const chipValue = child.props.value ?? (typeof child.props.children === 'string' ? child.props.children : '');\n        return React.cloneElement(child, {\n          selected: currentValue.includes(chipValue),\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n            child.props.onClick?.(e);\n            if (!e.defaultPrevented) {\n              toggle(chipValue);\n            }\n          },\n        } as Partial<ChipProps>);\n      })}\n    </div>\n  );\n}\n\nconst ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(ChipGroupInner);\n\n// Compose Chip with static Group property\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n"],"names":["Chip"],"mappings":"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"}