silver-ui 0.1.0

package/dist/chunk-3UUZY42Z.js

@@ -0,0 +1,207 @@
+import { useLinkComponent } from './chunk-WA4DRAQ7.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { createContext, use, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var BreadcrumbsContext = createContext({
+  separator: "/",
+  variant: "default"
+});
+BreadcrumbsContext.displayName = "BreadcrumbsContext";
+var styles = {
+  item: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "1",
+    m: 0,
+    "--breadcrumb-separator-display": "flex",
+    _first: {
+      "--breadcrumb-separator-display": "none"
+    }
+  }),
+  defaultSize: css({
+    fontSize: "sm",
+    lineHeight: "normal"
+  }),
+  supportingSize: css({
+    fontSize: "xs",
+    lineHeight: "normal"
+  }),
+  content: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1",
+    minW: 0
+  }),
+  link: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1",
+    minW: 0,
+    p: 0,
+    py: "1",
+    borderWidth: 0,
+    bg: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    font: "inherit",
+    textDecoration: "none",
+    _hover: {
+      textDecoration: "underline"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  current: css({
+    color: "fg"
+  }),
+  supportingCurrent: css({
+    color: "fg.muted"
+  }),
+  icon: css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0
+  }),
+  separator: css({
+    display: "var(--breadcrumb-separator-display)",
+    alignItems: "center",
+    color: "fg.muted",
+    py: "1",
+    userSelect: "none"
+  })
+};
+function BreadcrumbItem({
+  as,
+  children,
+  className,
+  "data-testid": dataTestId,
+  href,
+  isCurrent: isCurrentProp,
+  onClick,
+  ref,
+  startIcon,
+  style
+}) {
+  const context = use(BreadcrumbsContext);
+  const LinkComponent = useLinkComponent(as);
+  const isCurrent = isCurrentProp === true;
+  const isSupporting = context.variant === "supporting";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    startIcon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { icon: startIcon, size: "sm" }) }) : null,
+    children
+  ] });
+  const itemClassName = cx(
+    styles.item,
+    isSupporting ? styles.supportingSize : styles.defaultSize,
+    className
+  );
+  if (isCurrent) {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: itemClassName,
+        "data-testid": dataTestId,
+        ref,
+        style,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.separator, children: context.separator }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-current": "page",
+              className: cx(
+                styles.content,
+                isSupporting ? styles.supportingCurrent : styles.current
+              ),
+              children: content
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: itemClassName,
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.separator, children: context.separator }),
+        href != null ? /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            className: styles.link,
+            href,
+            onClick,
+            to: LinkComponent === "a" ? void 0 : href,
+            children: content
+          }
+        ) : onClick != null ? /* @__PURE__ */ jsx("button", { className: styles.link, onClick, type: "button", children: content }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              styles.content,
+              isSupporting ? styles.supportingCurrent : styles.current
+            ),
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var styles2 = {
+  nav: css({
+    display: "block"
+  }),
+  list: css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "1",
+    m: 0,
+    p: 0,
+    listStyle: "none"
+  })
+};
+function Breadcrumbs({
+  children,
+  className,
+  "data-testid": dataTestId,
+  label = "Breadcrumb",
+  ref,
+  separator = "/",
+  style,
+  variant = "default"
+}) {
+  const contextValue = useMemo(
+    () => ({ separator, variant }),
+    [separator, variant]
+  );
+  return /* @__PURE__ */ jsx(BreadcrumbsContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": label,
+      className: cx(styles2.nav, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: /* @__PURE__ */ jsx("ol", { className: styles2.list, children })
+    }
+  ) });
+}
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export { BreadcrumbItem, Breadcrumbs, BreadcrumbsContext };
+//# sourceMappingURL=chunk-3UUZY42Z.js.map
+//# sourceMappingURL=chunk-3UUZY42Z.js.map

package/dist/chunk-3UUZY42Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsContext.ts","../src/components/Breadcrumbs/BreadcrumbItem.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["styles","jsx"],"mappings":"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","file":"chunk-3UUZY42Z.js","sourcesContent":["import {createContext, type ReactNode} from 'react';\n\nexport type BreadcrumbsVariant = 'default' | 'supporting';\n\nexport interface BreadcrumbsContextValue {\n  separator: ReactNode;\n  variant: BreadcrumbsVariant;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContextValue>({\n  separator: '/',\n  variant: 'default',\n});\n\nBreadcrumbsContext.displayName = 'BreadcrumbsContext';\n","/* eslint-disable @eslint-react/static-components -- intentional polymorphism via as prop */\n\nimport {\n  use,\n  type CSSProperties,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport type {LinkComponent} from '../Link';\nimport {useLinkComponent} from '../Link';\nimport {BreadcrumbsContext} from './BreadcrumbsContext';\n\nexport interface BreadcrumbItemProps {\n  /**\n   * Custom link component used when href is set.\n   */\n  as?: LinkComponent;\n  /**\n   * Breadcrumb label content.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the list item.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the list item.\n   */\n  'data-testid'?: string;\n  /**\n   * Link destination. Omit for the current page.\n   */\n  href?: string;\n  /**\n   * Whether this item represents the current page.\n   */\n  isCurrent?: boolean;\n  /**\n   * Click handler for link or button items.\n   */\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /**\n   * Ref forwarded to the list item.\n   */\n  ref?: Ref<HTMLLIElement>;\n  /**\n   * Icon rendered before the label.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Inline styles applied to the list item.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  item: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '1',\n    m: 0,\n    '--breadcrumb-separator-display': 'flex',\n    _first: {\n      '--breadcrumb-separator-display': 'none',\n    },\n  }),\n  defaultSize: css({\n    fontSize: 'sm',\n    lineHeight: 'normal',\n  }),\n  supportingSize: css({\n    fontSize: 'xs',\n    lineHeight: 'normal',\n  }),\n  content: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '1',\n    minW: 0,\n  }),\n  link: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '1',\n    minW: 0,\n    p: 0,\n    py: '1',\n    borderWidth: 0,\n    bg: 'transparent',\n    color: 'fg.muted',\n    cursor: 'pointer',\n    font: 'inherit',\n    textDecoration: 'none',\n    _hover: {\n      textDecoration: 'underline',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  current: css({\n    color: 'fg',\n  }),\n  supportingCurrent: css({\n    color: 'fg.muted',\n  }),\n  icon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n  }),\n  separator: css({\n    display: 'var(--breadcrumb-separator-display)',\n    alignItems: 'center',\n    color: 'fg.muted',\n    py: '1',\n    userSelect: 'none',\n  }),\n} as const;\n\n/**\n * A single item in a breadcrumb trail, rendered as a link, button, or\n * static text depending on the props provided.\n */\nexport function BreadcrumbItem({\n  as,\n  children,\n  className,\n  'data-testid': dataTestId,\n  href,\n  isCurrent: isCurrentProp,\n  onClick,\n  ref,\n  startIcon,\n  style,\n}: BreadcrumbItemProps): React.JSX.Element {\n  const context = use(BreadcrumbsContext);\n  const LinkComponent = useLinkComponent(as);\n  const isCurrent = isCurrentProp === true;\n  const isSupporting = context.variant === 'supporting';\n\n  const content = (\n    <>\n      {startIcon != null ? (\n        <span className={styles.icon}>\n          <Icon icon={startIcon} size=\"sm\" />\n        </span>\n      ) : null}\n      {children}\n    </>\n  );\n\n  const itemClassName = cx(\n    styles.item,\n    isSupporting ? styles.supportingSize : styles.defaultSize,\n    className,\n  );\n\n  if (isCurrent) {\n    return (\n      <li\n        className={itemClassName}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        <span aria-hidden=\"true\" className={styles.separator}>\n          {context.separator}\n        </span>\n        <span\n          aria-current=\"page\"\n          className={cx(\n            styles.content,\n            isSupporting ? styles.supportingCurrent : styles.current,\n          )}>\n          {content}\n        </span>\n      </li>\n    );\n  }\n\n  return (\n    <li\n      className={itemClassName}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <span aria-hidden=\"true\" className={styles.separator}>\n        {context.separator}\n      </span>\n      {href != null ? (\n        <LinkComponent\n          className={styles.link}\n          href={href}\n          onClick={onClick}\n          to={LinkComponent === 'a' ? undefined : href}>\n          {content}\n        </LinkComponent>\n      ) : onClick != null ? (\n        <button className={styles.link} onClick={onClick} type=\"button\">\n          {content}\n        </button>\n      ) : (\n        <span\n          className={cx(\n            styles.content,\n            isSupporting ? styles.supportingCurrent : styles.current,\n          )}>\n          {content}\n        </span>\n      )}\n    </li>\n  );\n}\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n","import {useMemo, type CSSProperties, type ReactNode, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n  BreadcrumbsContext,\n  type BreadcrumbsVariant,\n} from './BreadcrumbsContext';\n\nexport interface BreadcrumbsProps {\n  /**\n   * BreadcrumbItem children.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the nav element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the nav element.\n   */\n  'data-testid'?: string;\n  /**\n   * Accessible label for the navigation landmark.\n   * @default 'Breadcrumb'\n   */\n  label?: string;\n  /**\n   * Ref forwarded to the nav element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Separator rendered between items.\n   * @default '/'\n   */\n  separator?: ReactNode;\n  /**\n   * Inline styles applied to the nav element.\n   */\n  style?: CSSProperties;\n  /**\n   * Visual text variant.\n   * @default 'default'\n   */\n  variant?: BreadcrumbsVariant;\n}\n\nconst styles = {\n  nav: css({\n    display: 'block',\n  }),\n  list: css({\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '1',\n    m: 0,\n    p: 0,\n    listStyle: 'none',\n  }),\n} as const;\n\n/**\n * Navigation landmark that displays a trail of breadcrumb links.\n */\nexport function Breadcrumbs({\n  children,\n  className,\n  'data-testid': dataTestId,\n  label = 'Breadcrumb',\n  ref,\n  separator = '/',\n  style,\n  variant = 'default',\n}: BreadcrumbsProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({separator, variant}),\n    [separator, variant],\n  );\n\n  return (\n    <BreadcrumbsContext value={contextValue}>\n      <nav\n        aria-label={label}\n        className={cx(styles.nav, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        <ol className={styles.list}>{children}</ol>\n      </nav>\n    </BreadcrumbsContext>\n  );\n}\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n"]}