@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Accordion/index.js

@@ -0,0 +1,165 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+import styles from "./Accordion.module.scss.js";
+const AccordionContext = React.createContext(null);
+const AccordionItemContext = React.createContext(null);
+function useAccordionContext() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
+function useAccordionItemContext() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("Accordion.Trigger/Content must be used within an Accordion.Item");
+  }
+  return context;
+}
+function AccordionRoot({
+  children,
+  type = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  collapsible = false,
+  headingLevel = 3,
+  className,
+  ...htmlProps
+}) {
+  const normalizeValue = (val) => {
+    if (val === void 0) return [];
+    return Array.isArray(val) ? val : [val];
+  };
+  const [openItems, setOpenItems] = React.useState(
+    () => normalizeValue(defaultValue)
+  );
+  const controlledOpenItems = value !== void 0 ? normalizeValue(value) : void 0;
+  const currentOpenItems = controlledOpenItems ?? openItems;
+  const toggle = React.useCallback((itemValue) => {
+    const newItems = (() => {
+      if (type === "single") {
+        if (currentOpenItems.includes(itemValue)) {
+          return collapsible ? [] : currentOpenItems;
+        }
+        return [itemValue];
+      } else {
+        if (currentOpenItems.includes(itemValue)) {
+          return currentOpenItems.filter((v) => v !== itemValue);
+        }
+        return [...currentOpenItems, itemValue];
+      }
+    })();
+    if (controlledOpenItems === void 0) {
+      setOpenItems(newItems);
+    }
+    if (onValueChange) {
+      onValueChange(type === "single" ? newItems[0] ?? "" : newItems);
+    }
+  }, [type, currentOpenItems, collapsible, controlledOpenItems, onValueChange]);
+  const classes = [styles.accordion, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { type, openItems: currentOpenItems, toggle, collapsible, headingLevel }, children: /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, "data-orientation": "vertical", role: "region", children }) });
+}
+function AccordionItem({
+  children,
+  value,
+  disabled = false,
+  className,
+  ...htmlProps
+}) {
+  const { openItems } = useAccordionContext();
+  const isOpen = openItems.includes(value);
+  const baseId = React.useId();
+  const triggerId = `accordion-trigger-${baseId}`;
+  const contentId = `accordion-content-${baseId}`;
+  const classes = [
+    styles.item,
+    isOpen && styles.itemOpen,
+    disabled && styles.itemDisabled,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled, triggerId, contentId }, children: /* @__PURE__ */ jsx(Collapsible.Root, { open: isOpen, disabled, children: /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled || void 0, children }) }) });
+}
+function AccordionTrigger({
+  children,
+  className
+}) {
+  const { toggle, headingLevel } = useAccordionContext();
+  const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
+  const handleClick = () => {
+    if (!disabled) {
+      toggle(value);
+    }
+  };
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  const HeadingTag = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(HeadingTag, { className: styles.heading, children: /* @__PURE__ */ jsxs(
+    Collapsible.Trigger,
+    {
+      id: triggerId,
+      className: classes,
+      onClick: handleClick,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "data-state": isOpen ? "open" : "closed",
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.triggerContent, children }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: styles.chevron,
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M4 6L8 10L12 6",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  children,
+  className
+}) {
+  const { isOpen, triggerId, contentId } = useAccordionItemContext();
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Collapsible.Panel,
+    {
+      id: contentId,
+      className: classes,
+      "data-state": isOpen ? "open" : "closed",
+      role: "region",
+      "aria-labelledby": triggerId,
+      children: /* @__PURE__ */ jsx("div", { className: styles.contentInner, children })
+    }
+  );
+}
+const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';\nimport styles from './Accordion.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AccordionValue = string | string[];\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  children: React.ReactNode;\n  /** Allow multiple items to be open at once */\n  type?: 'single' | 'multiple';\n  /** Controlled value - string for single, string[] for multiple */\n  value?: AccordionValue;\n  /** Default value for uncontrolled usage */\n  defaultValue?: AccordionValue;\n  /** Callback when value changes */\n  onValueChange?: (value: AccordionValue) => void;\n  /** Whether items can be fully collapsed (only for type=\"single\") */\n  collapsible?: boolean;\n  /**\n   * Heading level for accordion triggers (for semantic HTML).\n   * The trigger will be wrapped in an <h{level}> element.\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Unique value for this item */\n  value: string;\n  /** Disable this item */\n  disabled?: boolean;\n}\n\nexport interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n}\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface AccordionContextValue {\n  type: 'single' | 'multiple';\n  openItems: string[];\n  toggle: (value: string) => void;\n  collapsible: boolean;\n  headingLevel: 2 | 3 | 4 | 5 | 6;\n}\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\ninterface AccordionItemContextValue {\n  value: string;\n  isOpen: boolean;\n  disabled: boolean;\n  triggerId: string;\n  contentId: string;\n}\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);\n\nfunction useAccordionContext() {\n  const context = React.useContext(AccordionContext);\n  if (!context) {\n    throw new Error('Accordion components must be used within an Accordion');\n  }\n  return context;\n}\n\nfunction useAccordionItemContext() {\n  const context = React.useContext(AccordionItemContext);\n  if (!context) {\n    throw new Error('Accordion.Trigger/Content must be used within an Accordion.Item');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction AccordionRoot({\n  children,\n  type = 'single',\n  value,\n  defaultValue,\n  onValueChange,\n  collapsible = false,\n  headingLevel = 3,\n  className,\n  ...htmlProps\n}: AccordionProps) {\n  // Normalize value to array for internal handling\n  const normalizeValue = (val: AccordionValue | undefined): string[] => {\n    if (val === undefined) return [];\n    return Array.isArray(val) ? val : [val];\n  };\n\n  const [openItems, setOpenItems] = React.useState<string[]>(() =>\n    normalizeValue(defaultValue)\n  );\n\n  // Use controlled value if provided\n  const controlledOpenItems = value !== undefined ? normalizeValue(value) : undefined;\n  const currentOpenItems = controlledOpenItems ?? openItems;\n\n  const toggle = React.useCallback((itemValue: string) => {\n    const newItems = (() => {\n      if (type === 'single') {\n        // For single, toggle or set new item\n        if (currentOpenItems.includes(itemValue)) {\n          return collapsible ? [] : currentOpenItems;\n        }\n        return [itemValue];\n      } else {\n        // For multiple, toggle item in array\n        if (currentOpenItems.includes(itemValue)) {\n          return currentOpenItems.filter(v => v !== itemValue);\n        }\n        return [...currentOpenItems, itemValue];\n      }\n    })();\n\n    if (controlledOpenItems === undefined) {\n      setOpenItems(newItems);\n    }\n\n    if (onValueChange) {\n      onValueChange(type === 'single' ? (newItems[0] ?? '') : newItems);\n    }\n  }, [type, currentOpenItems, collapsible, controlledOpenItems, onValueChange]);\n\n  const classes = [styles.accordion, className].filter(Boolean).join(' ');\n\n  return (\n    <AccordionContext.Provider value={{ type, openItems: currentOpenItems, toggle, collapsible, headingLevel }}>\n      <div {...htmlProps} className={classes} data-orientation=\"vertical\" role=\"region\">\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nfunction AccordionItem({\n  children,\n  value,\n  disabled = false,\n  className,\n  ...htmlProps\n}: AccordionItemProps) {\n  const { openItems } = useAccordionContext();\n  const isOpen = openItems.includes(value);\n  const baseId = React.useId();\n  const triggerId = `accordion-trigger-${baseId}`;\n  const contentId = `accordion-content-${baseId}`;\n\n  const classes = [\n    styles.item,\n    isOpen && styles.itemOpen,\n    disabled && styles.itemDisabled,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <AccordionItemContext.Provider value={{ value, isOpen, disabled, triggerId, contentId }}>\n      <BaseCollapsible.Root open={isOpen} disabled={disabled}>\n        <div {...htmlProps} className={classes} data-state={isOpen ? 'open' : 'closed'} data-disabled={disabled || undefined}>\n          {children}\n        </div>\n      </BaseCollapsible.Root>\n    </AccordionItemContext.Provider>\n  );\n}\n\nfunction AccordionTrigger({\n  children,\n  className,\n}: AccordionTriggerProps) {\n  const { toggle, headingLevel } = useAccordionContext();\n  const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();\n\n  const handleClick = () => {\n    if (!disabled) {\n      toggle(value);\n    }\n  };\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Create the heading element dynamically based on headingLevel\n  const HeadingTag = `h${headingLevel}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  return (\n    <HeadingTag className={styles.heading}>\n      <BaseCollapsible.Trigger\n        id={triggerId}\n        className={classes}\n        onClick={handleClick}\n        aria-expanded={isOpen}\n        aria-controls={contentId}\n        data-state={isOpen ? 'open' : 'closed'}\n        disabled={disabled}\n      >\n        <span className={styles.triggerContent}>{children}</span>\n        <svg\n          className={styles.chevron}\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4 6L8 10L12 6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </BaseCollapsible.Trigger>\n    </HeadingTag>\n  );\n}\n\nfunction AccordionContent({\n  children,\n  className,\n}: AccordionContentProps) {\n  const { isOpen, triggerId, contentId } = useAccordionItemContext();\n\n  const classes = [styles.content, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseCollapsible.Panel\n      id={contentId}\n      className={classes}\n      data-state={isOpen ? 'open' : 'closed'}\n      role=\"region\"\n      aria-labelledby={triggerId}\n    >\n      <div className={styles.contentInner}>\n        {children}\n      </div>\n    </BaseCollapsible.Panel>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Accordion = Object.assign(AccordionRoot, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n});\n\nexport { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent };\n"],"names":["BaseCollapsible"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const alert = "_alert_1d3ko_1";
+const info = "_info_1d3ko_12";
+const success = "_success_1d3ko_18";
+const warning = "_warning_1d3ko_24";
+const error = "_error_1d3ko_30";
+const icon = "_icon_1d3ko_36";
+const body = "_body_1d3ko_66";
+const title = "_title_1d3ko_71";
+const content = "_content_1d3ko_76";
+const actions = "_actions_1d3ko_80";
+const close = "_close_1d3ko_86";
+const action = "_action_1d3ko_80";
+const styles = {
+  alert,
+  info,
+  success,
+  warning,
+  error,
+  icon,
+  body,
+  title,
+  content,
+  actions,
+  close,
+  action
+};
+exports.action = action;
+exports.actions = actions;
+exports.alert = alert;
+exports.body = body;
+exports.close = close;
+exports.content = content;
+exports.default = styles;
+exports.error = error;
+exports.icon = icon;
+exports.info = info;
+exports.success = success;
+exports.title = title;
+exports.warning = warning;
+//# sourceMappingURL=Alert.module.scss.cjs.map

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

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

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

@@ -0,0 +1,42 @@
+const alert = "_alert_1d3ko_1";
+const info = "_info_1d3ko_12";
+const success = "_success_1d3ko_18";
+const warning = "_warning_1d3ko_24";
+const error = "_error_1d3ko_30";
+const icon = "_icon_1d3ko_36";
+const body = "_body_1d3ko_66";
+const title = "_title_1d3ko_71";
+const content = "_content_1d3ko_76";
+const actions = "_actions_1d3ko_80";
+const close = "_close_1d3ko_86";
+const action = "_action_1d3ko_80";
+const styles = {
+  alert,
+  info,
+  success,
+  warning,
+  error,
+  icon,
+  body,
+  title,
+  content,
+  actions,
+  close,
+  action
+};
+export {
+  action,
+  actions,
+  alert,
+  body,
+  close,
+  content,
+  styles as default,
+  error,
+  icon,
+  info,
+  success,
+  title,
+  warning
+};
+//# sourceMappingURL=Alert.module.scss.js.map

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

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

package/dist/components/Alert/index.cjs

@@ -0,0 +1,129 @@
+"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 Alert_module = require("./Alert.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 AlertContext = React__namespace.createContext(null);
+function useAlertContext() {
+  const context = React__namespace.useContext(AlertContext);
+  if (!context) {
+    throw new Error("Alert compound components must be used within an Alert");
+  }
+  return context;
+}
+const severityIcons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "✗"
+};
+function AlertRoot({
+  children,
+  severity = "info",
+  className,
+  ...htmlProps
+}) {
+  const [dismissed, setDismissed] = React__namespace.useState(false);
+  const titleId = React__namespace.useId();
+  const descId = React__namespace.useId();
+  const dismiss = React__namespace.useCallback(() => {
+    setDismissed(true);
+  }, []);
+  if (dismissed) return null;
+  const classes = [Alert_module.default.alert, Alert_module.default[severity], className].filter(Boolean).join(" ");
+  const contextValue = {
+    severity,
+    titleId,
+    descId,
+    dismiss
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "alert",
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      className: classes,
+      children
+    }
+  ) });
+}
+function AlertIcon({ children, className }) {
+  const { severity } = useAlertContext();
+  const classes = [Alert_module.default.icon, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+}
+function AlertBody({ children, className }) {
+  const classes = [Alert_module.default.body, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function AlertTitle({ children, className }) {
+  const { titleId } = useAlertContext();
+  const classes = [Alert_module.default.title, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: classes, children });
+}
+function AlertContent({ children, className }) {
+  const { descId } = useAlertContext();
+  const classes = [Alert_module.default.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: descId, className: classes, children });
+}
+function AlertActions({ children, className }) {
+  const classes = [Alert_module.default.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+}
+function AlertAction({ children, onClick, className }) {
+  const classes = [Alert_module.default.action, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick, className: classes, children });
+}
+function AlertClose({ children, className }) {
+  const { dismiss } = useAlertContext();
+  const classes = [Alert_module.default.close, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      onClick: dismiss,
+      "aria-label": "Dismiss alert",
+      className: classes,
+      children: children ?? "×"
+    }
+  );
+}
+const Alert = Object.assign(AlertRoot, {
+  Icon: AlertIcon,
+  Body: AlertBody,
+  Title: AlertTitle,
+  Content: AlertContent,
+  Actions: AlertActions,
+  Action: AlertAction,
+  Close: AlertClose
+});
+exports.Alert = Alert;
+exports.AlertAction = AlertAction;
+exports.AlertActions = AlertActions;
+exports.AlertBody = AlertBody;
+exports.AlertClose = AlertClose;
+exports.AlertContent = AlertContent;
+exports.AlertIcon = AlertIcon;
+exports.AlertRoot = AlertRoot;
+exports.AlertTitle = AlertTitle;
+exports.useAlertContext = useAlertContext;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Alert/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Alert.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AlertSeverity = 'info' | 'success' | 'warning' | 'error';\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  severity?: AlertSeverity;\n}\n\nexport interface AlertIconProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertActionsProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertActionProps {\n  children: React.ReactNode;\n  onClick: () => void;\n  className?: string;\n}\n\nexport interface AlertCloseProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface AlertContextValue {\n  severity: AlertSeverity;\n  titleId: string;\n  descId: string;\n  dismiss: () => void;\n}\n\nconst AlertContext = React.createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n  const context = React.useContext(AlertContext);\n  if (!context) {\n    throw new Error('Alert compound components must be used within an Alert');\n  }\n  return context;\n}\n\n// ============================================\n// Severity Icons\n// ============================================\n\nconst severityIcons: Record<AlertSeverity, string> = {\n  info: 'i',\n  success: '\\u2713',\n  warning: '!',\n  error: '\\u2717',\n};\n\n// ============================================\n// Components\n// ============================================\n\nfunction AlertRoot({\n  children,\n  severity = 'info',\n  className,\n  ...htmlProps\n}: AlertProps) {\n  const [dismissed, setDismissed] = React.useState(false);\n  const titleId = React.useId();\n  const descId = React.useId();\n\n  const dismiss = React.useCallback(() => {\n    setDismissed(true);\n  }, []);\n\n  if (dismissed) return null;\n\n  const classes = [styles.alert, styles[severity], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: AlertContextValue = {\n    severity,\n    titleId,\n    descId,\n    dismiss,\n  };\n\n  return (\n    <AlertContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        role=\"alert\"\n        aria-labelledby={titleId}\n        aria-describedby={descId}\n        className={classes}\n      >\n        {children}\n      </div>\n    </AlertContext.Provider>\n  );\n}\n\nfunction AlertIcon({ children, className }: AlertIconProps) {\n  const { severity } = useAlertContext();\n  const classes = [styles.icon, className].filter(Boolean).join(' ');\n\n  return (\n    <span className={classes} aria-hidden=\"true\">\n      {children ?? severityIcons[severity]}\n    </span>\n  );\n}\n\nfunction AlertBody({ children, className }: AlertBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\nfunction AlertTitle({ children, className }: AlertTitleProps) {\n  const { titleId } = useAlertContext();\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return (\n    <div id={titleId} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction AlertContent({ children, className }: AlertContentProps) {\n  const { descId } = useAlertContext();\n  const classes = [styles.content, className].filter(Boolean).join(' ');\n  return (\n    <div id={descId} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction AlertActions({ children, className }: AlertActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\nfunction AlertAction({ children, onClick, className }: AlertActionProps) {\n  const classes = [styles.action, className].filter(Boolean).join(' ');\n  return (\n    <BaseButton onClick={onClick} className={classes}>\n      {children}\n    </BaseButton>\n  );\n}\n\nfunction AlertClose({ children, className }: AlertCloseProps) {\n  const { dismiss } = useAlertContext();\n  const classes = [styles.close, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseButton\n      onClick={dismiss}\n      aria-label=\"Dismiss alert\"\n      className={classes}\n    >\n      {children ?? '\\u00D7'}\n    </BaseButton>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Alert = Object.assign(AlertRoot, {\n  Icon: AlertIcon,\n  Body: AlertBody,\n  Title: AlertTitle,\n  Content: AlertContent,\n  Actions: AlertActions,\n  Action: AlertAction,\n  Close: AlertClose,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  AlertRoot,\n  AlertIcon,\n  AlertBody,\n  AlertTitle,\n  AlertContent,\n  AlertActions,\n  AlertAction,\n  AlertClose,\n  useAlertContext,\n};\n"],"names":["React","styles","jsx","BaseButton"],"mappings":"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"}

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+export type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    severity?: AlertSeverity;
+}
+export interface AlertIconProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface AlertTitleProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface AlertContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface AlertActionsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface AlertActionProps {
+    children: React.ReactNode;
+    onClick: () => void;
+    className?: string;
+}
+export interface AlertCloseProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface AlertBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+interface AlertContextValue {
+    severity: AlertSeverity;
+    titleId: string;
+    descId: string;
+    dismiss: () => void;
+}
+declare function useAlertContext(): AlertContextValue;
+declare function AlertRoot({ children, severity, className, ...htmlProps }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AlertIcon({ children, className }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertBody({ children, className }: AlertBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ children, className }: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertContent({ children, className }: AlertContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertActions({ children, className }: AlertActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertAction({ children, onClick, className }: AlertActionProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertClose({ children, className }: AlertCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare const Alert: typeof AlertRoot & {
+    Icon: typeof AlertIcon;
+    Body: typeof AlertBody;
+    Title: typeof AlertTitle;
+    Content: typeof AlertContent;
+    Actions: typeof AlertActions;
+    Action: typeof AlertAction;
+    Close: typeof AlertClose;
+};
+export { AlertRoot, AlertIcon, AlertBody, AlertTitle, AlertContent, AlertActions, AlertAction, AlertClose, useAlertContext, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,iBAAS,eAAe,sBAMvB;AAiBD,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,QAAiB,EACjB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,UAAU,kDAmCZ;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CASzD;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,2CAGzD;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CAQ3D;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAQ/D;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAG/D;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAOtE;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CAa3D;AAMD,eAAO,MAAM,KAAK;;;;;;;;CAQhB,CAAC;AAGH,OAAO,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,eAAe,GAChB,CAAC"}

package/dist/components/Alert/index.js

@@ -0,0 +1,112 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+import styles from "./Alert.module.scss.js";
+const AlertContext = React.createContext(null);
+function useAlertContext() {
+  const context = React.useContext(AlertContext);
+  if (!context) {
+    throw new Error("Alert compound components must be used within an Alert");
+  }
+  return context;
+}
+const severityIcons = {
+  info: "i",
+  success: "✓",
+  warning: "!",
+  error: "✗"
+};
+function AlertRoot({
+  children,
+  severity = "info",
+  className,
+  ...htmlProps
+}) {
+  const [dismissed, setDismissed] = React.useState(false);
+  const titleId = React.useId();
+  const descId = React.useId();
+  const dismiss = React.useCallback(() => {
+    setDismissed(true);
+  }, []);
+  if (dismissed) return null;
+  const classes = [styles.alert, styles[severity], className].filter(Boolean).join(" ");
+  const contextValue = {
+    severity,
+    titleId,
+    descId,
+    dismiss
+  };
+  return /* @__PURE__ */ jsx(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: "alert",
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      className: classes,
+      children
+    }
+  ) });
+}
+function AlertIcon({ children, className }) {
+  const { severity } = useAlertContext();
+  const classes = [styles.icon, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, "aria-hidden": "true", children: children ?? severityIcons[severity] });
+}
+function AlertBody({ children, className }) {
+  const classes = [styles.body, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+function AlertTitle({ children, className }) {
+  const { titleId } = useAlertContext();
+  const classes = [styles.title, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { id: titleId, className: classes, children });
+}
+function AlertContent({ children, className }) {
+  const { descId } = useAlertContext();
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { id: descId, className: classes, children });
+}
+function AlertActions({ children, className }) {
+  const classes = [styles.actions, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+function AlertAction({ children, onClick, className }) {
+  const classes = [styles.action, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Button, { onClick, className: classes, children });
+}
+function AlertClose({ children, className }) {
+  const { dismiss } = useAlertContext();
+  const classes = [styles.close, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: dismiss,
+      "aria-label": "Dismiss alert",
+      className: classes,
+      children: children ?? "×"
+    }
+  );
+}
+const Alert = Object.assign(AlertRoot, {
+  Icon: AlertIcon,
+  Body: AlertBody,
+  Title: AlertTitle,
+  Content: AlertContent,
+  Actions: AlertActions,
+  Action: AlertAction,
+  Close: AlertClose
+});
+export {
+  Alert,
+  AlertAction,
+  AlertActions,
+  AlertBody,
+  AlertClose,
+  AlertContent,
+  AlertIcon,
+  AlertRoot,
+  AlertTitle,
+  useAlertContext
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Alert/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button as BaseButton } from '@base-ui/react/button';\nimport styles from './Alert.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AlertSeverity = 'info' | 'success' | 'warning' | 'error';\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  severity?: AlertSeverity;\n}\n\nexport interface AlertIconProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertActionsProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertActionProps {\n  children: React.ReactNode;\n  onClick: () => void;\n  className?: string;\n}\n\nexport interface AlertCloseProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport interface AlertBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface AlertContextValue {\n  severity: AlertSeverity;\n  titleId: string;\n  descId: string;\n  dismiss: () => void;\n}\n\nconst AlertContext = React.createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n  const context = React.useContext(AlertContext);\n  if (!context) {\n    throw new Error('Alert compound components must be used within an Alert');\n  }\n  return context;\n}\n\n// ============================================\n// Severity Icons\n// ============================================\n\nconst severityIcons: Record<AlertSeverity, string> = {\n  info: 'i',\n  success: '\\u2713',\n  warning: '!',\n  error: '\\u2717',\n};\n\n// ============================================\n// Components\n// ============================================\n\nfunction AlertRoot({\n  children,\n  severity = 'info',\n  className,\n  ...htmlProps\n}: AlertProps) {\n  const [dismissed, setDismissed] = React.useState(false);\n  const titleId = React.useId();\n  const descId = React.useId();\n\n  const dismiss = React.useCallback(() => {\n    setDismissed(true);\n  }, []);\n\n  if (dismissed) return null;\n\n  const classes = [styles.alert, styles[severity], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: AlertContextValue = {\n    severity,\n    titleId,\n    descId,\n    dismiss,\n  };\n\n  return (\n    <AlertContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        role=\"alert\"\n        aria-labelledby={titleId}\n        aria-describedby={descId}\n        className={classes}\n      >\n        {children}\n      </div>\n    </AlertContext.Provider>\n  );\n}\n\nfunction AlertIcon({ children, className }: AlertIconProps) {\n  const { severity } = useAlertContext();\n  const classes = [styles.icon, className].filter(Boolean).join(' ');\n\n  return (\n    <span className={classes} aria-hidden=\"true\">\n      {children ?? severityIcons[severity]}\n    </span>\n  );\n}\n\nfunction AlertBody({ children, className }: AlertBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\nfunction AlertTitle({ children, className }: AlertTitleProps) {\n  const { titleId } = useAlertContext();\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return (\n    <div id={titleId} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction AlertContent({ children, className }: AlertContentProps) {\n  const { descId } = useAlertContext();\n  const classes = [styles.content, className].filter(Boolean).join(' ');\n  return (\n    <div id={descId} className={classes}>\n      {children}\n    </div>\n  );\n}\n\nfunction AlertActions({ children, className }: AlertActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\nfunction AlertAction({ children, onClick, className }: AlertActionProps) {\n  const classes = [styles.action, className].filter(Boolean).join(' ');\n  return (\n    <BaseButton onClick={onClick} className={classes}>\n      {children}\n    </BaseButton>\n  );\n}\n\nfunction AlertClose({ children, className }: AlertCloseProps) {\n  const { dismiss } = useAlertContext();\n  const classes = [styles.close, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseButton\n      onClick={dismiss}\n      aria-label=\"Dismiss alert\"\n      className={classes}\n    >\n      {children ?? '\\u00D7'}\n    </BaseButton>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Alert = Object.assign(AlertRoot, {\n  Icon: AlertIcon,\n  Body: AlertBody,\n  Title: AlertTitle,\n  Content: AlertContent,\n  Actions: AlertActions,\n  Action: AlertAction,\n  Close: AlertClose,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  AlertRoot,\n  AlertIcon,\n  AlertBody,\n  AlertTitle,\n  AlertContent,\n  AlertActions,\n  AlertAction,\n  AlertClose,\n  useAlertContext,\n};\n"],"names":["BaseButton"],"mappings":"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"}