@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/layout/settings-page/settings-section.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Text from "../../typography/text/text.js";
+import Stack from "../stack/stack.js";
+const SettingsSection = ({ title, description, children, className = "" }) => {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: "md", className, children: [
+    /* @__PURE__ */ jsxs(Stack, { spacing: "sm", children: [
+      /* @__PURE__ */ jsx(Text, { size: "lg", weight: "medium", children: title }),
+      description && /* @__PURE__ */ jsx(Text, { variant: "muted", size: "sm", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { spacing: "md", children })
+  ] });
+};
+SettingsSection.displayName = "SettingsSection";
+export {
+  SettingsSection
+};
+//# sourceMappingURL=settings-section.js.map

package/dist/components/layout/settings-page/settings-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-section.js","sources":["../../../../src/components/layout/settings-page/settings-section.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Text from '../../typography/text/text';\nimport Stack from '../stack/stack';\n\nexport interface SettingsSectionProps {\n  /** Section title */\n  title: string;\n  /** Section description (optional) */\n  description?: string;\n  /** Setting items or custom content */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * SettingsSection - Group related settings together\n *\n * Creates a visually distinct section within a SettingsPage.\n * Use with SettingItem components for individual settings.\n *\n * @example\n * ```tsx\n * <SettingsSection\n *   title=\"Appearance\"\n *   description=\"Customize how the app looks\"\n * >\n *   <SettingItem label=\"Theme\">\n *     <FormSelect value={theme}>...</FormSelect>\n *   </SettingItem>\n * </SettingsSection>\n * ```\n */\nexport const SettingsSection = ({ title, description, children, className = '' }: SettingsSectionProps) => {\n  return (\n    <Stack spacing=\"md\" className={className}>\n      <Stack spacing=\"sm\">\n        <Text size=\"lg\" weight=\"medium\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant=\"muted\" size=\"sm\">\n            {description}\n          </Text>\n        )}\n      </Stack>\n      <Stack spacing=\"md\">{children}</Stack>\n    </Stack>\n  );\n};\n\nSettingsSection.displayName = 'SettingsSection';\n\nexport default SettingsSection;\n"],"names":[],"mappings":";;;AAkCO,MAAM,kBAAkB,CAAC,EAAE,OAAO,aAAa,UAAU,YAAY,SAA+B;AACzG,SACE,qBAAC,OAAA,EAAM,SAAQ,MAAK,WAClB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,SAAQ,MACb,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAK,MAAK,QAAO,UACpB,UAAA,OACH;AAAA,MACC,eACC,oBAAC,MAAA,EAAK,SAAQ,SAAQ,MAAK,MACxB,UAAA,YAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACA,oBAAC,OAAA,EAAM,SAAQ,MAAM,SAAA,CAAS;AAAA,EAAA,GAChC;AAEJ;AAEA,gBAAgB,cAAc;"}

package/dist/components/layout/stack/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './stack';
+export type { StackProps } from './stack';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/stack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/layout/stack/stack.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { GapSize } from '../../../theme/size-tokens';
+type StackDirection = 'vertical' | 'horizontal';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type StackProps = {
+    /** Stack content - typically a list of child elements to be arranged */
+    children: React.ReactNode;
+    /** Additional CSS classes applied to the stack */
+    className?: string;
+    /** Flex direction - vertical stacks by default */
+    direction?: StackDirection;
+    /** Gap between children using the shared spacing scale */
+    spacing?: GapSize;
+    /** Cross-axis alignment of children */
+    align?: StackAlign;
+    /** Main-axis distribution of children */
+    justify?: StackJustify;
+    /** Allows items to wrap onto multiple lines */
+    wrap?: boolean;
+    /** Switches between flex and inline-flex */
+    inline?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'>;
+/**
+ * Stack layout primitive
+ * Provides a flex container with direction, spacing, and alignment controls.
+ */
+declare function Stack({ children, className, direction, spacing, align, justify, wrap, inline, ...props }: Readonly<StackProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Stack {
+    var displayName: string;
+}
+export default Stack;
+//# sourceMappingURL=stack.d.ts.map

package/dist/components/layout/stack/stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stack/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAEpE,KAAK,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AAChD,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AACtE,KAAK,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAmBjF,MAAM,MAAM,UAAU,GAAG;IACvB,wEAAwE;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,CAAC;AAEzE;;;GAGG;AACH,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,SAAc,EACd,SAAsB,EACtB,OAAc,EACd,KAAiB,EACjB,OAAO,EACP,IAAY,EACZ,MAAc,EACd,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,UAAU,CAAC,2CAkBtB;kBA5BQ,KAAK;;;AAgCd,eAAe,KAAK,CAAC"}

package/dist/components/layout/stack/stack.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { gapSizes } from "../../../theme/size-tokens.js";
+const alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+const justifyClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+function Stack({
+  children,
+  className = "",
+  direction = "vertical",
+  spacing = "md",
+  align = "stretch",
+  justify,
+  wrap = false,
+  inline = false,
+  ...props
+}) {
+  const classes = [
+    inline ? "inline-flex" : "flex",
+    direction === "horizontal" ? "flex-row" : "flex-col",
+    gapSizes[spacing],
+    alignClasses[align],
+    justify && justifyClasses[justify],
+    wrap ? "flex-wrap" : "flex-nowrap",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { "data-component": "Stack", className: classes, ...props, children });
+}
+Stack.displayName = "Stack";
+export {
+  Stack as default
+};
+//# sourceMappingURL=stack.js.map

package/dist/components/layout/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { gapSizes, type GapSize } from '../../../theme/size-tokens';\n\ntype StackDirection = 'vertical' | 'horizontal';\ntype StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\nconst alignClasses: Record<StackAlign, string> = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline'\n};\n\nconst justifyClasses: Record<StackJustify, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly'\n};\n\nexport type StackProps = {\n  /** Stack content - typically a list of child elements to be arranged */\n  children: React.ReactNode;\n  /** Additional CSS classes applied to the stack */\n  className?: string;\n  /** Flex direction - vertical stacks by default */\n  direction?: StackDirection;\n  /** Gap between children using the shared spacing scale */\n  spacing?: GapSize;\n  /** Cross-axis alignment of children */\n  align?: StackAlign;\n  /** Main-axis distribution of children */\n  justify?: StackJustify;\n  /** Allows items to wrap onto multiple lines */\n  wrap?: boolean;\n  /** Switches between flex and inline-flex */\n  inline?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'>;\n\n/**\n * Stack layout primitive\n * Provides a flex container with direction, spacing, and alignment controls.\n */\nfunction Stack({\n  children,\n  className = '',\n  direction = 'vertical',\n  spacing = 'md',\n  align = 'stretch',\n  justify,\n  wrap = false,\n  inline = false,\n  ...props\n}: Readonly<StackProps>) {\n  const classes = [\n    inline ? 'inline-flex' : 'flex',\n    direction === 'horizontal' ? 'flex-row' : 'flex-col',\n    gapSizes[spacing],\n    alignClasses[align],\n    justify && justifyClasses[justify],\n    wrap ? 'flex-wrap' : 'flex-nowrap',\n    className\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div data-component=\"Stack\" className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n\nStack.displayName = 'Stack';\n\nexport default Stack;\n"],"names":[],"mappings":";;AAQA,MAAM,eAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AACZ;AAEA,MAAM,iBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAyBA,SAAS,MAAM;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU;AAAA,IACd,SAAS,gBAAgB;AAAA,IACzB,cAAc,eAAe,aAAa;AAAA,IAC1C,SAAS,OAAO;AAAA,IAChB,aAAa,KAAK;AAAA,IAClB,WAAW,eAAe,OAAO;AAAA,IACjC,OAAO,cAAc;AAAA,IACrB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,SAAI,kBAAe,SAAQ,WAAW,SAAU,GAAG,OACjD,UACH;AAEJ;AAEA,MAAM,cAAc;"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,61 @@
+import { ComponentType, MouseEvent, ReactNode } from 'react';
+import { ColorVariant } from '../../../theme/tokens';
+export type BreadcrumbItem = {
+    /** Display text for the breadcrumb */
+    label: string;
+    /** Optional navigation link (last item typically has no href) */
+    href?: string;
+    /** Optional click handler for client-side navigation */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional props passed to the link component (e.g., 'to' for React Router Link) */
+    [key: string]: unknown;
+    /** Color variant for the breadcrumb link (defaults to standard link color) */
+    variant?: ColorVariant;
+};
+export type BreadcrumbsProps = {
+    /** Array of breadcrumb items to display in hierarchical order */
+    items: BreadcrumbItem[];
+    /** Custom separator to display between items (defaults to '/') */
+    separator?: ReactNode;
+    /** Additional CSS classes for the breadcrumb container */
+    className?: string;
+    /** Custom link component (e.g., React Router Link) for client-side navigation */
+    linkComponent?: ComponentType<{
+        className?: string;
+        onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+        [key: string]: unknown;
+    }>;
+    variant?: ColorVariant;
+};
+/**
+ * Breadcrumbs - Hierarchical path display
+ *
+ * @example
+ * // With onClick handlers
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/', onClick: () => navigate('/') },
+ *     { label: 'Products', href: '/products', onClick: () => navigate('/products') },
+ *     { label: 'Item' }
+ *   ]}
+ * />
+ *
+ * @example
+ * // With React Router Link component
+ * import { Link } from 'react-router-dom';
+ *
+ * <Breadcrumbs
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Item' }
+ *   ]}
+ * />
+ */
+declare function Breadcrumbs({ items, separator, className, linkComponent, variant }: Readonly<BreadcrumbsProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Breadcrumbs {
+    var displayName: string;
+}
+export default Breadcrumbs;
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAiB,MAAM,uBAAuB,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG;IAC3B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,uFAAuF;IACvF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iEAAiE;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,kEAAkE;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACrD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,SAAe,EACf,SAAc,EACd,aAAa,EACb,OAAmB,EACpB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAwC5B;kBA9CQ,WAAW;;;AAkDpB,eAAe,WAAW,CAAC"}

package/dist/components/navigation/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { colorVariants } from "../../../theme/tokens.js";
+function Breadcrumbs({
+  items,
+  separator = "/",
+  className = "",
+  linkComponent,
+  variant = "neutral"
+}) {
+  const LinkComponent = linkComponent || "a";
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center space-x-2 text-sm", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const key = item.href || item.label;
+    const { label: _label, onClick, href, ...linkProps } = item;
+    const hasLinkProps = href || onClick || Object.keys(linkProps).length > 0;
+    const shouldRenderLink = hasLinkProps && !isLast;
+    const itemVariant = item.variant ?? variant;
+    const linkClasses = colorVariants.breadcrumb.link[itemVariant];
+    const activeClasses = colorVariants.breadcrumb.active[itemVariant];
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
+      shouldRenderLink ? /* @__PURE__ */ jsx(LinkComponent, { ...href ? { href } : {}, ...linkProps, onClick, className: linkClasses, children: item.label }) : /* @__PURE__ */ jsx("span", { className: isLast ? activeClasses : "text-muted-foreground", children: item.label }),
+      !isLast && /* @__PURE__ */ jsx("span", { className: "mx-2 text-muted-foreground select-none", "aria-hidden": "true", children: separator })
+    ] }, key);
+  }) }) });
+}
+Breadcrumbs.displayName = "Breadcrumbs";
+export {
+  Breadcrumbs as default
+};
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sources":["../../../../src/components/navigation/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { ComponentType, MouseEvent, ReactNode } from 'react';\nimport { ColorVariant, colorVariants } from '../../../theme/tokens';\n\nexport type BreadcrumbItem = {\n  /** Display text for the breadcrumb */\n  label: string;\n  /** Optional navigation link (last item typically has no href) */\n  href?: string;\n  /** Optional click handler for client-side navigation */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  /** Additional props passed to the link component (e.g., 'to' for React Router Link) */\n  [key: string]: unknown;\n  /** Color variant for the breadcrumb link (defaults to standard link color) */\n  variant?: ColorVariant;\n};\n\nexport type BreadcrumbsProps = {\n  /** Array of breadcrumb items to display in hierarchical order */\n  items: BreadcrumbItem[];\n  /** Custom separator to display between items (defaults to '/') */\n  separator?: ReactNode;\n  /** Additional CSS classes for the breadcrumb container */\n  className?: string;\n  /** Custom link component (e.g., React Router Link) for client-side navigation */\n  linkComponent?: ComponentType<{\n    className?: string;\n    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;\n    [key: string]: unknown;\n  }>;\n  variant?: ColorVariant;\n};\n\n/**\n * Breadcrumbs - Hierarchical path display\n *\n * @example\n * // With onClick handlers\n * <Breadcrumbs\n *   items={[\n *     { label: 'Home', href: '/', onClick: () => navigate('/') },\n *     { label: 'Products', href: '/products', onClick: () => navigate('/products') },\n *     { label: 'Item' }\n *   ]}\n * />\n *\n * @example\n * // With React Router Link component\n * import { Link } from 'react-router-dom';\n *\n * <Breadcrumbs\n *   linkComponent={Link}\n *   items={[\n *     { label: 'Home', to: '/' },\n *     { label: 'Products', to: '/products' },\n *     { label: 'Item' }\n *   ]}\n * />\n */\nfunction Breadcrumbs({\n  items,\n  separator = '/',\n  className = '',\n  linkComponent,\n  variant = 'neutral'\n}: Readonly<BreadcrumbsProps>) {\n  const LinkComponent = linkComponent || 'a';\n\n  return (\n    <nav aria-label=\"Breadcrumb\" className={className}>\n      <ol className=\"flex items-center space-x-2 text-sm\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          const key = item.href || item.label;\n\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { label: _label, onClick, href, ...linkProps } = item;\n\n          const hasLinkProps = href || onClick || Object.keys(linkProps).length > 0;\n          const shouldRenderLink = hasLinkProps && !isLast;\n\n          const itemVariant = item.variant ?? variant;\n          const linkClasses = colorVariants.breadcrumb.link[itemVariant];\n          const activeClasses = colorVariants.breadcrumb.active[itemVariant];\n\n          return (\n            <li key={key} className=\"flex items-center\">\n              {shouldRenderLink ? (\n                <LinkComponent {...(href ? { href } : {})} {...linkProps} onClick={onClick} className={linkClasses}>\n                  {item.label}\n                </LinkComponent>\n              ) : (\n                <span className={isLast ? activeClasses : 'text-muted-foreground'}>{item.label}</span>\n              )}\n              {!isLast && (\n                <span className=\"mx-2 text-muted-foreground select-none\" aria-hidden=\"true\">\n                  {separator}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n\nexport default Breadcrumbs;\n"],"names":[],"mappings":";;AA0DA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AACZ,GAA+B;AAC7B,QAAM,gBAAgB,iBAAiB;AAEvC,SACE,oBAAC,OAAA,EAAI,cAAW,cAAa,WAC3B,UAAA,oBAAC,MAAA,EAAG,WAAU,uCACX,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UAAM,MAAM,KAAK,QAAQ,KAAK;AAG9B,UAAM,EAAE,OAAO,QAAQ,SAAS,MAAM,GAAG,cAAc;AAEvD,UAAM,eAAe,QAAQ,WAAW,OAAO,KAAK,SAAS,EAAE,SAAS;AACxE,UAAM,mBAAmB,gBAAgB,CAAC;AAE1C,UAAM,cAAc,KAAK,WAAW;AACpC,UAAM,cAAc,cAAc,WAAW,KAAK,WAAW;AAC7D,UAAM,gBAAgB,cAAc,WAAW,OAAO,WAAW;AAEjE,WACE,qBAAC,MAAA,EAAa,WAAU,qBACrB,UAAA;AAAA,MAAA,mBACC,oBAAC,eAAA,EAAe,GAAI,OAAO,EAAE,SAAS,CAAA,GAAM,GAAG,WAAW,SAAkB,WAAW,aACpF,UAAA,KAAK,MAAA,CACR,IAEA,oBAAC,QAAA,EAAK,WAAW,SAAS,gBAAgB,yBAA0B,UAAA,KAAK,MAAA,CAAM;AAAA,MAEhF,CAAC,UACA,oBAAC,QAAA,EAAK,WAAU,0CAAyC,eAAY,QAClE,UAAA,UAAA,CACH;AAAA,IAAA,EAAA,GAXK,GAaT;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;AAEA,YAAY,cAAc;"}

package/dist/components/navigation/breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem } from './breadcrumbs';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/navigation/dropdown/dropdown.d.ts

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../../forms/button/button';
+import { Size } from '../../../theme/size-tokens';
+export type DropdownTriggerProps = {
+    /** Main label text */
+    title: string;
+    /** Optional secondary text shown below the title */
+    subtitle?: string;
+    /** Optional leading icon */
+    icon?: string;
+    /** Size of the leading icon */
+    iconSize?: Size;
+    /** Size variant for the trigger button */
+    triggerSize?: ButtonProps['size'];
+    /** Optional trailing icon */
+    endIcon?: string;
+};
+export type DropdownProps = {
+    /** Trigger configuration - rendered as an accessible Button */
+    trigger: DropdownTriggerProps;
+    children: React.ReactNode;
+    className?: string;
+    align?: 'start' | 'center' | 'end';
+    autoClose?: boolean;
+    /** Size of the dropdown panel and items */
+    size?: ButtonProps['size'];
+    /** Button variant for the trigger */
+    variant?: ButtonProps['variant'];
+    /** Button style for the trigger */
+    buttonStyle?: ButtonProps['style'];
+    /** Minimum width for the dropdown menu and all items (e.g., '200px', '16rem') */
+    minWidth?: string;
+    /** Maximum width for the dropdown menu (e.g., '400px', '24rem') */
+    maxWidth?: string;
+    /** Additional styles for the dropdown menu */
+    menuClassName?: string;
+};
+type DropdownContextValue = {
+    requestClose: () => void;
+    autoClose: boolean;
+    registerItem?: (el: HTMLButtonElement | null, index?: number) => void;
+    minWidth?: string;
+    size?: ButtonProps['size'];
+};
+export declare function useDropdown(): DropdownContextValue;
+/**
+ * Dropdown component with click-outside handling
+ */
+declare function Dropdown({ trigger, children, className, align, autoClose, size, variant, buttonStyle, minWidth, maxWidth, menuClassName }: Readonly<DropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Dropdown {
+    var displayName: string;
+}
+export default Dropdown;
+export type DropdownItemProps = {
+    children: React.ReactNode;
+    onSelect?: () => void;
+    /** Semantic color variant */
+    variant?: 'neutral' | 'primary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+    disabled?: boolean;
+    className?: string;
+    /** Optional muted description below main label */
+    description?: string;
+    /** Leading icon */
+    icon?: string;
+    iconSize?: Size;
+    /** Trailing icon (e.g., checkmark for selected items) */
+    endIcon?: string;
+    /** Inherit size from dropdown or override */
+    size?: 'sm' | 'md';
+    /** Marks item as selected with enhanced background and optional checkmark */
+    selected?: boolean;
+    __dropdownIndex?: number;
+    __registerItem?: (el: HTMLButtonElement | null, index: number) => void;
+};
+export declare function DropdownItem({ children, onSelect, variant, disabled, className, description, icon, iconSize, endIcon, size, selected }: Readonly<DropdownItemProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownSeparator - Visual divider for grouping dropdown items
+ * Use between items to create visual separation (e.g., separating error actions)
+ */
+export declare function DropdownSeparator({ className }: Readonly<{
+    className?: string;
+}>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/components/navigation/dropdown/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/dropdown/dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/navigation/dropdown/dropdown.js

@@ -0,0 +1,295 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useLayoutEffect, useContext, createContext } from "react";
+import { createPortal } from "react-dom";
+import Button from "../../forms/button/button.js";
+import { Icon } from "../../system/icon/icon.js";
+import { gapSizes } from "../../../theme/size-tokens.js";
+const DropdownContext = createContext(null);
+function Dropdown({
+  trigger,
+  children,
+  className = "",
+  align = "start",
+  autoClose = true,
+  size = "md",
+  variant = "neutral",
+  buttonStyle = "solid",
+  minWidth,
+  maxWidth,
+  menuClassName = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const itemsRef = useRef([]);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [menuPosition, setMenuPosition] = useState(null);
+  const close = useCallback(() => setIsOpen(false), []);
+  const open = useCallback(() => setIsOpen(true), []);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (!menuRef.current) return;
+      const itemEls = itemsRef.current.filter(Boolean);
+      if (["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
+        e.preventDefault();
+        if (itemEls.length === 0) return;
+        let nextIndex = activeIndex;
+        if (e.key === "ArrowDown") nextIndex = (activeIndex + 1) % itemEls.length;
+        if (e.key === "ArrowUp") nextIndex = (activeIndex - 1 + itemEls.length) % itemEls.length;
+        if (e.key === "Home") nextIndex = 0;
+        if (e.key === "End") nextIndex = itemEls.length - 1;
+        setActiveIndex(nextIndex);
+        itemEls[nextIndex]?.focus();
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        triggerRef.current?.focus();
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const itemEls2 = itemsRef.current.filter(Boolean);
+        if (itemEls2.length === 0) return;
+        const dir = e.shiftKey ? -1 : 1;
+        const nextIndex = (activeIndex + dir + itemEls2.length) % itemEls2.length;
+        setActiveIndex(nextIndex);
+        itemEls2[nextIndex]?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, activeIndex, close]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event) => {
+      const isClickInTrigger = dropdownRef.current && dropdownRef.current.contains(event.target);
+      const isClickInMenu = menuRef.current && menuRef.current.contains(event.target);
+      if (!isClickInTrigger && !isClickInMenu) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, close]);
+  useLayoutEffect(() => {
+    if (isOpen && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.bottom,
+        left: rect.left,
+        width: rect.width
+      });
+    } else {
+      setMenuPosition(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleScrollOrResize = (event) => {
+      if (event && event.target && menuRef.current?.contains(event.target)) {
+        return;
+      }
+      close();
+    };
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [isOpen, close]);
+  useLayoutEffect(() => {
+    let raf;
+    if (isOpen) {
+      const itemEls = itemsRef.current.filter(Boolean);
+      if (itemEls.length) {
+        raf = requestAnimationFrame(() => {
+          setActiveIndex(0);
+          itemEls[0]?.focus();
+        });
+      }
+    } else {
+      raf = requestAnimationFrame(() => setActiveIndex(-1));
+    }
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [isOpen]);
+  const registerItem = useCallback((el, index) => {
+    if (typeof index === "number" && index >= 0) {
+      itemsRef.current[index] = el;
+      return;
+    }
+    if (el === null) {
+      itemsRef.current = itemsRef.current.filter((x) => x !== el && x != null);
+      return;
+    }
+    if (!itemsRef.current.includes(el)) itemsRef.current.push(el);
+  }, []);
+  const { title, subtitle, icon, iconSize = "md", triggerSize = size, endIcon } = trigger;
+  const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: "currentColor" }) : null;
+  const endIconNode = endIcon ? /* @__PURE__ */ jsx(Icon, { name: endIcon, size: iconSize, color: "currentColor" }) : null;
+  const getAlignmentStyle = () => {
+    if (!menuPosition) return {};
+    const baseStyle = {
+      top: menuPosition.top + 4,
+      // slightly lower than trigger
+      minWidth: minWidth || void 0,
+      maxWidth: maxWidth || void 0
+    };
+    if (align === "start") {
+      baseStyle.left = menuPosition.left;
+    } else if (align === "end") {
+      baseStyle.right = window.innerWidth - (menuPosition.left + menuPosition.width);
+    } else {
+      baseStyle.left = menuPosition.left + menuPosition.width / 2;
+      baseStyle.transform = "translateX(-50%)";
+    }
+    return baseStyle;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: `inline-block ${className}`, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: triggerRef,
+        variant,
+        style: buttonStyle,
+        onClick: () => isOpen ? close() : open(),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        "aria-controls": isOpen ? "dropdown-menu" : void 0,
+        size: triggerSize,
+        children: /* @__PURE__ */ jsxs("span", { className: `flex items-center ${gapSizes[iconSize]}`, children: [
+          iconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: iconNode }),
+          (title || subtitle) && /* @__PURE__ */ jsxs("span", { className: subtitle ? "text-left" : "", children: [
+            /* @__PURE__ */ jsx("span", { className: subtitle ? "block font-semibold" : "", children: title }),
+            subtitle && /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground font-normal", children: subtitle })
+          ] }),
+          endIconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: endIconNode })
+        ] })
+      }
+    ) }),
+    isOpen && menuPosition && createPortal(
+      /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose, registerItem, minWidth, size }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: "dropdown-menu",
+          ref: menuRef,
+          className: `fixed bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === "sm" ? "min-w-36 text-xs py-1" : "min-w-44"} max-h-80 overflow-y-auto origin-top animate-scaleIn focus:outline-none ${menuClassName}`,
+          style: getAlignmentStyle(),
+          role: "menu",
+          "aria-orientation": "vertical",
+          tabIndex: -1,
+          children
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+Dropdown.displayName = "Dropdown";
+const sizeTextMap = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl"
+};
+const descriptionTextMap = {
+  xs: "text-[10px]",
+  // smaller than xs
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+const sizePaddingMap = {
+  xs: "px-2 py-1",
+  sm: "px-2.5 py-1.5",
+  md: "px-3.5 py-2",
+  lg: "px-4 py-2.5",
+  xl: "px-5 py-3"
+};
+function DropdownItem({
+  children,
+  onSelect,
+  variant = "neutral",
+  disabled = false,
+  className = "",
+  description,
+  icon,
+  iconSize,
+  endIcon,
+  size,
+  selected = false
+}) {
+  const ctx = useContext(DropdownContext);
+  const effectiveSize = size ?? ctx?.size ?? "md";
+  const effectiveIconSize = iconSize ?? effectiveSize;
+  const base = `${sizeTextMap[effectiveSize] || sizeTextMap.md} ${sizePaddingMap[effectiveSize] || sizePaddingMap.md} w-full text-left select-none transition-colors outline-none disabled:opacity-40 disabled:pointer-events-none`;
+  const focus = "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover";
+  const palette = {
+    default: "text-foreground/90 hover:bg-muted active:bg-muted/80",
+    primary: "text-primary hover:bg-primary/15 active:bg-primary/25 focus-visible:ring-primary",
+    accent: "text-accent hover:bg-accent/15 active:bg-accent/25 focus-visible:ring-accent",
+    info: "text-info hover:bg-info/15 active:bg-info/25 focus-visible:ring-info",
+    success: "text-success hover:bg-success/15 active:bg-success/25 focus-visible:ring-success",
+    warning: "text-warning hover:bg-warning/18 active:bg-warning/28 focus-visible:ring-warning",
+    error: "text-error hover:bg-error/15 active:bg-error/25 focus-visible:ring-error"
+  };
+  const selectedPalette = {
+    default: "bg-muted text-foreground hover:bg-muted-hover hover:text-foreground",
+    primary: "bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground",
+    accent: "bg-accent text-accent-foreground hover:bg-accent-hover hover:text-accent-foreground",
+    info: "bg-info text-info-foreground hover:bg-info-hover hover:text-info-foreground",
+    success: "bg-success text-success-foreground hover:bg-success-hover hover:text-success-foreground",
+    warning: "bg-warning text-warning-foreground hover:bg-warning-hover hover:text-warning-foreground",
+    error: "bg-error text-error-foreground hover:bg-error-hover hover:text-error-foreground"
+  };
+  const variantClasses = selected ? selectedPalette[variant] || selectedPalette.default : palette[variant] || palette.default;
+  const hasIcons = icon || endIcon;
+  const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: effectiveIconSize, color: "currentColor" }) : null;
+  const endIconNode = endIcon ? /* @__PURE__ */ jsx(Icon, { name: endIcon, size: effectiveIconSize, color: "currentColor" }) : null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: (el) => ctx?.registerItem?.(el),
+      role: "menuitem",
+      type: "button",
+      disabled,
+      "aria-current": selected ? "true" : void 0,
+      onClick: () => {
+        if (disabled) return;
+        onSelect?.();
+        if (ctx?.autoClose) ctx.requestClose();
+      },
+      className: `${base} ${focus} ${variantClasses} ${hasIcons ? "flex flex-row items-center gap-2.5" : "flex flex-col"} ${className} cursor-pointer`,
+      children: [
+        iconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: iconNode }),
+        /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: `block font-medium leading-snug`, children }),
+          description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `block ${descriptionTextMap[effectiveSize] || descriptionTextMap.md} text-foreground/60 mt-0.5 line-clamp-2`,
+              children: description
+            }
+          )
+        ] }),
+        endIconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: endIconNode })
+      ]
+    }
+  );
+}
+function DropdownSeparator({ className = "" }) {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: `h-px bg-border ${className}` });
+}
+export {
+  DropdownItem,
+  DropdownSeparator,
+  Dropdown as default
+};
+//# sourceMappingURL=dropdown.js.map