silver-ui 0.1.0

package/dist/chunk-NJDV3LDH.js

@@ -0,0 +1,722 @@
+import { MobileNav, useAppShellMobile } from './chunk-ZHFAFEI2.js';
+import { Item } from './chunk-CA6645TQ.js';
+import { Button } from './chunk-VLIQPSPM.js';
+import { Text } from './chunk-PZO5MZ46.js';
+import { useLinkComponent } from './chunk-WA4DRAQ7.js';
+import { VisuallyHidden } from './chunk-V5W7NZN5.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 { createContext, useState, useCallback, useMemo, useId, use } from 'react';
+import { ChevronDown, ChevronRight, ChevronLeft } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/SideNav/SideNav.recipe.ts
+var sideNavRecipe = cva({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    h: "100%",
+    w: "260px",
+    bg: "inherit",
+    boxSizing: "border-box",
+    overflow: "hidden"
+  },
+  variants: {
+    isCollapsed: {
+      true: {
+        w: "12"
+      },
+      false: {}
+    },
+    mode: {
+      default: {},
+      topbar: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        h: "12",
+        w: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    isCollapsed: false,
+    mode: "default"
+  }
+});
+var SideNavRenderContext = createContext("default");
+SideNavRenderContext.displayName = "SideNavRenderContext";
+var SideNavCollapseContext = createContext({
+  isCollapsed: false,
+  isCollapsible: false,
+  toggle: () => {
+  }
+});
+SideNavCollapseContext.displayName = "SideNavCollapseContext";
+function useSideNavRenderMode() {
+  return use(SideNavRenderContext);
+}
+function useSideNavCollapse() {
+  return use(SideNavCollapseContext);
+}
+var styles = {
+  expanded: css({
+    ms: "-2"
+  })
+};
+function SideNavCollapseButton() {
+  const { isCollapsed, isCollapsible, toggle } = useSideNavCollapse();
+  if (!isCollapsible) {
+    return null;
+  }
+  const tooltipLabel = isCollapsed ? "Expand sidebar" : "Collapse sidebar";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: isCollapsed ? void 0 : styles.expanded,
+      icon: isCollapsed ? ChevronRight : ChevronLeft,
+      isIconOnly: true,
+      label: tooltipLabel,
+      onClick: toggle,
+      size: "sm",
+      tooltip: tooltipLabel,
+      variant: "ghost"
+    }
+  );
+}
+SideNavCollapseButton.displayName = "SideNavCollapseButton";
+var styles2 = {
+  stickyTop: css({
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: 0,
+    p: "2",
+    gap: "2"
+  }),
+  scrollable: css({
+    flex: 1,
+    overflowY: "auto",
+    overflowX: "hidden",
+    px: "2"
+  }),
+  scrollableCollapsed: css({
+    flex: "none",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  }),
+  stickyBottom: css({
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: 0,
+    mt: "auto",
+    p: "2",
+    gap: "2",
+    borderBlockStartWidth: "default",
+    borderBlockStartStyle: "solid",
+    borderBlockStartColor: "border"
+  }),
+  footerRow: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "1"
+  }),
+  footerRowCollapsed: css({
+    flexDirection: "column-reverse",
+    alignItems: "center"
+  }),
+  footerIcons: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "1",
+    ms: "auto"
+  }),
+  footerIconsCollapsed: css({
+    flexDirection: "column",
+    alignItems: "center",
+    ms: "0"
+  }),
+  topbarIcons: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "1",
+    ms: "auto"
+  })
+};
+function SideNav({
+  children,
+  className,
+  isCollapsible = false,
+  "data-testid": dataTestId,
+  footer,
+  footerIcons,
+  header,
+  ref,
+  style,
+  topContent
+}) {
+  const renderMode = useSideNavRenderMode();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const toggle = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const collapseContext = useMemo(
+    () => ({ isCollapsed, isCollapsible, toggle }),
+    [isCollapsed, isCollapsible, toggle]
+  );
+  if (renderMode === "topbar") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(sideNavRecipe({ mode: "topbar" }), className),
+        "data-testid": dataTestId,
+        style,
+        children: [
+          header,
+          /* @__PURE__ */ jsx("div", { className: styles2.topbarIcons, children: footerIcons })
+        ]
+      }
+    );
+  }
+  if (renderMode === "drawer") {
+    return /* @__PURE__ */ jsxs(MobileNav, { "data-testid": dataTestId, header, children: [
+      topContent,
+      children,
+      footer,
+      footerIcons
+    ] });
+  }
+  if (renderMode === "drawer-content") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      topContent,
+      children,
+      footer,
+      footerIcons
+    ] });
+  }
+  return /* @__PURE__ */ jsx(SideNavCollapseContext, { value: collapseContext, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Side navigation",
+      className: cx(sideNavRecipe({ isCollapsed }), className),
+      "data-testid": dataTestId,
+      ref,
+      role: "navigation",
+      style,
+      children: [
+        header != null || !isCollapsed && topContent != null ? /* @__PURE__ */ jsxs("div", { className: styles2.stickyTop, children: [
+          header,
+          !isCollapsed ? topContent : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              styles2.scrollable,
+              isCollapsed && styles2.scrollableCollapsed
+            ),
+            children
+          }
+        ),
+        footer != null || footerIcons != null || isCollapsible ? /* @__PURE__ */ jsxs("div", { className: styles2.stickyBottom, children: [
+          footer,
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(
+                styles2.footerRow,
+                isCollapsed && styles2.footerRowCollapsed
+              ),
+              children: [
+                isCollapsible ? /* @__PURE__ */ jsx(SideNavCollapseButton, {}) : null,
+                footerIcons != null ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cx(
+                      styles2.footerIcons,
+                      isCollapsed && styles2.footerIconsCollapsed
+                    ),
+                    children: footerIcons
+                  }
+                ) : null
+              ]
+            }
+          )
+        ] }) : null
+      ]
+    }
+  ) });
+}
+SideNav.displayName = "SideNav";
+var styles3 = {
+  root: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    minH: "8",
+    px: "2",
+    color: "fg",
+    textDecoration: "none"
+  }),
+  collapsed: css({
+    justifyContent: "center",
+    px: 0
+  }),
+  logo: css({
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center"
+  }),
+  text: css({
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minW: 0
+  }),
+  endContent: css({
+    ms: "auto",
+    flexShrink: 0
+  })
+};
+function SideNavHeading({
+  as,
+  className,
+  "data-testid": dataTestId,
+  headerEndContent,
+  heading,
+  headingHref,
+  href,
+  logo,
+  ref,
+  style,
+  subheading,
+  superheading
+}) {
+  const LinkComponent = useLinkComponent(as);
+  const { isCollapsed } = useSideNavCollapse();
+  const resolvedHref = headingHref ?? href;
+  const Element = resolvedHref != null ? LinkComponent : "div";
+  if (isCollapsed && logo == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      "aria-label": isCollapsed && resolvedHref != null ? heading : void 0,
+      className: cx(styles3.root, isCollapsed && styles3.collapsed, className),
+      "data-testid": dataTestId,
+      href: resolvedHref,
+      ref,
+      style,
+      to: Element === "a" ? void 0 : resolvedHref,
+      children: [
+        logo != null ? /* @__PURE__ */ jsx("span", { className: styles3.logo, children: logo }) : null,
+        !isCollapsed ? /* @__PURE__ */ jsxs("span", { className: styles3.text, children: [
+          superheading != null ? /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: superheading }) : null,
+          heading != null ? /* @__PURE__ */ jsx(Text, { type: "large", weight: "semibold", children: heading }) : null,
+          subheading != null ? /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: subheading }) : null
+        ] }) : null,
+        !isCollapsed && headerEndContent != null ? /* @__PURE__ */ jsx("span", { className: styles3.endContent, children: headerEndContent }) : null
+      ]
+    }
+  );
+}
+SideNavHeading.displayName = "SideNavHeading";
+var styles4 = {
+  navItem: css({
+    color: "fg.muted",
+    fontSize: "sm",
+    fontWeight: "medium",
+    minH: "8",
+    py: "0.5"
+  }),
+  navItemSelected: css({
+    bg: "bg.hover",
+    color: "fg",
+    fontWeight: "semibold"
+  }),
+  icon: css({
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "var(--silver-sizes-icon-md)"
+  }),
+  collapsed: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "10",
+    minH: "8",
+    px: 0,
+    py: "1.5",
+    borderRadius: "md",
+    color: "fg.muted",
+    textDecoration: "none",
+    bg: "transparent",
+    borderWidth: 0,
+    cursor: "pointer",
+    _hover: { bg: "bg.hover" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  collapsedSelected: css({
+    bg: "bg.hover",
+    color: "fg"
+  }),
+  collapsedDisabled: css({
+    opacity: 0.5,
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  }),
+  toggleRow: css({
+    all: "unset",
+    boxSizing: "border-box",
+    display: "flex",
+    w: "100%",
+    cursor: "pointer",
+    borderRadius: "md",
+    _hover: { bg: "bg.hover" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  toggleRowDisabled: css({
+    opacity: 0.5,
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  }),
+  chevron: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transitionProperty: "transform",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default"
+  }),
+  chevronExpanded: css({
+    transform: "rotate(180deg)"
+  }),
+  toggleButton: css({
+    all: "unset",
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    w: "7",
+    h: "7",
+    borderRadius: "md",
+    cursor: "pointer",
+    color: "fg.muted",
+    _hover: { bg: "bg.hover" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  childrenContainer: css({
+    display: "grid",
+    gridTemplateRows: "1fr",
+    transitionProperty: "grid-template-rows",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default"
+  }),
+  childrenCollapsed: css({
+    gridTemplateRows: "0fr"
+  }),
+  childrenInner: css({
+    overflow: "hidden",
+    ps: "6"
+  })
+};
+function SideNavItem({
+  as,
+  children,
+  className,
+  "data-testid": dataTestId,
+  endContent,
+  href,
+  icon,
+  isCollapsible: isItemCollapsible = false,
+  isDefaultExpanded = true,
+  isDisabled = false,
+  isSelected = false,
+  label,
+  onClick,
+  ref,
+  style
+}) {
+  const LinkComponent = useLinkComponent(as);
+  const { closeMobileNav } = useAppShellMobile();
+  const { isCollapsed } = useSideNavCollapse();
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+  const childrenId = useId();
+  const hasChildren = children != null;
+  const isExpandable = hasChildren && isItemCollapsible;
+  const hasPrimaryAction = href != null || onClick != null;
+  const toggleExpanded = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+  const handleClick = (event) => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    closeMobileNav();
+  };
+  const iconSlot = icon != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles4.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) }) : void 0;
+  if (isCollapsed) {
+    const collapsedClassNames = cx(
+      styles4.collapsed,
+      isSelected && styles4.collapsedSelected,
+      isDisabled && styles4.collapsedDisabled,
+      className
+    );
+    if (href != null && !isDisabled) {
+      return /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          "aria-current": isSelected ? "page" : void 0,
+          "aria-label": label,
+          className: collapsedClassNames,
+          "data-testid": dataTestId,
+          href,
+          onClick: handleClick,
+          ref,
+          style,
+          to: LinkComponent === "a" ? void 0 : href,
+          children: iconSlot
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-current": isSelected ? "page" : void 0,
+        "aria-label": label,
+        className: collapsedClassNames,
+        "data-testid": dataTestId,
+        disabled: isDisabled,
+        onClick: handleClick,
+        ref,
+        style,
+        type: "button",
+        children: iconSlot
+      }
+    );
+  }
+  const chevronSlot = isExpandable ? /* @__PURE__ */ jsx("span", { className: cx(styles4.chevron, isExpanded && styles4.chevronExpanded), children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) }) : null;
+  const childrenContainer = children != null ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        styles4.childrenContainer,
+        isExpandable && !isExpanded && styles4.childrenCollapsed
+      ),
+      id: childrenId,
+      role: "group",
+      children: /* @__PURE__ */ jsx("div", { className: styles4.childrenInner, children })
+    }
+  ) : null;
+  if (isExpandable && !hasPrimaryAction) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-controls": childrenId,
+          "aria-expanded": isExpanded,
+          className: cx(
+            styles4.toggleRow,
+            isSelected && styles4.navItemSelected,
+            isDisabled && styles4.toggleRowDisabled,
+            className
+          ),
+          "data-testid": dataTestId,
+          disabled: isDisabled,
+          onClick: toggleExpanded,
+          ref,
+          style,
+          type: "button",
+          children: /* @__PURE__ */ jsx(
+            Item,
+            {
+              as: "span",
+              className: styles4.navItem,
+              endContent: chevronSlot,
+              label,
+              startContent: iconSlot
+            }
+          )
+        }
+      ),
+      childrenContainer
+    ] });
+  }
+  if (isExpandable && hasPrimaryAction) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Item,
+        {
+          "aria-current": isSelected ? "page" : void 0,
+          className: cx(
+            styles4.navItem,
+            isSelected && styles4.navItemSelected,
+            className
+          ),
+          "data-testid": dataTestId,
+          endContent,
+          href: isDisabled ? void 0 : href,
+          isDisabled,
+          label,
+          linkComponent: as,
+          onClick: handleClick,
+          ref,
+          startContent: iconSlot,
+          style,
+          trailingContent: /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-controls": childrenId,
+              "aria-expanded": isExpanded,
+              "aria-label": isExpanded ? `Collapse ${label}` : `Expand ${label}`,
+              className: styles4.toggleButton,
+              onClick: toggleExpanded,
+              type: "button",
+              children: chevronSlot
+            }
+          )
+        }
+      ),
+      childrenContainer
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Item,
+      {
+        "aria-current": isSelected ? "page" : void 0,
+        className: cx(
+          styles4.navItem,
+          isSelected && styles4.navItemSelected,
+          className
+        ),
+        "data-testid": dataTestId,
+        endContent,
+        href: isDisabled ? void 0 : href,
+        isDisabled,
+        label,
+        linkComponent: as,
+        onClick: handleClick,
+        ref,
+        startContent: iconSlot,
+        style
+      }
+    ),
+    childrenContainer
+  ] });
+}
+SideNavItem.displayName = "SideNavItem";
+var styles5 = {
+  root: css({
+    display: "flex",
+    flexDirection: "column",
+    py: "1"
+  }),
+  rootCollapsed: css({
+    py: "0"
+  }),
+  header: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    px: "2",
+    py: "1"
+  }),
+  titleContainer: css({
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minW: 0
+  }),
+  endContent: css({
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center"
+  }),
+  items: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5"
+  })
+};
+function SideNavSection({
+  children,
+  className,
+  "data-testid": dataTestId,
+  endContent,
+  isHeaderHidden = false,
+  ref,
+  style,
+  subtitle,
+  title
+}) {
+  const { isCollapsed } = useSideNavCollapse();
+  const id = useId();
+  const titleId = `${id}-title`;
+  const shouldHideHeader = isHeaderHidden || isCollapsed;
+  const header = /* @__PURE__ */ jsxs("div", { className: styles5.header, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles5.titleContainer, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          color: "secondary",
+          "data-testid": void 0,
+          id: titleId,
+          type: "supporting",
+          weight: "semibold",
+          children: title
+        }
+      ),
+      subtitle != null ? /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: subtitle }) : null
+    ] }),
+    endContent != null ? /* @__PURE__ */ jsx("span", { className: styles5.endContent, children: endContent }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": titleId,
+      className: cx(
+        styles5.root,
+        isCollapsed && styles5.rootCollapsed,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      role: "group",
+      style,
+      children: [
+        shouldHideHeader ? /* @__PURE__ */ jsx(VisuallyHidden, { children: header }) : header,
+        /* @__PURE__ */ jsx("div", { className: styles5.items, children })
+      ]
+    }
+  );
+}
+SideNavSection.displayName = "SideNavSection";
+
+export { SideNav, SideNavCollapseContext, SideNavHeading, SideNavItem, SideNavRenderContext, SideNavSection, sideNavRecipe };
+//# sourceMappingURL=chunk-NJDV3LDH.js.map
+//# sourceMappingURL=chunk-NJDV3LDH.js.map