@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Avatar/index.js

@@ -0,0 +1,179 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Avatar.module.scss.js";
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function stringToColor(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash % 360);
+  return `hsl(${hue}, 55%, 40%)`;
+}
+function getContrastTextColor(bgColor) {
+  const match = bgColor.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+  if (!match) return void 0;
+  const h = parseInt(match[1]);
+  const s = parseInt(match[2]) / 100;
+  const l = parseInt(match[3]) / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  r += m;
+  g += m;
+  b += m;
+  const lin = (v) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  const lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return lum > 0.179 ? "#000000" : "#ffffff";
+}
+const AvatarBase = React.forwardRef(
+  function AvatarBase2({
+    src,
+    alt = "",
+    initials,
+    name,
+    size = "md",
+    customSize,
+    shape = "circle",
+    color,
+    imageStyle,
+    className,
+    style: styleProp,
+    ...htmlProps
+  }, ref) {
+    const imgRef = React.useRef(null);
+    const [imageError, setImageError] = React.useState(false);
+    React.useEffect(() => {
+      setImageError(false);
+      const img = imgRef.current;
+      if (img && img.complete && img.naturalWidth === 0) {
+        setImageError(true);
+      }
+    }, [src]);
+    const showFallback = !src || imageError;
+    const displayInitials = initials || (name ? getInitials(name) : "");
+    const fallbackColor = color || (name ? stringToColor(name) : void 0);
+    const fallbackLabel = alt || name;
+    const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);
+    const avatarClasses = [
+      styles.avatar,
+      styles[size],
+      shape === "square" && styles.square,
+      className
+    ].filter(Boolean).join(" ");
+    const style = { ...styleProp };
+    if (customSize !== void 0) {
+      const resolvedSize = typeof customSize === "number" ? `${customSize}px` : customSize;
+      style.width = resolvedSize;
+      style.height = resolvedSize;
+      if (style.fontSize === void 0) {
+        style.fontSize = `calc(${resolvedSize} * 0.4)`;
+      }
+    }
+    if (showFallback && fallbackColor) {
+      style.backgroundColor = fallbackColor;
+      const textColor = getContrastTextColor(fallbackColor);
+      if (textColor) {
+        style["--avatar-initials-color"] = textColor;
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        ...htmlProps,
+        className: avatarClasses,
+        style,
+        role: hasFallbackLabel ? "img" : void 0,
+        "aria-label": hasFallbackLabel ? fallbackLabel : void 0,
+        "aria-hidden": showFallback && !hasFallbackLabel ? true : void 0,
+        children: [
+          !showFallback && /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref: imgRef,
+              src,
+              alt,
+              className: styles.image,
+              onError: () => setImageError(true),
+              style: { ...imageStyle }
+            }
+          ),
+          showFallback && displayInitials && /* @__PURE__ */ jsx("span", { className: styles.initials, children: displayInitials }),
+          showFallback && !displayInitials && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: styles.fallbackIcon,
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+function AvatarGroup({
+  max,
+  size = "md",
+  children,
+  className,
+  ...htmlProps
+}) {
+  const childArray = React.Children.toArray(children);
+  const displayCount = max && max < childArray.length ? max : childArray.length;
+  const overflowCount = max && childArray.length > max ? childArray.length - max : 0;
+  const groupClasses = [styles.group, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: groupClasses, children: [
+    childArray.slice(0, displayCount).map((child, index) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          key: index,
+          size: child.props.size || size,
+          className: [styles.groupItem, child.props.className].filter(Boolean).join(" ")
+        });
+      }
+      return child;
+    }),
+    overflowCount > 0 && /* @__PURE__ */ jsx("div", { className: [styles.avatar, styles[size], styles.overflow].join(" "), children: /* @__PURE__ */ jsxs("span", { className: styles.initials, children: [
+      "+",
+      overflowCount
+    ] }) })
+  ] });
+}
+const Avatar = Object.assign(AvatarBase, {
+  Group: AvatarGroup
+});
+export {
+  Avatar
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Avatar.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image */\n  alt?: string;\n  /** Fallback initials (1-2 characters recommended) */\n  initials?: string;\n  /** Full name - used to generate initials if not provided */\n  name?: string;\n  /** Size variant */\n  size?: AvatarSize;\n  /** Custom avatar size (overrides size width/height) */\n  customSize?: number | string;\n  /** Shape variant */\n  shape?: 'circle' | 'square';\n  /** Custom background color for fallback */\n  color?: string;\n  /** Inline style for the underlying image element */\n  imageStyle?: React.CSSProperties;\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Maximum number of avatars to display */\n  max?: number;\n  /** Size for all avatars in the group */\n  size?: AvatarSize;\n  /** Children (Avatar components) */\n  children: React.ReactNode;\n}\n\n// ============================================\n// Helper Functions\n// ============================================\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase();\n  }\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();\n}\n\nfunction stringToColor(str: string): string {\n  // Generate a consistent color from a string\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  const hue = Math.abs(hash % 360);\n  return `hsl(${hue}, 55%, 40%)`;\n}\n\n/**\n * Compute a contrast-safe text color (white or black) for a given HSL background.\n * Uses WCAG relative luminance to pick whichever gives higher contrast.\n */\nfunction getContrastTextColor(bgColor: string): string | undefined {\n  const match = bgColor.match(/hsl\\((\\d+),\\s*(\\d+)%,\\s*(\\d+)%\\)/);\n  if (!match) return undefined;\n\n  const h = parseInt(match[1]);\n  const s = parseInt(match[2]) / 100;\n  const l = parseInt(match[3]) / 100;\n\n  // HSL → RGB\n  const c = (1 - Math.abs(2 * l - 1)) * s;\n  const x = c * (1 - Math.abs((h / 60) % 2 - 1));\n  const m = l - c / 2;\n  let r = 0, g = 0, b = 0;\n  if (h < 60) { r = c; g = x; }\n  else if (h < 120) { r = x; g = c; }\n  else if (h < 180) { g = c; b = x; }\n  else if (h < 240) { g = x; b = c; }\n  else if (h < 300) { r = x; b = c; }\n  else { r = c; b = x; }\n  r += m; g += m; b += m;\n\n  // Relative luminance (sRGB → linear)\n  const lin = (v: number) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);\n  const lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);\n\n  return lum > 0.179 ? '#000000' : '#ffffff';\n}\n\n// ============================================\n// Avatar Component\n// ============================================\n\nconst AvatarBase = React.forwardRef<HTMLDivElement, AvatarProps>(\n  function AvatarBase(\n    {\n      src,\n      alt = '',\n      initials,\n      name,\n      size = 'md',\n      customSize,\n      shape = 'circle',\n      color,\n      imageStyle,\n      className,\n      style: styleProp,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const imgRef = React.useRef<HTMLImageElement>(null);\n    const [imageError, setImageError] = React.useState(false);\n\n    // Reset error state when src changes; check if already-loaded image failed\n    React.useEffect(() => {\n      setImageError(false);\n      const img = imgRef.current;\n      if (img && img.complete && img.naturalWidth === 0) {\n        setImageError(true);\n      }\n    }, [src]);\n\n    const showFallback = !src || imageError;\n    const displayInitials = initials || (name ? getInitials(name) : '');\n    const fallbackColor = color || (name ? stringToColor(name) : undefined);\n    const fallbackLabel = alt || name;\n    const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);\n\n    const avatarClasses = [\n      styles.avatar,\n      styles[size],\n      shape === 'square' && styles.square,\n      className,\n    ].filter(Boolean).join(' ');\n\n    const style: React.CSSProperties = { ...styleProp };\n    if (customSize !== undefined) {\n      const resolvedSize = typeof customSize === 'number' ? `${customSize}px` : customSize;\n      style.width = resolvedSize;\n      style.height = resolvedSize;\n      if (style.fontSize === undefined) {\n        style.fontSize = `calc(${resolvedSize} * 0.4)`;\n      }\n    }\n\n    if (showFallback && fallbackColor) {\n      style.backgroundColor = fallbackColor;\n      const textColor = getContrastTextColor(fallbackColor);\n      if (textColor) {\n        (style as Record<string, string>)['--avatar-initials-color'] = textColor;\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...htmlProps}\n        className={avatarClasses}\n        style={style}\n        role={hasFallbackLabel ? 'img' : undefined}\n        aria-label={hasFallbackLabel ? fallbackLabel : undefined}\n        aria-hidden={showFallback && !hasFallbackLabel ? true : undefined}\n      >\n        {!showFallback && (\n          <img\n            ref={imgRef}\n            src={src}\n            alt={alt}\n            className={styles.image}\n            onError={() => setImageError(true)}\n            style={{ ...imageStyle }}\n          />\n        )}\n        {showFallback && displayInitials && (\n          <span className={styles.initials}>{displayInitials}</span>\n        )}\n        {showFallback && !displayInitials && (\n          <svg\n            className={styles.fallbackIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n          </svg>\n        )}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Avatar Group Component\n// ============================================\n\nfunction AvatarGroup({\n  max,\n  size = 'md',\n  children,\n  className,\n  ...htmlProps\n}: AvatarGroupProps) {\n  const childArray = React.Children.toArray(children);\n  const displayCount = max && max < childArray.length ? max : childArray.length;\n  const overflowCount = max && childArray.length > max ? childArray.length - max : 0;\n\n  const groupClasses = [styles.group, className].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={groupClasses}>\n      {childArray.slice(0, displayCount).map((child, index) => {\n        if (React.isValidElement<AvatarProps>(child)) {\n          return React.cloneElement(child, {\n            key: index,\n            size: child.props.size || size,\n            className: [styles.groupItem, child.props.className].filter(Boolean).join(' '),\n          });\n        }\n        return child;\n      })}\n      {overflowCount > 0 && (\n        <div className={[styles.avatar, styles[size], styles.overflow].join(' ')}>\n          <span className={styles.initials}>+{overflowCount}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ============================================\n// Compound Component Export\n// ============================================\n\nexport const Avatar = Object.assign(AvatarBase, {\n  Group: AvatarGroup,\n});\n"],"names":["AvatarBase"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const badge = "_badge_ip4yb_1";
+const sm = "_sm_ip4yb_13";
+const md = "_md_ip4yb_18";
+const lg = "_lg_ip4yb_23";
+const success = "_success_ip4yb_33";
+const warning = "_warning_ip4yb_38";
+const error = "_error_ip4yb_43";
+const info = "_info_ip4yb_48";
+const outline = "_outline_ip4yb_53";
+const dot = "_dot_ip4yb_59";
+const icon = "_icon_ip4yb_70";
+const remove = "_remove_ip4yb_75";
+const styles = {
+  badge,
+  sm,
+  md,
+  lg,
+  "default": "_default_ip4yb_28",
+  success,
+  warning,
+  error,
+  info,
+  outline,
+  dot,
+  icon,
+  remove
+};
+exports.badge = badge;
+exports.default = styles;
+exports.dot = dot;
+exports.error = error;
+exports.icon = icon;
+exports.info = info;
+exports.lg = lg;
+exports.md = md;
+exports.outline = outline;
+exports.remove = remove;
+exports.sm = sm;
+exports.success = success;
+exports.warning = warning;
+//# sourceMappingURL=Badge.module.scss.cjs.map

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

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

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

@@ -0,0 +1,43 @@
+const badge = "_badge_ip4yb_1";
+const sm = "_sm_ip4yb_13";
+const md = "_md_ip4yb_18";
+const lg = "_lg_ip4yb_23";
+const success = "_success_ip4yb_33";
+const warning = "_warning_ip4yb_38";
+const error = "_error_ip4yb_43";
+const info = "_info_ip4yb_48";
+const outline = "_outline_ip4yb_53";
+const dot = "_dot_ip4yb_59";
+const icon = "_icon_ip4yb_70";
+const remove = "_remove_ip4yb_75";
+const styles = {
+  badge,
+  sm,
+  md,
+  lg,
+  "default": "_default_ip4yb_28",
+  success,
+  warning,
+  error,
+  info,
+  outline,
+  dot,
+  icon,
+  remove
+};
+export {
+  badge,
+  styles as default,
+  dot,
+  error,
+  icon,
+  info,
+  lg,
+  md,
+  outline,
+  remove,
+  sm,
+  success,
+  warning
+};
+//# sourceMappingURL=Badge.module.scss.js.map

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

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

package/dist/components/Badge/index.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const button = require("@base-ui/react/button");
+const Badge_module = require("./Badge.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 BadgeRoot = React__namespace.forwardRef(
+  function Badge2({
+    children,
+    variant = "default",
+    size = "md",
+    dot = false,
+    icon,
+    onRemove,
+    className,
+    "aria-label": ariaLabel,
+    ...htmlProps
+  }, ref) {
+    const classes = [Badge_module.default.badge, Badge_module.default[size], Badge_module.default[variant], className].filter(Boolean).join(" ");
+    const effectiveAriaLabel = ariaLabel || (variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        ...htmlProps,
+        className: classes,
+        role: effectiveAriaLabel ? "status" : void 0,
+        "aria-label": effectiveAriaLabel,
+        children: [
+          dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.dot, "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              onClick: onRemove,
+              "aria-label": `Remove ${typeof children === "string" ? children : "badge"}`,
+              className: Badge_module.default.remove,
+              children: "×"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const Badge = Object.assign(BadgeRoot, {
+  Root: BadgeRoot
+});
+exports.Badge = Badge;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Badge.module.scss';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';\n  size?: 'sm' | 'md' | 'lg';\n  dot?: boolean;\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n}\n\nconst BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      children,\n      variant = 'default',\n      size = 'md',\n      dot = false,\n      icon,\n      onRemove,\n      className,\n      'aria-label': ariaLabel,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [styles.badge, styles[size], styles[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    // For status badges, include the status in the aria-label if not provided\n    const effectiveAriaLabel = ariaLabel || (\n      variant !== 'default' && variant !== 'outline'\n        ? `${variant}: ${typeof children === 'string' ? children : ''}`\n        : undefined\n    );\n\n    return (\n      <span\n        ref={ref}\n        {...htmlProps}\n        className={classes}\n        role={effectiveAriaLabel ? 'status' : undefined}\n        aria-label={effectiveAriaLabel}\n      >\n        {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n        {onRemove && (\n          <BaseButton\n            onClick={onRemove}\n            aria-label={`Remove ${typeof children === 'string' ? children : 'badge'}`}\n            className={styles.remove}\n          >\n            &times;\n          </BaseButton>\n        )}\n      </span>\n    );\n  }\n);\n\nexport const Badge = Object.assign(BadgeRoot, {\n  Root: BadgeRoot,\n});\n"],"names":["React","Badge","styles","jsxs","jsx","BaseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAYA,iBAAM;AAAA,EACtB,SAASC,OACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU,CAACC,aAAAA,QAAO,OAAOA,aAAAA,QAAO,IAAI,GAAGA,aAAAA,QAAO,OAAO,GAAG,SAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,qBAAqB,cACzB,YAAY,aAAa,YAAY,YACjC,GAAG,OAAO,KAAK,OAAO,aAAa,WAAW,WAAW,EAAE,KAC3D;AAGN,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,MAAM,qBAAqB,WAAW;AAAA,QACtC,cAAY;AAAA,QAEX,UAAA;AAAA,UAAA,sCAAQ,QAAA,EAAK,WAAWD,aAAAA,QAAO,KAAK,eAAY,QAAO;AAAA,UACvD,uCACE,QAAA,EAAK,WAAWA,aAAAA,QAAO,MAAM,eAAY,QACvC,UAAA,KAAA,CACH;AAAA,UAEFE,+BAAC,UAAM,UAAS;AAAA,UACf,YACCA,2BAAAA;AAAAA,YAACC,OAAAA;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAY,UAAU,OAAO,aAAa,WAAW,WAAW,OAAO;AAAA,cACvE,WAAWH,aAAAA,QAAO;AAAA,cACnB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;;"}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    dot?: boolean;
+    icon?: React.ReactNode;
+    onRemove?: () => void;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>> & {
+    Root: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAyDD,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Badge/index.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+import styles from "./Badge.module.scss.js";
+const BadgeRoot = React.forwardRef(
+  function Badge2({
+    children,
+    variant = "default",
+    size = "md",
+    dot = false,
+    icon,
+    onRemove,
+    className,
+    "aria-label": ariaLabel,
+    ...htmlProps
+  }, ref) {
+    const classes = [styles.badge, styles[size], styles[variant], className].filter(Boolean).join(" ");
+    const effectiveAriaLabel = ariaLabel || (variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        ...htmlProps,
+        className: classes,
+        role: effectiveAriaLabel ? "status" : void 0,
+        "aria-label": effectiveAriaLabel,
+        children: [
+          dot && /* @__PURE__ */ jsx("span", { className: styles.dot, "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("span", { children }),
+          onRemove && /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: onRemove,
+              "aria-label": `Remove ${typeof children === "string" ? children : "badge"}`,
+              className: styles.remove,
+              children: "×"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const Badge = Object.assign(BadgeRoot, {
+  Root: BadgeRoot
+});
+export {
+  Badge
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Badge.module.scss';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';\n  size?: 'sm' | 'md' | 'lg';\n  dot?: boolean;\n  icon?: React.ReactNode;\n  onRemove?: () => void;\n}\n\nconst BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      children,\n      variant = 'default',\n      size = 'md',\n      dot = false,\n      icon,\n      onRemove,\n      className,\n      'aria-label': ariaLabel,\n      ...htmlProps\n    },\n    ref\n  ) {\n    const classes = [styles.badge, styles[size], styles[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    // For status badges, include the status in the aria-label if not provided\n    const effectiveAriaLabel = ariaLabel || (\n      variant !== 'default' && variant !== 'outline'\n        ? `${variant}: ${typeof children === 'string' ? children : ''}`\n        : undefined\n    );\n\n    return (\n      <span\n        ref={ref}\n        {...htmlProps}\n        className={classes}\n        role={effectiveAriaLabel ? 'status' : undefined}\n        aria-label={effectiveAriaLabel}\n      >\n        {dot && <span className={styles.dot} aria-hidden=\"true\" />}\n        {icon && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span>{children}</span>\n        {onRemove && (\n          <BaseButton\n            onClick={onRemove}\n            aria-label={`Remove ${typeof children === 'string' ? children : 'badge'}`}\n            className={styles.remove}\n          >\n            &times;\n          </BaseButton>\n        )}\n      </span>\n    );\n  }\n);\n\nexport const Badge = Object.assign(BadgeRoot, {\n  Root: BadgeRoot,\n});\n"],"names":["Badge","BaseButton"],"mappings":";;;;AAeA,MAAM,YAAY,MAAM;AAAA,EACtB,SAASA,OACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,UAAU,CAAC,OAAO,OAAO,OAAO,IAAI,GAAG,OAAO,OAAO,GAAG,SAAS,EACpE,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,qBAAqB,cACzB,YAAY,aAAa,YAAY,YACjC,GAAG,OAAO,KAAK,OAAO,aAAa,WAAW,WAAW,EAAE,KAC3D;AAGN,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,MAAM,qBAAqB,WAAW;AAAA,QACtC,cAAY;AAAA,QAEX,UAAA;AAAA,UAAA,2BAAQ,QAAA,EAAK,WAAW,OAAO,KAAK,eAAY,QAAO;AAAA,UACvD,4BACE,QAAA,EAAK,WAAW,OAAO,MAAM,eAAY,QACvC,UAAA,KAAA,CACH;AAAA,UAEF,oBAAC,UAAM,UAAS;AAAA,UACf,YACC;AAAA,YAACC;AAAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAY,UAAU,OAAO,aAAa,WAAW,WAAW,OAAO;AAAA,cACvE,WAAW,OAAO;AAAA,cACnB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;"}

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const grid = "_grid_5fm9r_1";
+const columns2 = "_columns2_5fm9r_7";
+const columns3 = "_columns3_5fm9r_11";
+const columns4 = "_columns4_5fm9r_15";
+const gapNone = "_gapNone_5fm9r_32";
+const gapXs = "_gapXs_5fm9r_36";
+const gapSm = "_gapSm_5fm9r_40";
+const gapMd = "_gapMd_5fm9r_44";
+const gapLg = "_gapLg_5fm9r_48";
+const gapXl = "_gapXl_5fm9r_52";
+const item = "_item_5fm9r_56";
+const styles = {
+  grid,
+  columns2,
+  columns3,
+  columns4,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
+  item
+};
+exports.columns2 = columns2;
+exports.columns3 = columns3;
+exports.columns4 = columns4;
+exports.default = styles;
+exports.gapLg = gapLg;
+exports.gapMd = gapMd;
+exports.gapNone = gapNone;
+exports.gapSm = gapSm;
+exports.gapXl = gapXl;
+exports.gapXs = gapXs;
+exports.grid = grid;
+exports.item = item;
+//# sourceMappingURL=BentoGrid.module.scss.cjs.map

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

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

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

@@ -0,0 +1,39 @@
+const grid = "_grid_5fm9r_1";
+const columns2 = "_columns2_5fm9r_7";
+const columns3 = "_columns3_5fm9r_11";
+const columns4 = "_columns4_5fm9r_15";
+const gapNone = "_gapNone_5fm9r_32";
+const gapXs = "_gapXs_5fm9r_36";
+const gapSm = "_gapSm_5fm9r_40";
+const gapMd = "_gapMd_5fm9r_44";
+const gapLg = "_gapLg_5fm9r_48";
+const gapXl = "_gapXl_5fm9r_52";
+const item = "_item_5fm9r_56";
+const styles = {
+  grid,
+  columns2,
+  columns3,
+  columns4,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
+  item
+};
+export {
+  columns2,
+  columns3,
+  columns4,
+  styles as default,
+  gapLg,
+  gapMd,
+  gapNone,
+  gapSm,
+  gapXl,
+  gapXs,
+  grid,
+  item
+};
+//# sourceMappingURL=BentoGrid.module.scss.js.map

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

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

package/dist/components/BentoGrid/index.cjs

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BentoGrid_module = require("./BentoGrid.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 gapClasses = {
+  none: BentoGrid_module.default.gapNone,
+  xs: BentoGrid_module.default.gapXs,
+  sm: BentoGrid_module.default.gapSm,
+  md: BentoGrid_module.default.gapMd,
+  lg: BentoGrid_module.default.gapLg,
+  xl: BentoGrid_module.default.gapXl
+};
+function getSpanVars(span, prefix) {
+  if (!span || span === 1) return {};
+  if (typeof span === "number") return { [`--${prefix}`]: span };
+  const vars = {};
+  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;
+  if (span.sm) vars[`--${prefix}-sm`] = span.sm;
+  if (span.md) vars[`--${prefix}-md`] = span.md;
+  if (span.lg) vars[`--${prefix}-lg`] = span.lg;
+  if (span.xl) vars[`--${prefix}-xl`] = span.xl;
+  return vars;
+}
+const BentoGrid = React__namespace.forwardRef(
+  function BentoGrid2({
+    children,
+    columns = 3,
+    gap = "md",
+    className,
+    style
+  }, ref) {
+    const classes = [
+      BentoGrid_module.default.grid,
+      BentoGrid_module.default[`columns${columns}`],
+      gapClasses[gap],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, style, children });
+  }
+);
+const BentoGridItem = React__namespace.forwardRef(
+  function BentoGridItem2({
+    children,
+    colSpan,
+    rowSpan,
+    className
+  }, ref) {
+    const spanVars = {
+      ...getSpanVars(colSpan, "bento-col-span"),
+      ...getSpanVars(rowSpan, "bento-row-span")
+    };
+    const hasVars = Object.keys(spanVars).length > 0;
+    const inlineStyle = hasVars ? spanVars : void 0;
+    const classes = [BentoGrid_module.default.item, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, style: inlineStyle, children });
+  }
+);
+BentoGrid.Item = BentoGridItem;
+exports.BentoGrid = BentoGrid;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/BentoGrid/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport styles from './BentoGrid.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\ntype SpanValue = 1 | 2 | 3;\n\nexport interface ResponsiveSpan {\n  /** Default (mobile-first) */\n  base?: SpanValue;\n  /** ≥640px */\n  sm?: SpanValue;\n  /** ≥768px */\n  md?: SpanValue;\n  /** ≥1024px */\n  lg?: SpanValue;\n  /** ≥1280px */\n  xl?: SpanValue;\n}\n\nexport interface BentoGridProps {\n  children?: React.ReactNode;\n  /** Number of columns (default: 3) — auto-collapses responsively */\n  columns?: 2 | 3 | 4;\n  /** Gap between grid items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nexport interface BentoGridItemProps {\n  children?: React.ReactNode;\n  /** Columns to span — number for all breakpoints, object for per-breakpoint */\n  colSpan?: SpanValue | ResponsiveSpan;\n  /** Rows to span — number for all breakpoints, object for per-breakpoint */\n  rowSpan?: SpanValue | ResponsiveSpan;\n  /** Additional class name */\n  className?: string;\n}\n\n// ============================================\n// Helpers\n// ============================================\n\nconst gapClasses: Record<NonNullable<BentoGridProps['gap']>, string> = {\n  none: styles.gapNone,\n  xs: styles.gapXs,\n  sm: styles.gapSm,\n  md: styles.gapMd,\n  lg: styles.gapLg,\n  xl: styles.gapXl,\n};\n\nfunction getSpanVars(\n  span: SpanValue | ResponsiveSpan | undefined,\n  prefix: string\n): Record<string, number> {\n  if (!span || span === 1) return {};\n  if (typeof span === 'number') return { [`--${prefix}`]: span };\n  const vars: Record<string, number> = {};\n  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;\n  if (span.sm) vars[`--${prefix}-sm`] = span.sm;\n  if (span.md) vars[`--${prefix}-md`] = span.md;\n  if (span.lg) vars[`--${prefix}-lg`] = span.lg;\n  if (span.xl) vars[`--${prefix}-xl`] = span.xl;\n  return vars;\n}\n\n// ============================================\n// BentoGrid Component\n// ============================================\n\nexport const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(\n  function BentoGrid(\n    {\n      children,\n      columns = 3,\n      gap = 'md',\n      className,\n      style,\n    },\n    ref\n  ) {\n    const classes = [\n      styles.grid,\n      styles[`columns${columns}`],\n      gapClasses[gap],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div ref={ref} className={classes} style={style}>\n        {children}\n      </div>\n    );\n  }\n) as BentoGridComponent;\n\n// ============================================\n// BentoGrid.Item Sub-component\n// ============================================\n\nconst BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(\n  function BentoGridItem(\n    {\n      children,\n      colSpan,\n      rowSpan,\n      className,\n    },\n    ref\n  ) {\n    const spanVars = {\n      ...getSpanVars(colSpan, 'bento-col-span'),\n      ...getSpanVars(rowSpan, 'bento-row-span'),\n    };\n\n    const hasVars = Object.keys(spanVars).length > 0;\n    const inlineStyle = hasVars\n      ? (spanVars as unknown as React.CSSProperties)\n      : undefined;\n\n    const classes = [styles.item, className].filter(Boolean).join(' ');\n\n    return (\n      <div ref={ref} className={classes} style={inlineStyle}>\n        {children}\n      </div>\n    );\n  }\n);\n\n// ============================================\n// Compound component type\n// ============================================\n\ninterface BentoGridComponent\n  extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {\n  Item: typeof BentoGridItem;\n}\n\n(BentoGrid as BentoGridComponent).Item = BentoGridItem;\n"],"names":["styles","React","BentoGrid","BentoGridItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAM,aAAiE;AAAA,EACrE,MAAMA,iBAAAA,QAAO;AAAA,EACb,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AAAA,EACX,IAAIA,iBAAAA,QAAO;AACb;AAEA,SAAS,YACP,MACA,QACwB;AACxB,MAAI,CAAC,QAAQ,SAAS,UAAU,CAAA;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO,EAAE,CAAC,KAAK,MAAM,EAAE,GAAG,KAAA;AACxD,QAAM,OAA+B,CAAA;AACrC,MAAI,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,MAAM,EAAE,IAAI,KAAK;AAC3D,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,MAAI,KAAK,GAAI,MAAK,KAAK,MAAM,KAAK,IAAI,KAAK;AAC3C,SAAO;AACT;AAMO,MAAM,YAAYC,iBAAM;AAAA,EAC7B,SAASC,WACP;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,UAAU;AAAA,MACdF,iBAAAA,QAAO;AAAA,MACPA,iBAAAA,QAAO,UAAU,OAAO,EAAE;AAAA,MAC1B,WAAW,GAAG;AAAA,MACd;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,0CACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAChC,UACH;AAAA,EAEJ;AACF;AAMA,MAAM,gBAAgBC,iBAAM;AAAA,EAC1B,SAASE,eACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,WAAW;AAAA,MACf,GAAG,YAAY,SAAS,gBAAgB;AAAA,MACxC,GAAG,YAAY,SAAS,gBAAgB;AAAA,IAAA;AAG1C,UAAM,UAAU,OAAO,KAAK,QAAQ,EAAE,SAAS;AAC/C,UAAM,cAAc,UACf,WACD;AAEJ,UAAM,UAAU,CAACH,iBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,0CACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAAO,aACvC,UACH;AAAA,EAEJ;AACF;AAWC,UAAiC,OAAO;;"}