silver-ui 0.1.0

package/dist/chunk-EHBV6ZMM.js

@@ -0,0 +1,239 @@
+import { Button } from './chunk-VLIQPSPM.js';
+import { Text, token } from './chunk-PZO5MZ46.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { ChevronDown, X, TriangleAlert, CheckCircle2, Info, XCircle } from 'lucide-react';
+import { useId, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Alert/Alert.recipe.ts
+var alertRecipe = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "body"
+  }
+});
+var alertHeaderRecipe = cva({
+  base: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "2",
+    px: "4",
+    py: "3"
+  },
+  variants: {
+    container: {
+      card: {
+        borderTopRadius: "lg"
+      },
+      section: {}
+    },
+    hasContent: {
+      true: {},
+      false: {}
+    },
+    isCentered: {
+      true: {
+        alignItems: "center"
+      },
+      false: {}
+    },
+    status: {
+      error: {
+        bg: "surface.red",
+        color: "surface.red.fg",
+        "--silver-text-color": "token(colors.surface.red.fg)",
+        "--silver-text-color-muted": "token(colors.surface.red.fg)"
+      },
+      info: {
+        bg: "surface.blue",
+        color: "surface.blue.fg",
+        "--silver-text-color": "token(colors.surface.blue.fg)",
+        "--silver-text-color-muted": "token(colors.surface.blue.fg)"
+      },
+      success: {
+        bg: "surface.green",
+        color: "surface.green.fg",
+        "--silver-text-color": "token(colors.surface.green.fg)",
+        "--silver-text-color-muted": "token(colors.surface.green.fg)"
+      },
+      warning: {
+        bg: "surface.yellow",
+        color: "surface.yellow.fg",
+        "--silver-text-color": "token(colors.surface.yellow.fg)",
+        "--silver-text-color-muted": "token(colors.surface.yellow.fg)"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      container: "card",
+      css: {
+        borderBottomRadius: "lg"
+      },
+      hasContent: false
+    }
+  ],
+  defaultVariants: {
+    container: "card",
+    hasContent: false,
+    isCentered: false,
+    status: "info"
+  }
+});
+var statusRole = {
+  error: "alert",
+  info: "status",
+  success: "status",
+  warning: "alert"
+};
+var defaultIcons = {
+  error: /* @__PURE__ */ jsx(Icon, { color: "error", icon: XCircle }),
+  info: /* @__PURE__ */ jsx(Icon, { color: "info", icon: Info }),
+  success: /* @__PURE__ */ jsx(Icon, { color: "success", icon: CheckCircle2 }),
+  warning: /* @__PURE__ */ jsx(Icon, { color: "warning", icon: TriangleAlert })
+};
+var styles = {
+  icon: css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0
+  }),
+  content: css({
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    minW: 0
+  }),
+  endArea: css({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    gap: "2",
+    ms: "auto"
+  }),
+  body: css({
+    bg: "bg",
+    borderBlockEndWidth: "default",
+    borderColor: "border",
+    borderInlineWidth: "default",
+    borderStyle: "solid",
+    px: "4",
+    py: "3"
+  }),
+  bodyCard: css({
+    borderBottomRadius: "lg"
+  }),
+  chevronExpanded: css({
+    transform: "rotate(180deg)"
+  })
+};
+function Alert({
+  children,
+  className,
+  container = "card",
+  "data-testid": dataTestId,
+  description,
+  endContent,
+  icon,
+  isDefaultExpanded = false,
+  isDismissable = false,
+  onDismiss,
+  padding,
+  ref,
+  status,
+  style,
+  title
+}) {
+  const bodyId = useId();
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+  const hasChildren = children != null;
+  const showContent = hasChildren && isExpanded;
+  const showEndArea = endContent != null || isDismissable || hasChildren;
+  const isSingleLine = description == null && (endContent != null || isDismissable || hasChildren);
+  if (isDismissed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(alertRecipe(), className),
+      "data-testid": dataTestId,
+      ref,
+      role: statusRole[status],
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: alertHeaderRecipe({
+              container,
+              hasContent: showContent,
+              isCentered: isSingleLine,
+              status
+            }),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.icon, children: icon ?? defaultIcons[status] }),
+              /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+                /* @__PURE__ */ jsx(Text, { as: "p", type: "label", weight: "semibold", children: title }),
+                description != null ? /* @__PURE__ */ jsx(Text, { as: "p", color: "secondary", type: "supporting", children: description }) : null
+              ] }),
+              showEndArea ? /* @__PURE__ */ jsxs("div", { className: styles.endArea, children: [
+                endContent,
+                hasChildren ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-controls": bodyId,
+                    "aria-expanded": isExpanded,
+                    className: isExpanded ? styles.chevronExpanded : void 0,
+                    icon: ChevronDown,
+                    isIconOnly: true,
+                    label: isExpanded ? "Collapse" : "Expand",
+                    onClick: () => setIsExpanded((value) => !value),
+                    size: "sm",
+                    variant: "ghost"
+                  }
+                ) : null,
+                isDismissable ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: X,
+                    isIconOnly: true,
+                    label: "Dismiss",
+                    onClick: () => {
+                      setIsDismissed(true);
+                      onDismiss?.();
+                    },
+                    size: "sm",
+                    variant: "ghost"
+                  }
+                ) : null
+              ] }) : null
+            ]
+          }
+        ),
+        showContent ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              styles.body,
+              container === "card" ? styles.bodyCard : void 0
+            ),
+            id: bodyId,
+            style: padding != null ? { padding: token(`spacing.${padding}`) } : void 0,
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+}
+Alert.displayName = "Alert";
+
+export { Alert, alertRecipe };
+//# sourceMappingURL=chunk-EHBV6ZMM.js.map
+//# sourceMappingURL=chunk-EHBV6ZMM.js.map

package/dist/chunk-EHBV6ZMM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.recipe.ts","../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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","file":"chunk-EHBV6ZMM.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const alertRecipe = cva({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    fontFamily: 'body',\n  },\n});\n\nexport const alertHeaderRecipe = cva({\n  base: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '2',\n    px: '4',\n    py: '3',\n  },\n  variants: {\n    container: {\n      card: {\n        borderTopRadius: 'lg',\n      },\n      section: {},\n    },\n    hasContent: {\n      true: {},\n      false: {},\n    },\n    isCentered: {\n      true: {\n        alignItems: 'center',\n      },\n      false: {},\n    },\n    status: {\n      error: {\n        bg: 'surface.red',\n        color: 'surface.red.fg',\n        '--silver-text-color': 'token(colors.surface.red.fg)',\n        '--silver-text-color-muted': 'token(colors.surface.red.fg)',\n      },\n      info: {\n        bg: 'surface.blue',\n        color: 'surface.blue.fg',\n        '--silver-text-color': 'token(colors.surface.blue.fg)',\n        '--silver-text-color-muted': 'token(colors.surface.blue.fg)',\n      },\n      success: {\n        bg: 'surface.green',\n        color: 'surface.green.fg',\n        '--silver-text-color': 'token(colors.surface.green.fg)',\n        '--silver-text-color-muted': 'token(colors.surface.green.fg)',\n      },\n      warning: {\n        bg: 'surface.yellow',\n        color: 'surface.yellow.fg',\n        '--silver-text-color': 'token(colors.surface.yellow.fg)',\n        '--silver-text-color-muted': 'token(colors.surface.yellow.fg)',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      container: 'card',\n      css: {\n        borderBottomRadius: 'lg',\n      },\n      hasContent: false,\n    },\n  ],\n  defaultVariants: {\n    container: 'card',\n    hasContent: false,\n    isCentered: false,\n    status: 'info',\n  },\n});\n\nexport type AlertVariants = RecipeVariantProps<typeof alertRecipe>;\n","import {\n  CheckCircle2,\n  ChevronDown,\n  Info,\n  TriangleAlert,\n  X,\n  XCircle,\n} from 'lucide-react';\nimport {\n  useId,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {token} from 'styled-system/tokens';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport type {SpacingStep} from '../Layout/types';\nimport {Text} from '../Text';\nimport {alertHeaderRecipe, alertRecipe} from './Alert.recipe';\n\nexport type AlertContainer = 'card' | 'section';\nexport type AlertStatus = 'error' | 'info' | 'success' | 'warning';\n\nexport interface AlertProps {\n  /**\n   * Extra content rendered below the alert header in a collapsible area.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Visual container style.\n   * @default 'card'\n   */\n  container?: AlertContainer;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting description displayed below the title.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered at the end of the header, before collapse and dismiss controls.\n   */\n  endContent?: ReactNode;\n  /**\n   * Custom status icon. A default icon is rendered when omitted.\n   */\n  icon?: ReactNode;\n  /**\n   * Whether collapsible children are expanded initially.\n   * @default false\n   */\n  isDefaultExpanded?: boolean;\n  /**\n   * Whether the alert can be dismissed.\n   * @default false\n   */\n  isDismissable?: boolean;\n  /**\n   * Called when the dismiss button is clicked.\n   */\n  onDismiss?: () => void;\n  /**\n   * Inner padding step.\n   * @default 4\n   */\n  padding?: SpacingStep;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Status controlling role, icon, and color.\n   */\n  status: AlertStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Primary alert title.\n   */\n  title: ReactNode;\n}\n\nconst statusRole: Record<AlertStatus, 'alert' | 'status'> = {\n  error: 'alert',\n  info: 'status',\n  success: 'status',\n  warning: 'alert',\n};\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n  error: <Icon color=\"error\" icon={XCircle} />,\n  info: <Icon color=\"info\" icon={Info} />,\n  success: <Icon color=\"success\" icon={CheckCircle2} />,\n  warning: <Icon color=\"warning\" icon={TriangleAlert} />,\n};\n\nconst styles = {\n  icon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n  }),\n  content: css({\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    minW: 0,\n  }),\n  endArea: css({\n    display: 'flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    gap: '2',\n    ms: 'auto',\n  }),\n  body: css({\n    bg: 'bg',\n    borderBlockEndWidth: 'default',\n    borderColor: 'border',\n    borderInlineWidth: 'default',\n    borderStyle: 'solid',\n    px: '4',\n    py: '3',\n  }),\n  bodyCard: css({\n    borderBottomRadius: 'lg',\n  }),\n  chevronExpanded: css({\n    transform: 'rotate(180deg)',\n  }),\n} as const;\n\n/**\n * Displays a contextual message with status-based styling, an optional\n * collapsible body, and dismiss functionality.\n */\nexport function Alert({\n  children,\n  className,\n  container = 'card',\n  'data-testid': dataTestId,\n  description,\n  endContent,\n  icon,\n  isDefaultExpanded = false,\n  isDismissable = false,\n  onDismiss,\n  padding,\n  ref,\n  status,\n  style,\n  title,\n}: AlertProps): React.JSX.Element | null {\n  const bodyId = useId();\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);\n  const hasChildren = children != null;\n  const showContent = hasChildren && isExpanded;\n  const showEndArea = endContent != null || isDismissable || hasChildren;\n  const isSingleLine =\n    description == null && (endContent != null || isDismissable || hasChildren);\n\n  if (isDismissed) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cx(alertRecipe(), className)}\n      data-testid={dataTestId}\n      ref={ref}\n      role={statusRole[status]}\n      style={style}>\n      <div\n        className={alertHeaderRecipe({\n          container,\n          hasContent: showContent,\n          isCentered: isSingleLine,\n          status,\n        })}>\n        <span aria-hidden=\"true\" className={styles.icon}>\n          {icon ?? defaultIcons[status]}\n        </span>\n        <div className={styles.content}>\n          <Text as=\"p\" type=\"label\" weight=\"semibold\">\n            {title}\n          </Text>\n          {description != null ? (\n            <Text as=\"p\" color=\"secondary\" type=\"supporting\">\n              {description}\n            </Text>\n          ) : null}\n        </div>\n        {showEndArea ? (\n          <div className={styles.endArea}>\n            {endContent}\n            {hasChildren ? (\n              <Button\n                aria-controls={bodyId}\n                aria-expanded={isExpanded}\n                className={isExpanded ? styles.chevronExpanded : undefined}\n                icon={ChevronDown}\n                isIconOnly\n                label={isExpanded ? 'Collapse' : 'Expand'}\n                onClick={() => setIsExpanded(value => !value)}\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            ) : null}\n            {isDismissable ? (\n              <Button\n                icon={X}\n                isIconOnly\n                label=\"Dismiss\"\n                onClick={() => {\n                  setIsDismissed(true);\n                  onDismiss?.();\n                }}\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      {showContent ? (\n        <div\n          className={cx(\n            styles.body,\n            container === 'card' ? styles.bodyCard : undefined,\n          )}\n          id={bodyId}\n          style={\n            padding != null ? {padding: token(`spacing.${padding}`)} : undefined\n          }>\n          {children}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nAlert.displayName = 'Alert';\n"]}