@plumile/ui 0.1.55 → 0.1.57

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js

@@ -0,0 +1,63 @@
+import { cx as e } from "../../../theme/tools.js";
+import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
+import { breadcrumb as n, breadcrumbItem as r, breadcrumbList as i, breadcrumbSeparator as a, homeIcon as o, homeLink as s } from "./breadcrumbNavigation.css.js";
+import { BreadcrumbMenuDropdown as c } from "./BreadcrumbMenuDropdown.js";
+import { SidebarHomeSvg as l } from "../../../icons/SidebarHomeSvg.js";
+import { jsx as u } from "react/jsx-runtime";
+import { Link as d } from "@plumile/router";
+//#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.tsx
+var f = (f) => {
+	let { organization: p, group: m, project: h, groupMenu: g, projectMenu: _, className: v } = f, { t: y } = t(), b = y("navigation.breadcrumb.empty.matches"), x = y("navigation.breadcrumb.search.groups"), S = y("navigation.breadcrumb.empty.groups"), C = y("navigation.breadcrumb.menu.group"), w = y("navigation.breadcrumb.search.projects"), T = y("navigation.breadcrumb.empty.projects"), E = y("navigation.breadcrumb.menu.project"), D = [];
+	D.push(/* @__PURE__ */ u("li", {
+		className: r,
+		children: /* @__PURE__ */ u(d, {
+			to: p.to,
+			className: s,
+			"aria-label": `Organization: ${p.name}`,
+			children: /* @__PURE__ */ u(l, {
+				width: 16,
+				height: 16,
+				className: o
+			})
+		})
+	}, "home")), m != null && D.push(/* @__PURE__ */ u("li", {
+		className: r,
+		children: /* @__PURE__ */ u(c, {
+			node: m,
+			menu: g,
+			ariaLabel: C,
+			searchPlaceholder: x,
+			searchAriaLabel: x,
+			emptyLabel: S,
+			emptyMatchesLabel: b
+		})
+	}, "group")), h != null && D.push(/* @__PURE__ */ u("li", {
+		className: r,
+		children: /* @__PURE__ */ u(c, {
+			node: h,
+			menu: _,
+			ariaLabel: E,
+			searchPlaceholder: w,
+			searchAriaLabel: w,
+			emptyLabel: T,
+			emptyMatchesLabel: b
+		})
+	}, "project"));
+	let O = D.flatMap((e, t) => t === 0 ? [e] : [/* @__PURE__ */ u("li", {
+		className: a,
+		"aria-hidden": "true",
+		children: "/"
+	}, `separator-${t}`), e]);
+	return /* @__PURE__ */ u("nav", {
+		className: e(n, v),
+		"aria-label": "Breadcrumb",
+		children: /* @__PURE__ */ u("ol", {
+			className: i,
+			children: O
+		})
+	});
+};
+//#endregion
+export { f as BreadcrumbNavigation };
+
+//# sourceMappingURL=BreadcrumbNavigation.js.map

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigation.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\nimport { Link } from '@plumile/router';\nimport { SidebarHomeSvg } from '../../../icons/SidebarHomeSvg.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport { BreadcrumbMenuDropdown } from './BreadcrumbMenuDropdown.js';\nimport type { BreadcrumbMenuConfig, BreadcrumbNode } from './types.js';\n\ntype Props = {\n  organization: BreadcrumbNode;\n  group?: BreadcrumbNode | null;\n  project?: BreadcrumbNode | null;\n  groupMenu?: BreadcrumbMenuConfig;\n  projectMenu?: BreadcrumbMenuConfig;\n  className?: string;\n};\n\nexport const BreadcrumbNavigation = (props: Props): JSX.Element => {\n  const { organization, group, project, groupMenu, projectMenu, className } =\n    props;\n  const { t } = useUiTranslation();\n  const emptyMatchesLabel = t('navigation.breadcrumb.empty.matches');\n\n  const groupSearchLabel = t('navigation.breadcrumb.search.groups');\n  const groupEmptyLabel = t('navigation.breadcrumb.empty.groups');\n  const groupMenuAriaLabel = t('navigation.breadcrumb.menu.group');\n\n  const projectSearchLabel = t('navigation.breadcrumb.search.projects');\n  const projectEmptyLabel = t('navigation.breadcrumb.empty.projects');\n  const projectMenuAriaLabel = t('navigation.breadcrumb.menu.project');\n  const breadcrumbItems: JSX.Element[] = [];\n\n  breadcrumbItems.push(\n    <li key=\"home\" className={styles.breadcrumbItem}>\n      <Link\n        to={organization.to}\n        className={styles.homeLink}\n        aria-label={`Organization: ${organization.name}`}\n      >\n        <SidebarHomeSvg width={16} height={16} className={styles.homeIcon} />\n      </Link>\n    </li>,\n  );\n\n  if (group != null) {\n    breadcrumbItems.push(\n      <li key=\"group\" className={styles.breadcrumbItem}>\n        <BreadcrumbMenuDropdown\n          node={group}\n          menu={groupMenu}\n          ariaLabel={groupMenuAriaLabel}\n          searchPlaceholder={groupSearchLabel}\n          searchAriaLabel={groupSearchLabel}\n          emptyLabel={groupEmptyLabel}\n          emptyMatchesLabel={emptyMatchesLabel}\n        />\n      </li>,\n    );\n  }\n\n  if (project != null) {\n    breadcrumbItems.push(\n      <li key=\"project\" className={styles.breadcrumbItem}>\n        <BreadcrumbMenuDropdown\n          node={project}\n          menu={projectMenu}\n          ariaLabel={projectMenuAriaLabel}\n          searchPlaceholder={projectSearchLabel}\n          searchAriaLabel={projectSearchLabel}\n          emptyLabel={projectEmptyLabel}\n          emptyMatchesLabel={emptyMatchesLabel}\n        />\n      </li>,\n    );\n  }\n\n  const breadcrumbsWithSeparators = breadcrumbItems.flatMap((item, index) => {\n    if (index === 0) {\n      return [item];\n    }\n    return [\n      <li\n        key={`separator-${index}`}\n        className={styles.breadcrumbSeparator}\n        aria-hidden=\"true\"\n      >\n        /{/* <ChevronRightSvg width={16} height={16} /> */}\n      </li>,\n      item,\n    ];\n  });\n\n  return (\n    <nav className={cx(styles.breadcrumb, className)} aria-label=\"Breadcrumb\">\n      <ol className={styles.breadcrumbList}>{breadcrumbsWithSeparators}</ol>\n    </nav>\n  );\n};\n\nexport type {\n  BreadcrumbNode,\n  BreadcrumbMenuItem,\n  BreadcrumbMenuConfig,\n} from './types.js';\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAAwB,MAA8B;CACjE,IAAM,EAAE,iBAAc,UAAO,YAAS,cAAW,gBAAa,iBAC5D,GACI,EAAE,SAAM,GAAkB,EAC1B,IAAoB,EAAE,sCAAsC,EAE5D,IAAmB,EAAE,sCAAsC,EAC3D,IAAkB,EAAE,qCAAqC,EACzD,IAAqB,EAAE,mCAAmC,EAE1D,IAAqB,EAAE,wCAAwC,EAC/D,IAAoB,EAAE,uCAAuC,EAC7D,IAAuB,EAAE,qCAAqC,EAC9D,IAAiC,EAAE;AA8BzC,CA5BA,EAAgB,KACd,kBAAC,MAAD;EAAe,WAAW;YACxB,kBAAC,GAAD;GACE,IAAI,EAAa;GACjB,WAAW;GACX,cAAY,iBAAiB,EAAa;aAE1C,kBAAC,GAAD;IAAgB,OAAO;IAAI,QAAQ;IAAI,WAAW;IAAmB,CAAA;GAChE,CAAA;EACJ,EARG,OAQH,CACN,EAEG,KAAS,QACX,EAAgB,KACd,kBAAC,MAAD;EAAgB,WAAW;YACzB,kBAAC,GAAD;GACE,MAAM;GACN,MAAM;GACN,WAAW;GACX,mBAAmB;GACnB,iBAAiB;GACjB,YAAY;GACO;GACnB,CAAA;EACC,EAVG,QAUH,CACN,EAGC,KAAW,QACb,EAAgB,KACd,kBAAC,MAAD;EAAkB,WAAW;YAC3B,kBAAC,GAAD;GACE,MAAM;GACN,MAAM;GACN,WAAW;GACX,mBAAmB;GACnB,iBAAiB;GACjB,YAAY;GACO;GACnB,CAAA;EACC,EAVG,UAUH,CACN;CAGH,IAAM,IAA4B,EAAgB,SAAS,GAAM,MAC3D,MAAU,IACL,CAAC,EAAK,GAER,CACL,kBAAC,MAAD;EAEE,WAAW;EACX,eAAY;YACb;EAEI,EALE,aAAa,IAKf,EACL,EACD,CACD;AAEF,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAmB,EAAU;EAAE,cAAW;YAC3D,kBAAC,MAAD;GAAI,WAAW;aAAwB;GAA+B,CAAA;EAClE,CAAA"}

package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                    */
+//#region src/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.ts
+var e = "_1u1q1110 txvbqb9io txvbqbco", t = "_1u1q1111 txvbqb9io txvbqbco txvbqbfax txvbqbfbo txvbqbl9f txvbqbaof", n = "_1u1q1112 txvbqb9io txvbqbco", r = "_1u1q1113 txvbqb9io txvbqbai6 txvbqbcf txvbqbanx", i = "_1u1q1114 txvbqb8f txvbqbamo txvbqb66 txvbqbeef txvbqbv8t txvbqbegx", a = "_1u1q1115 txvbqb9jf txvbqbco txvbqbao6", o = "_1u1q1116 txvbqbv4z txvbqb77 txvbqb6x txvbqb7k", s = "_1u1q1117 txvbqb2w txvbqbv8p", c = "_1u1q1119 _1u1q1118 txvbqb78 txvbqb6x txvbqb7k txvbqb9jf txvbqbco txvbqb96 txvbqbamo txvbqbv8p txvbqb3b txvbqbf3x", l = "_1u1q111a txvbqb9io txvbqbco txvbqbdnx txvbqbv8t txvbqb8x txvbqbamx", u = "_1u1q111c _1u1q111b txvbqb78 txvbqb6x txvbqb7k txvbqb9io txvbqbco txvbqbdnx txvbqbtwo txvbqbc66 txvbqbk6f txvbqbjho txvbqb1rf txvbqb12f txvbqb1px txvbqbv31 txvbqbv8p txvbqbv txvbqbl9f", d = "_1u1q111d txvbqb9jf txvbqbco txvbqbdnx txvbqbc6o txvbqb1qx txvbqbv8p txvbqb78 txvbqb6x txvbqb7k", f = "_1u1q111e txvbqbv4z", p = "_1u1q111h _1u1q111g txvbqbl9x txvbqbkcx txvbqbjcf txvbqb8r6 txvbqb6l", m = "_1u1q111i txvbqb9io txvbqbai6 txvbqbaof", h = "_1u1q111j txvbqb9io txvbqbco txvbqbdoo", g = "_1u1q111k txvbqb8o txvbqbamo txvbqb66 txvbqbeef txvbqbv8t", _ = "_1u1q111l txvbqb9io", v = "_1u1q111m txvbqbfax txvbqbfbo txvbqbl9f txvbqb9io txvbqbai6 txvbqbanx txvbqbirx txvbqbl7o", y = "_1u1q111o _1u1q111n txvbqb78 txvbqb6w txvbqb7k txvbqb9io txvbqbai6 txvbqbanx txvbqboif txvbqbnv6 txvbqbp5f txvbqblx6 txvbqb1rf txvbqb3b txvbqbv8p", b = "_1u1q111p txvbqbv2j txvbqbv7z", x = "_1u1q111q txvbqb8x txvbqbamo", S = "_1u1q111r txvbqb8o txvbqbv8r", C = "_1u1q111s txvbqbl9x txvbqb8x txvbqbv8r";
+//#endregion
+export { e as breadcrumb, o as breadcrumbChevron, u as breadcrumbChevronButton, s as breadcrumbChevronOpen, n as breadcrumbItem, i as breadcrumbLabel, c as breadcrumbLink, t as breadcrumbList, a as breadcrumbNameRow, r as breadcrumbSection, l as breadcrumbSeparator, f as homeIcon, d as homeLink, m as popoverContent, C as popoverEmpty, h as popoverHeader, y as popoverItem, b as popoverItemActive, S as popoverItemDescription, x as popoverItemName, v as popoverList, p as popoverPanel, _ as popoverSearch, g as popoverTitle };
+
+//# sourceMappingURL=breadcrumbNavigation.css.js.map

package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbNavigation.css.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.ts"],"sourcesContent":["import { keyframes, style } from '@vanilla-extract/css';\n\nimport { vars } from '../../../theme/themeContract.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nconst displayInlineFlex = 'inline-flex';\n\nexport const breadcrumb = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const breadcrumbList = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n  gap: 3,\n});\n\nexport const breadcrumbItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const breadcrumbSection = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: 1,\n});\n\nexport const breadcrumbLabel = sprinkles({\n  fontSize: '2xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n  letterSpacing: 'caps',\n  color: 'textMuted',\n  lineHeight: 1,\n});\n\nexport const breadcrumbNameRow = sprinkles({\n  display: displayInlineFlex,\n  alignItems: 'center',\n  gap: 2,\n});\n\nexport const breadcrumbChevron = sprinkles({\n  color: 'current',\n  transitionProperty: 'default',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const breadcrumbChevronOpen = sprinkles({\n  rotate: 180,\n  color: 'text',\n});\n\nexport const breadcrumbLink = style([\n  sprinkles({\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    display: displayInlineFlex,\n    alignItems: 'center',\n    fontSize: 'base',\n    fontWeight: 'semibold',\n    color: 'text',\n    textDecoration: 'none',\n    lineHeight: 1.2,\n  }),\n  {\n    ':hover': {\n      color: vars.colors.primary,\n      textDecoration: 'none',\n    },\n    ':focus': {\n      outline: 'none',\n      color: vars.colors.primary,\n    },\n  },\n]);\n\nexport const breadcrumbSeparator = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'textMuted',\n  fontSize: 'sm',\n  fontWeight: 'bold',\n});\n\nexport const breadcrumbChevronButton = style([\n  sprinkles({\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    minWidth: 6,\n    minHeight: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'backgroundSecondary',\n    color: 'text',\n    cursor: 'pointer',\n    padding: 0,\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.backgroundTertiary,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const homeLink = sprinkles({\n  display: displayInlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 8,\n  borderRadius: 'sm',\n  color: 'text',\n  transitionProperty: 'colors',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const homeIcon = sprinkles({\n  color: 'current',\n});\n\nconst popoverIn = keyframes({\n  '0%': {\n    opacity: 0,\n    transform: 'translateY(-6px) scale(0.98)',\n  },\n  '100%': {\n    opacity: 1,\n    transform: 'translateY(0) scale(1)',\n  },\n});\n\nexport const popoverPanel = style([\n  sprinkles({\n    padding: 2,\n    minWidth: 64,\n    maxWidth: '26rem',\n    boxShadow: 'inkGlow',\n    transformOrigin: 'topLeft',\n  }),\n  {\n    animation: `${popoverIn} 160ms ease`,\n  },\n]);\n\nexport const popoverContent = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const popoverHeader = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n});\n\nexport const popoverTitle = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n  letterSpacing: 'caps',\n  color: 'textMuted',\n});\n\nexport const popoverSearch = sprinkles({\n  display: 'flex',\n});\n\nexport const popoverList = sprinkles({\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  maxHeight: 64,\n  overflowY: 'auto',\n});\n\nexport const popoverItem = style([\n  sprinkles({\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    paddingRight: 3,\n    paddingLeft: 3,\n    paddingTop: 2,\n    paddingBottom: 2,\n    borderRadius: 'md',\n    textDecoration: 'none',\n    color: 'text',\n  }),\n  {\n    ':hover': {\n      backgroundColor: vars.colors.backgroundSecondary,\n      color: vars.colors.text,\n    },\n    ':focus': {\n      outline: `2px solid ${vars.colors.primaryLight}`,\n      outlineOffset: 2,\n    },\n  },\n]);\n\nexport const popoverItemActive = sprinkles({\n  backgroundColor: 'primaryLight',\n  color: 'primary',\n});\n\nexport const popoverItemName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n});\n\nexport const popoverItemDescription = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n});\n\nexport const popoverEmpty = sprinkles({\n  padding: 2,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/card/Card.css.js

@@ -1,10 +1,8 @@
-/* empty css                                          */
-/* empty css                        */
-var v = "_1hz8mkr0 txvbqbu6f txvbqb1rx txvbqbv4d", r = "_1hz8mkr1 txvbqb9io txvbqbco txvbqbdoo txvbqblaf", x = "_1hz8mkr2 txvbqb96 txvbqbamo txvbqbv8p", q = "_1hz8mkr3 txvbqblax";
-export {
-  v as card,
-  q as content,
-  r as header,
-  x as title
-};
-//# sourceMappingURL=Card.css.js.map
+/* empty css                                      */
+/* empty css                    */
+//#region src/atomic/molecules/card/Card.css.ts
+var e = "_1hz8mkr0 txvbqbu6f txvbqb1rx txvbqbv4d", t = "_1hz8mkr1 txvbqb9io txvbqbco txvbqbdoo txvbqblaf", n = "_1hz8mkr2 txvbqb96 txvbqbamo txvbqbv8p", r = "_1hz8mkr3 txvbqblax";
+//#endregion
+export { e as card, r as content, t as header, n as title };
+
+//# sourceMappingURL=Card.css.js.map

package/lib/esm/atomic/molecules/card/Card.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"Card.css.js","names":[],"sources":["../../../../../src/atomic/molecules/card/Card.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const card = sprinkles({\n  width: 'full',\n  borderRadius: 'xl',\n  backgroundColor: 'brandSecondaryOrange-20',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: 4,\n});\n\nexport const title = sprinkles({\n  fontSize: 'base',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const content = sprinkles({\n  padding: 6,\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/card/Card.js

@@ -1,18 +1,25 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useMemo as h } from "react";
-import { header as p, title as u, card as N, content as f } from "./Card.css.js";
-import { cx as n } from "../../../theme/tools.js";
-const $ = (o) => {
-  const { title: e, children: a, headerActions: s, className: c, contentClassName: l } = o, i = h(() => e == null ? null : /* @__PURE__ */ t("div", { className: p, children: [
-    /* @__PURE__ */ r("span", { className: u, children: e }),
-    s
-  ] }), [s, e]), m = n(N, c), d = n(f, l);
-  return /* @__PURE__ */ t("div", { className: m, children: [
-    i,
-    /* @__PURE__ */ r("div", { className: d, children: a })
-  ] });
+import { cx as e } from "../../../theme/tools.js";
+import { card as t, content as n, header as r, title as i } from "./Card.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+//#region src/atomic/molecules/card/Card.tsx
+var c = (c) => {
+	let { title: l, children: u, headerActions: d, className: f, contentClassName: p } = c, m = s(() => l == null ? null : /* @__PURE__ */ o("div", {
+		className: r,
+		children: [/* @__PURE__ */ a("span", {
+			className: i,
+			children: l
+		}), d]
+	}), [d, l]);
+	return /* @__PURE__ */ o("div", {
+		className: e(t, f),
+		children: [m, /* @__PURE__ */ a("div", {
+			className: e(n, p),
+			children: u
+		})]
+	});
 };
-export {
-  $ as Card
-};
-//# sourceMappingURL=Card.js.map
+//#endregion
+export { c as Card };
+
+//# sourceMappingURL=Card.js.map

package/lib/esm/atomic/molecules/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../src/atomic/molecules/card/Card.tsx"],"sourcesContent":["import React, { type JSX, useMemo } from 'react';\n\nimport * as styles from './Card.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype Props = {\n  headerActions?: React.ReactNode;\n  title?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport const Card = (props: Props): JSX.Element => {\n  const { title, children, headerActions, className, contentClassName } = props;\n\n  const header = useMemo(() => {\n    if (title == null) {\n      return null;\n    }\n\n    return (\n      <div className={styles.header}>\n        <span className={styles.title}>{title}</span>\n        {headerActions}\n      </div>\n    );\n  }, [headerActions, title]);\n\n  const rootClass = cx(styles.card, className);\n  const contentClass = cx(styles.content, contentClassName);\n\n  return (\n    <div className={rootClass}>\n      {header}\n      <div className={contentClass}>{children}</div>\n    </div>\n  );\n};\n"],"names":["Card","props","title","children","headerActions","className","contentClassName","header","useMemo","jsxs","styles.header","jsx","styles.title","rootClass","cx","styles.card","contentClass","styles.content"],"mappings":";;;;AAaO,MAAMA,IAAO,CAACC,MAA8B;AACjD,QAAM,EAAA,OAAEC,GAAO,UAAAC,GAAU,eAAAC,GAAe,WAAAC,GAAW,kBAAAC,MAAqBL,GAElEM,IAASC,EAAQ,MACjBN,KAAS,OACJ,OAIP,gBAAAO,EAAC,OAAA,EAAI,WAAWC,GACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,GAAe,UAAAV,GAAM;AAAA,IACrCE;AAAA,EAAA,GACH,GAED,CAACA,GAAeF,CAAK,CAAC,GAEnBW,IAAYC,EAAGC,GAAaV,CAAS,GACrCW,IAAeF,EAAGG,GAAgBX,CAAgB;AAExD,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWI,GACb,UAAA;AAAA,IAAAN;AAAAA,IACD,gBAAAI,EAAC,OAAA,EAAI,WAAWK,GAAe,UAAAb,EAAA,CAAS;AAAA,EAAA,GAC1C;AAEJ;"}
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../../src/atomic/molecules/card/Card.tsx"],"sourcesContent":["import React, { type JSX, useMemo } from 'react';\n\nimport * as styles from './Card.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype Props = {\n  headerActions?: React.ReactNode;\n  title?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport const Card = (props: Props): JSX.Element => {\n  const { title, children, headerActions, className, contentClassName } = props;\n\n  const header = useMemo(() => {\n    if (title == null) {\n      return null;\n    }\n\n    return (\n      <div className={styles.header}>\n        <span className={styles.title}>{title}</span>\n        {headerActions}\n      </div>\n    );\n  }, [headerActions, title]);\n\n  const rootClass = cx(styles.card, className);\n  const contentClass = cx(styles.content, contentClassName);\n\n  return (\n    <div className={rootClass}>\n      {header}\n      <div className={contentClass}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAaA,IAAa,KAAQ,MAA8B;CACjD,IAAM,EAAE,OAAA,GAAO,aAAU,kBAAe,cAAW,wBAAqB,GAElE,IAAS,QACT,KAAS,OACJ,OAIP,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,QAAD;GAAM,WAAW;aAAe;GAAa,CAAA,EAC5C,EACG;KAEP,CAAC,GAAe,EAAM,CAAC;AAK1B,QACE,kBAAC,OAAD;EAAK,WAJW,EAAG,GAAa,EAAU;YAI1C,CACG,GACD,kBAAC,OAAD;GAAK,WALY,EAAG,GAAgB,EAAiB;GAKtB;GAAe,CAAA,CAC1C"}

package/lib/esm/atomic/molecules/dropdown/Dropdown.js

@@ -0,0 +1,149 @@
+import { cx as e } from "../../../theme/tools.js";
+import { container as t, content as n, contentPositioned as r } from "./dropdown.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { cloneElement as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { createPortal as h } from "react-dom";
+//#region src/atomic/molecules/dropdown/Dropdown.tsx
+var g = s(null), _ = () => {
+	let e = u(g);
+	if (e == null) throw Error("useDropdown must be used within a <Dropdown />");
+	return e;
+}, v = (e) => typeof e != "object" || !e ? !1 : e.$$typeof === Symbol.for("react.forward_ref"), y = ({ trigger: s, children: u, className: _, contentClassName: y, placement: b = "bottom-start", offset: x = 4, matchTriggerWidth: S = !0, open: C, defaultOpen: w = !1, onOpenChange: T, closeOnItemClick: E = !1, portalContainer: D, ariaLabel: O }) => {
+	let k = C != null, [A, j] = m(w), M = A;
+	k && (M = !!C);
+	let N = p(null), P = p(null), F = p(null), [I, L] = m(null), R = p([]), z = l((e) => {
+		k || j(e), T?.(e);
+	}, [k, T]), B = l(() => {
+		z(!M);
+	}, [M, z]), V = l(() => {
+		z(!1);
+	}, [z]), ee = l(() => {
+		z(!0);
+	}, [z]), H = l(() => {
+		let e = P.current, t = F.current;
+		if (e == null || t == null) return;
+		let n = e.getBoundingClientRect(), r = 0, i = 0;
+		switch (b) {
+			case "bottom-start":
+				r = n.bottom + x, i = n.left;
+				break;
+			case "bottom-end":
+				r = n.bottom + x, i = n.right - t.offsetWidth;
+				break;
+			case "top-start":
+				r = n.top - t.offsetHeight - x, i = n.left;
+				break;
+			case "top-end":
+				r = n.top - t.offsetHeight - x, i = n.right - t.offsetWidth;
+				break;
+			default: r = n.bottom + x, i = n.left;
+		}
+		let a = window.innerWidth, o = window.innerHeight, s;
+		S && (s = n.width);
+		let c = s ?? t.offsetWidth;
+		i + c > a - 4 && (i = Math.max(4, a - c - 4)), i < 4 && (i = 4);
+		let l = t.offsetHeight;
+		if (r + l > o - 4) if (b.startsWith("bottom")) {
+			let e = n.top - l - x;
+			r = e >= 4 ? e : Math.max(4, o - l - 4);
+		} else r = Math.max(4, o - l - 4);
+		r < 4 && (r = 4), L({
+			top: r,
+			left: i,
+			width: s
+		});
+	}, [
+		b,
+		x,
+		S
+	]);
+	f(() => {
+		M && H();
+	}, [
+		M,
+		H,
+		u
+	]), d(() => {
+		if (!M) return;
+		let e = () => {
+			H();
+		};
+		window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), R.current.push(() => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		});
+	}, [M, H]), d(() => {
+		if (!M) return;
+		let e = (e) => {
+			let t = e.target;
+			N.current != null && F.current != null && !N.current.contains(t) && !F.current.contains(t) && V();
+		}, t = (e) => {
+			e.key === "Escape" && (V(), P.current?.focus());
+		};
+		document.addEventListener("mousedown", e), document.addEventListener("keydown", t), R.current.push(() => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		});
+	}, [M, V]), d(() => {
+		M && (F.current?.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+	}, [M]), d(() => {
+		if (!M || !E) return;
+		let e = (e) => {
+			F.current?.contains(e.target) && V();
+		};
+		document.addEventListener("click", e, { capture: !0 }), R.current.push(() => {
+			document.removeEventListener("click", e, { capture: !0 });
+		});
+	}, [
+		M,
+		E,
+		V
+	]), d(() => () => {
+		R.current.forEach((e) => {
+			e();
+		}), R.current = [];
+	}, []);
+	let U = s;
+	if (typeof s == "function" && (U = s(M)), !c(U)) throw Error("Dropdown trigger must be a React element.");
+	let W = typeof U.type == "string", G = W && U.type === "button";
+	if (!(W || typeof U.type == "function" || v(U.type))) throw Error("Dropdown trigger must be a DOM element or component that accepts a ref.");
+	let K = U.props.ref ?? U.ref, q = (e) => {
+		P.current = e, typeof K == "function" ? K(e) : K != null && (K.current = e);
+	}, J = U.props, Y = (e) => {
+		J.onClick?.(e), !e.defaultPrevented && B();
+	}, X = (e) => {
+		J.onKeyDown?.(e), !e.defaultPrevented && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), B());
+	}, Z = {
+		onClick: Y,
+		"aria-haspopup": "menu",
+		"aria-expanded": M
+	};
+	O != null && O !== "" && (Z["aria-label"] = O), G ? J.type ?? (Z.type = "button") : (Z.onKeyDown = X, J.role ?? (Z.role = "button"), J.tabIndex ?? (Z.tabIndex = 0)), Z.ref = q;
+	let Q = {};
+	I != null && (Q = {
+		top: I.top,
+		left: I.left,
+		width: I.width
+	});
+	let te = D ?? document.body, ne = {
+		close: V,
+		open: ee,
+		isOpen: M
+	}, $ = null;
+	return M && ($ = h(/* @__PURE__ */ i("div", {
+		ref: F,
+		role: "menu",
+		className: e(n, r, y),
+		style: Q,
+		children: u
+	}), te)), /* @__PURE__ */ a(g.Provider, {
+		value: ne,
+		children: [/* @__PURE__ */ i("div", {
+			className: e(t, _),
+			ref: N,
+			children: o(U, Z)
+		}), $]
+	});
+};
+//#endregion
+export { y as Dropdown, _ as useDropdown };
+
+//# sourceMappingURL=Dropdown.js.map

package/lib/esm/atomic/molecules/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useLayoutEffect,\n  useCallback,\n  type ReactNode,\n  type ReactElement,\n  type JSX,\n  type Ref,\n  type MutableRefObject,\n  type HTMLAttributes,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  createContext,\n  useContext,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport * as classes from './dropdown.css.js';\nimport { cx } from '../../../theme/tools.js';\n\n// Types\nexport type DropdownPlacement =\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top-end';\n\ninterface DropdownContextValue {\n  close: () => void;\n  open: () => void;\n  isOpen: boolean;\n}\n\nconst DropdownContext = createContext<DropdownContextValue | null>(null);\n/**\n * Access the nearest Dropdown context. Throws if used outside a <Dropdown />.\n */\nexport const useDropdown = (): DropdownContextValue => {\n  const ctx = useContext(DropdownContext);\n  if (ctx == null) {\n    throw new Error('useDropdown must be used within a <Dropdown />');\n  }\n  return ctx;\n};\n\nexport interface DropdownProps {\n  trigger: ReactElement | ((isOpen: boolean) => ReactElement);\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  placement?: DropdownPlacement;\n  offset?: number;\n  matchTriggerWidth?: boolean;\n  open?: boolean; // controlled\n  defaultOpen?: boolean; // uncontrolled\n  onOpenChange?: (open: boolean) => void;\n  closeOnItemClick?: boolean;\n  portalContainer?: HTMLElement | null;\n  // Accessible label if trigger is an icon only\n  ariaLabel?: string;\n}\n\ninterface PositionState {\n  top: number;\n  left: number;\n  width?: number;\n}\n\nconst isForwardRefComponent = (type: unknown): boolean => {\n  if (type == null || typeof type !== 'object') {\n    return false;\n  }\n  return (\n    (type as { $$typeof?: symbol }).$$typeof === Symbol.for('react.forward_ref')\n  );\n};\n\n/**\n * A scalable, portal-based dropdown component with basic collision handling,\n * controlled/uncontrolled modes, accessibility attributes, and optional\n * trigger width matching. Content is rendered in a React portal (default: document.body).\n */\nexport const Dropdown = ({\n  trigger,\n  children,\n  className,\n  contentClassName,\n  placement = 'bottom-start',\n  offset = 4,\n  matchTriggerWidth = true,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  closeOnItemClick = false,\n  portalContainer,\n  ariaLabel,\n}: DropdownProps): JSX.Element => {\n  const isControlled = open != null;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  let isOpen = uncontrolledOpen;\n  if (isControlled) {\n    isOpen = Boolean(open);\n  }\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<PositionState | null>(null);\n  // Accumulate manual cleanups for effects where returning a function violates lint rules.\n  const cleanupRef = useRef<(() => void)[]>([]);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next);\n      }\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const toggle = useCallback(() => {\n    setOpen(!isOpen);\n  }, [isOpen, setOpen]);\n  const close = useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n  const openFn = useCallback(() => {\n    setOpen(true);\n  }, [setOpen]);\n\n  // Positioning logic\n  const computePosition = useCallback(() => {\n    const triggerEl = triggerRef.current;\n    const contentEl = contentRef.current;\n    if (triggerEl == null) {\n      return;\n    }\n    if (contentEl == null) {\n      return;\n    }\n\n    const rect = triggerEl.getBoundingClientRect();\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case 'bottom-start':\n        top = rect.bottom + offset;\n        left = rect.left;\n        break;\n      case 'bottom-end':\n        top = rect.bottom + offset;\n        left = rect.right - contentEl.offsetWidth;\n        break;\n      case 'top-start':\n        top = rect.top - contentEl.offsetHeight - offset;\n        left = rect.left;\n        break;\n      case 'top-end':\n        top = rect.top - contentEl.offsetHeight - offset;\n        left = rect.right - contentEl.offsetWidth;\n        break;\n      default:\n        top = rect.bottom + offset;\n        left = rect.left;\n    }\n\n    // Keep within viewport (basic collision handling)\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let width: number | undefined;\n    if (matchTriggerWidth) {\n      width = rect.width;\n    }\n    const contentWidth = width ?? contentEl.offsetWidth;\n\n    if (left + contentWidth > vw - 4) {\n      left = Math.max(4, vw - contentWidth - 4);\n    }\n    if (left < 4) left = 4;\n    const contentHeight = contentEl.offsetHeight;\n    if (top + contentHeight > vh - 4) {\n      // Try flip to top if bottom overflows and initial was bottom\n      if (placement.startsWith('bottom')) {\n        const flippedTop = rect.top - contentHeight - offset;\n        if (flippedTop >= 4) {\n          top = flippedTop;\n        } else {\n          top = Math.max(4, vh - contentHeight - 4);\n        }\n      } else {\n        top = Math.max(4, vh - contentHeight - 4);\n      }\n    }\n    if (top < 4) top = 4;\n\n    setPosition({ top, left, width });\n  }, [placement, offset, matchTriggerWidth]);\n\n  useLayoutEffect(() => {\n    if (isOpen) computePosition();\n  }, [isOpen, computePosition, children]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handle = () => {\n      computePosition();\n    };\n    window.addEventListener('resize', handle);\n    window.addEventListener('scroll', handle, true);\n    const cleanup = () => {\n      window.removeEventListener('resize', handle);\n      window.removeEventListener('scroll', handle, true);\n    };\n    cleanupRef.current.push(cleanup);\n  }, [isOpen, computePosition]);\n\n  // Outside click & Escape\n  useEffect(() => {\n    if (!isOpen) return;\n    const onDocMouseDown = (e: globalThis.MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        containerRef.current != null &&\n        contentRef.current != null &&\n        !containerRef.current.contains(target) &&\n        !contentRef.current.contains(target)\n      ) {\n        close();\n      }\n    };\n    const onKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        close();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('mousedown', onDocMouseDown);\n    document.addEventListener('keydown', onKey);\n    const cleanup = () => {\n      document.removeEventListener('mousedown', onDocMouseDown);\n      document.removeEventListener('keydown', onKey);\n    };\n    cleanupRef.current.push(cleanup);\n  }, [isOpen, close]);\n\n  // Keyboard navigation basic (ArrowDown focuses first focusable)\n  useEffect(() => {\n    if (!isOpen) return;\n    const firstFocusable = contentRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    firstFocusable?.focus();\n  }, [isOpen]);\n\n  // Close on item click if enabled\n  useEffect(() => {\n    if (!isOpen || !closeOnItemClick) return;\n    const handler = (e: globalThis.MouseEvent) => {\n      if (contentRef.current?.contains(e.target as Node)) {\n        close();\n      }\n    };\n    document.addEventListener('click', handler, { capture: true });\n    // Explicit cleanup without returning (lint rule forbids returning arrow fn)\n    const cleanup = () => {\n      document.removeEventListener('click', handler, { capture: true });\n    };\n    // Store in ref to run on unmount / dependency change\n    cleanupRef.current.push(cleanup);\n  }, [isOpen, closeOnItemClick, close]);\n  // Run accumulated cleanups on unmount\n  useEffect(() => {\n    return () => {\n      cleanupRef.current.forEach((fn) => {\n        fn();\n      });\n      cleanupRef.current = [];\n    };\n  }, []);\n\n  let triggerElement = trigger;\n  if (typeof trigger === 'function') {\n    triggerElement = trigger(isOpen);\n  }\n\n  if (!isValidElement(triggerElement)) {\n    throw new Error('Dropdown trigger must be a React element.');\n  }\n\n  const isHostElement = typeof triggerElement.type === 'string';\n  const isButtonElement = isHostElement && triggerElement.type === 'button';\n  const canAttachRef =\n    isHostElement ||\n    typeof triggerElement.type === 'function' ||\n    isForwardRefComponent(triggerElement.type);\n\n  if (!canAttachRef) {\n    throw new Error(\n      'Dropdown trigger must be a DOM element or component that accepts a ref.',\n    );\n  }\n\n  const triggerElementRef =\n    (triggerElement.props as { ref?: Ref<HTMLElement> }).ref ??\n    (triggerElement as ReactElement & { ref?: Ref<HTMLElement> }).ref;\n  const setTriggerRef = (node: HTMLElement | null) => {\n    triggerRef.current = node;\n    if (typeof triggerElementRef === 'function') {\n      triggerElementRef(node);\n    } else if (triggerElementRef != null) {\n      (triggerElementRef as MutableRefObject<HTMLElement | null>).current =\n        node;\n    }\n  };\n\n  const triggerProps = triggerElement.props as HTMLAttributes<HTMLElement> & {\n    type?: string;\n  };\n\n  const handleTriggerClick = (event: ReactMouseEvent<HTMLElement>) => {\n    triggerProps.onClick?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    toggle();\n  };\n\n  const handleTriggerKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {\n    triggerProps.onKeyDown?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      toggle();\n    }\n  };\n\n  const mergedTriggerProps: Record<string, unknown> = {\n    onClick: handleTriggerClick,\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen,\n  };\n\n  if (ariaLabel != null && ariaLabel !== '') {\n    mergedTriggerProps['aria-label'] = ariaLabel;\n  }\n\n  if (isButtonElement) {\n    if (triggerProps.type == null) {\n      mergedTriggerProps.type = 'button';\n    }\n  } else {\n    mergedTriggerProps.onKeyDown = handleTriggerKeyDown;\n    if (triggerProps.role == null) {\n      mergedTriggerProps.role = 'button';\n    }\n    if (triggerProps.tabIndex == null) {\n      mergedTriggerProps.tabIndex = 0;\n    }\n  }\n\n  mergedTriggerProps.ref = setTriggerRef;\n\n  let contentStyles: React.CSSProperties = {};\n  if (position != null) {\n    contentStyles = {\n      top: position.top,\n      left: position.left,\n      width: position.width,\n    };\n  }\n\n  const portalTarget = portalContainer ?? document.body;\n\n  const contextValue: DropdownContextValue = {\n    close,\n    open: openFn,\n    isOpen,\n  };\n\n  let dropdownContent: JSX.Element | null = null;\n  if (isOpen) {\n    dropdownContent = createPortal(\n      <div\n        ref={contentRef}\n        role=\"menu\"\n        className={cx(\n          classes.content,\n          classes.contentPositioned,\n          contentClassName,\n        )}\n        style={contentStyles}\n      >\n        {children}\n      </div>,\n      portalTarget,\n    );\n  }\n\n  return (\n    <DropdownContext.Provider value={contextValue}>\n      <div className={cx(classes.container, className)} ref={containerRef}>\n        {cloneElement(triggerElement, mergedTriggerProps)}\n      </div>\n      {dropdownContent}\n    </DropdownContext.Provider>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/atomic/molecules/dropdown/dropdown.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                        */
+//#region src/atomic/molecules/dropdown/dropdown.css.ts
+var e = "mr2gir0 txvbqbpsf", t = "mr2gir1 txvbqbuzn txvbqb1rx txvbqbuvx txvbqbl6f", n = "mr2gir2 txvbqbpso txvbqbt6x txvbqbdpf", r = "mr2gir3 txvbqb9hx", i = "mr2gir4 txvbqbl3f", a = "mr2gir5 txvbqbfax txvbqbfbo txvbqbl9f", o = "mr2gir6 txvbqbv";
+//#endregion
+export { e as container, t as content, n as contentPositioned, i as focusOutlineReset, r as hidden, a as menu, o as menuItem };
+
+//# sourceMappingURL=dropdown.css.js.map

package/lib/esm/atomic/molecules/dropdown/dropdown.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.css.js","names":[],"sources":["../../../../../src/atomic/molecules/dropdown/dropdown.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\n// Container only wraps the trigger now; menu content is portaled to body.\nexport const container = sprinkles({\n  position: 'relative',\n});\n\n// Base visual styling for the dropdown content. Position (top/left) is applied inline.\nexport const content = sprinkles({\n  backgroundColor: 'white',\n  borderRadius: 'xl',\n  zIndex: 'modal',\n  overflow: 'hidden',\n});\n\nexport const contentPositioned = sprinkles({\n  position: 'fixed',\n  top: 0,\n  left: 0,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const focusOutlineReset = sprinkles({\n  outline: 'none',\n});\n\nexport const menu = sprinkles({\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n});\n\nexport const menuItem = sprinkles({\n  cursor: 'pointer',\n});\n"],"mappings":""}

package/lib/esm/atomic/molecules/form-actions/FormActions.js

@@ -0,0 +1,32 @@
+import { useUiTranslation as e } from "../../../i18n/useUiTranslation.js";
+import { Button as t } from "../../atoms/button/Button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/atomic/molecules/form-actions/FormActions.tsx
+var i = ({ onCancel: i, cancelLabel: a, submitLabel: o, submitLoadingLabel: s, isSubmitting: c = !1, submitDisabled: l = !1, className: u, renderSubmitContent: d, submitButtonProps: f, cancelButtonProps: p }) => {
+	let { t: m } = e(), h = a ?? m("common.actions.cancel"), g = o ?? m("common.actions.save"), _ = s ?? m("common.actions.saving"), { className: v, disabled: y, ...b } = p ?? {}, { className: x, disabled: S, ...C } = f ?? {}, w;
+	w = d == null ? c ? _ : g : d(c);
+	let T = !!y, E = !!l || c || S === !0;
+	return /* @__PURE__ */ r("div", {
+		className: u,
+		children: [/* @__PURE__ */ n(t, {
+			type: "button",
+			variant: "text",
+			onClick: i,
+			disabled: T,
+			className: v,
+			...b,
+			children: h
+		}), /* @__PURE__ */ n(t, {
+			type: "submit",
+			variant: "primary",
+			disabled: E,
+			className: x,
+			...C,
+			children: w
+		})]
+	});
+};
+//#endregion
+export { i as FormActions };
+
+//# sourceMappingURL=FormActions.js.map

package/lib/esm/atomic/molecules/form-actions/FormActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActions.js","names":[],"sources":["../../../../../src/atomic/molecules/form-actions/FormActions.tsx"],"sourcesContent":["import { type ComponentProps, type JSX, type ReactNode } from 'react';\n\nimport { Button } from '../../atoms/button/Button.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nexport type FormActionsProps = {\n  onCancel: () => void;\n  cancelLabel?: string;\n  submitLabel?: string;\n  submitLoadingLabel?: string;\n  isSubmitting?: boolean;\n  submitDisabled?: boolean;\n  className?: string;\n  renderSubmitContent?: (isSubmitting: boolean) => ReactNode;\n  submitButtonProps?: Omit<ComponentProps<typeof Button>, 'children' | 'type'>;\n  cancelButtonProps?: Omit<\n    ComponentProps<typeof Button>,\n    'children' | 'type' | 'variant'\n  >;\n};\n\nexport const FormActions = ({\n  onCancel,\n  cancelLabel,\n  submitLabel,\n  submitLoadingLabel,\n  isSubmitting = false,\n  submitDisabled = false,\n  className,\n  renderSubmitContent,\n  submitButtonProps,\n  cancelButtonProps,\n}: FormActionsProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedCancelLabel = cancelLabel ?? t('common.actions.cancel');\n  const resolvedSubmitLabel = submitLabel ?? t('common.actions.save');\n  const resolvedSubmitLoadingLabel =\n    submitLoadingLabel ?? t('common.actions.saving');\n  const cancelProps = cancelButtonProps ?? {};\n  const {\n    className: cancelClassName,\n    disabled: cancelDisabled,\n    ...restCancelButtonProps\n  } = cancelProps;\n\n  const submitProps = submitButtonProps ?? {};\n  const {\n    className: submitClassName,\n    disabled: submitDisabledOverride,\n    ...restSubmitButtonProps\n  } = submitProps;\n\n  let submitContent: ReactNode;\n\n  if (renderSubmitContent != null) {\n    submitContent = renderSubmitContent(isSubmitting);\n  } else if (isSubmitting) {\n    submitContent = resolvedSubmitLoadingLabel;\n  } else {\n    submitContent = resolvedSubmitLabel;\n  }\n\n  const isCancelDisabled = Boolean(cancelDisabled);\n  const isSubmitDisabled =\n    Boolean(submitDisabled) || isSubmitting || submitDisabledOverride === true;\n\n  return (\n    <div className={className}>\n      <Button\n        type=\"button\"\n        variant=\"text\"\n        onClick={onCancel}\n        disabled={isCancelDisabled}\n        className={cancelClassName}\n        {...restCancelButtonProps}\n      >\n        {resolvedCancelLabel}\n      </Button>\n      <Button\n        type=\"submit\"\n        variant=\"primary\"\n        disabled={isSubmitDisabled}\n        className={submitClassName}\n        {...restSubmitButtonProps}\n      >\n        {submitContent}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;AAqBA,IAAa,KAAe,EAC1B,aACA,gBACA,gBACA,uBACA,kBAAe,IACf,oBAAiB,IACjB,cACA,wBACA,sBACA,2BACmC;CACnC,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAAsB,KAAe,EAAE,wBAAwB,EAC/D,IAAsB,KAAe,EAAE,sBAAsB,EAC7D,IACJ,KAAsB,EAAE,wBAAwB,EAE5C,EACJ,WAAW,GACX,UAAU,GACV,GAAG,MAJe,KAAqB,EAAE,EAQrC,EACJ,WAAW,GACX,UAAU,GACV,GAAG,MAJe,KAAqB,EAAE,EAOvC;AAEJ,CACE,IADE,KAAuB,OAEhB,IACO,IAEA,IAJA,EAAoB,EAAa;CAOnD,IAAM,IAAmB,EAAQ,GAC3B,IACJ,EAAQ,KAAmB,KAAgB,MAA2B;AAExE,QACE,kBAAC,OAAD;EAAgB;YAAhB,CACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,SAAS;GACT,UAAU;GACV,WAAW;GACX,GAAI;aAEH;GACM,CAAA,EACT,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,UAAU;GACV,WAAW;GACX,GAAI;aAEH;GACM,CAAA,CACL"}

package/lib/esm/atomic/molecules/tabs/Tabs.js

@@ -1,34 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useLocation as k, Link as L } from "@plumile/router";
-import { container as h, tabRecipe as v } from "./tabs.css.js";
-const x = L, R = (s) => {
-  const { items: n, ariaLabel: o } = s, { pathname: c } = k();
-  return /* @__PURE__ */ r("div", { role: "tablist", "aria-label": o, className: h, children: n.map((d) => {
-    const { disabled: e, id: b, label: m, to: a } = d, f = c === a;
-    let i;
-    e && (i = !0);
-    let t = "default", l;
-    e ? (t = "disabled", l = -1) : f && (t = "active");
-    const p = (u) => {
-      e && u.preventDefault();
-    };
-    return /* @__PURE__ */ r(
-      x,
-      {
-        exact: !0,
-        "aria-disabled": i,
-        className: v({ state: t }),
-        role: "tab",
-        to: a,
-        tabIndex: l,
-        onClick: p,
-        children: m
-      },
-      b
-    );
-  }) });
+import { container as e, tabRecipe as t } from "./tabs.css.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Link as r, useLocation as i } from "@plumile/router";
+//#region src/atomic/molecules/tabs/Tabs.tsx
+var a = r, o = (r) => {
+	let { items: o, ariaLabel: s } = r, { pathname: c } = i();
+	return /* @__PURE__ */ n("div", {
+		role: "tablist",
+		"aria-label": s,
+		className: e,
+		children: o.map((e) => {
+			let { disabled: r, id: i, label: o, to: s } = e, l = c === s, u;
+			r && (u = !0);
+			let d = "default", f;
+			r ? (d = "disabled", f = -1) : l && (d = "active");
+			let p = (e) => {
+				r && e.preventDefault();
+			};
+			return /* @__PURE__ */ n(a, {
+				exact: !0,
+				"aria-disabled": u,
+				className: t({ state: d }),
+				role: "tab",
+				to: s,
+				tabIndex: f,
+				onClick: p,
+				children: o
+			}, i);
+		})
+	});
 };
-export {
-  R as Tabs
-};
-//# sourceMappingURL=Tabs.js.map
+//#endregion
+export { o as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/lib/esm/atomic/molecules/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../src/atomic/molecules/tabs/Tabs.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { Link, useLocation } from '@plumile/router';\n\nimport * as styles from './tabs.css.js';\n\nexport type TabsSelectEvent = MouseEvent<HTMLButtonElement | HTMLAnchorElement>;\n\ntype LinkComponentProps = ComponentPropsWithoutRef<typeof Link>;\ntype RouterLinkProps = LinkComponentProps &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\ntype BaseTabItem = {\n  id: string;\n  label: ReactNode;\n  disabled?: boolean;\n};\n\ntype NavigationTabItem = BaseTabItem & {\n  to: NonNullable<LinkComponentProps['to']>;\n};\n\nexport type TabItem = NavigationTabItem;\n\nexport type TabsProps = {\n  items: TabItem[];\n  ariaLabel?: string;\n};\n\nexport const Tabs = (props: TabsProps): JSX.Element => {\n  const { items, ariaLabel } = props;\n  const { pathname } = useLocation();\n\n  return (\n    <div role=\"tablist\" aria-label={ariaLabel} className={styles.container}>\n      {items.map((item) => {\n        const { disabled, id, label, to } = item;\n        const isActive = pathname === to;\n\n        let ariaDisabled: true | undefined;\n        if (disabled) {\n          ariaDisabled = true;\n        }\n\n        type TabState = NonNullable<\n          Parameters<typeof styles.tabRecipe>[0]\n        >['state'];\n        let tabState: TabState = 'default';\n        let tabIndex: number | undefined;\n        if (disabled) {\n          tabState = 'disabled';\n          tabIndex = -1;\n        } else if (isActive) {\n          tabState = 'active';\n        }\n\n        const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {\n          if (disabled) {\n            event.preventDefault();\n          }\n        };\n\n        return (\n          <RouterLink\n            key={id}\n            exact\n            aria-disabled={ariaDisabled}\n            className={styles.tabRecipe({ state: tabState })}\n            role=\"tab\"\n            to={to}\n            tabIndex={tabIndex}\n            onClick={handleLinkClick}\n          >\n            {label}\n          </RouterLink>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["RouterLink","Link","Tabs","props","items","ariaLabel","pathname","useLocation","jsx","styles.container","item","disabled","id","label","to","isActive","ariaDisabled","tabState","tabIndex","handleLinkClick","event","styles.tabRecipe"],"mappings":";;;AAgBA,MAAMA,IAAaC,GAmBNC,IAAO,CAACC,MAAkC;AACrD,QAAM,EAAE,OAAAC,GAAO,WAAAC,EAAA,IAAcF,GACvB,EAAE,UAAAG,EAAA,IAAaC,EAAA;AAErB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,WAAU,cAAYH,GAAW,WAAWI,GACnD,UAAAL,EAAM,IAAI,CAACM,MAAS;AACnB,UAAM,EAAE,UAAAC,GAAU,IAAAC,GAAI,OAAAC,GAAO,IAAAC,MAAOJ,GAC9BK,IAAWT,MAAaQ;AAE9B,QAAIE;AACJ,IAAIL,MACFK,IAAe;AAMjB,QAAIC,IAAqB,WACrBC;AACJ,IAAIP,KACFM,IAAW,YACXC,IAAW,MACFH,MACTE,IAAW;AAGb,UAAME,IAAkB,CAACC,MAAyC;AAChE,MAAIT,KACFS,EAAM,eAAA;AAAA,IAEV;AAEA,WACE,gBAAAZ;AAAA,MAACR;AAAA,MAAA;AAAA,QAEC,OAAK;AAAA,QACL,iBAAegB;AAAA,QACf,WAAWK,EAAiB,EAAE,OAAOJ,GAAU;AAAA,QAC/C,MAAK;AAAA,QACL,IAAAH;AAAA,QACA,UAAAI;AAAA,QACA,SAASC;AAAA,QAER,UAAAN;AAAA,MAAA;AAAA,MATID;AAAA,IAAA;AAAA,EAYX,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/Tabs.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\nimport { Link, useLocation } from '@plumile/router';\n\nimport * as styles from './tabs.css.js';\n\nexport type TabsSelectEvent = MouseEvent<HTMLButtonElement | HTMLAnchorElement>;\n\ntype LinkComponentProps = ComponentPropsWithoutRef<typeof Link>;\ntype RouterLinkProps = LinkComponentProps &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\ntype BaseTabItem = {\n  id: string;\n  label: ReactNode;\n  disabled?: boolean;\n};\n\ntype NavigationTabItem = BaseTabItem & {\n  to: NonNullable<LinkComponentProps['to']>;\n};\n\nexport type TabItem = NavigationTabItem;\n\nexport type TabsProps = {\n  items: TabItem[];\n  ariaLabel?: string;\n};\n\nexport const Tabs = (props: TabsProps): JSX.Element => {\n  const { items, ariaLabel } = props;\n  const { pathname } = useLocation();\n\n  return (\n    <div role=\"tablist\" aria-label={ariaLabel} className={styles.container}>\n      {items.map((item) => {\n        const { disabled, id, label, to } = item;\n        const isActive = pathname === to;\n\n        let ariaDisabled: true | undefined;\n        if (disabled) {\n          ariaDisabled = true;\n        }\n\n        type TabState = NonNullable<\n          Parameters<typeof styles.tabRecipe>[0]\n        >['state'];\n        let tabState: TabState = 'default';\n        let tabIndex: number | undefined;\n        if (disabled) {\n          tabState = 'disabled';\n          tabIndex = -1;\n        } else if (isActive) {\n          tabState = 'active';\n        }\n\n        const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {\n          if (disabled) {\n            event.preventDefault();\n          }\n        };\n\n        return (\n          <RouterLink\n            key={id}\n            exact\n            aria-disabled={ariaDisabled}\n            className={styles.tabRecipe({ state: tabState })}\n            role=\"tab\"\n            to={to}\n            tabIndex={tabIndex}\n            onClick={handleLinkClick}\n          >\n            {label}\n          </RouterLink>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;AAgBA,IAAM,IAAa,GAmBN,KAAQ,MAAkC;CACrD,IAAM,EAAE,UAAO,iBAAc,GACvB,EAAE,gBAAa,GAAa;AAElC,QACE,kBAAC,OAAD;EAAK,MAAK;EAAU,cAAY;EAAW,WAAW;YACnD,EAAM,KAAK,MAAS;GACnB,IAAM,EAAE,aAAU,OAAI,UAAO,UAAO,GAC9B,IAAW,MAAa,GAE1B;AACJ,GAAI,MACF,IAAe;GAMjB,IAAI,IAAqB,WACrB;AACJ,GAAI,KACF,IAAW,YACX,IAAW,MACF,MACT,IAAW;GAGb,IAAM,KAAmB,MAAyC;AAChE,IAAI,KACF,EAAM,gBAAgB;;AAI1B,UACE,kBAAC,GAAD;IAEE,OAAA;IACA,iBAAe;IACf,WAAW,EAAiB,EAAE,OAAO,GAAU,CAAC;IAChD,MAAK;IACD;IACM;IACV,SAAS;cAER;IACU,EAVN,EAUM;IAEf;EACE,CAAA"}

package/lib/esm/atomic/molecules/tabs/tabs.css.js

@@ -1,9 +1,18 @@
-/* empty css                                          */
-/* empty css                        */
-import { createRuntimeFn as b } from "@vanilla-extract/recipes/createRuntimeFn";
-var q = "_11tf63d0 txvbqb9io txvbqbajx txvbqbco txvbqbao6 txvbqbdnx", a = b({ defaultClassName: "_11tf63d6 _11tf63d2 _11tf63d1 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbanx txvbqb76x txvbqb746 txvbqb8x txvbqbv8r txvbqb78 txvbqb6x txvbqb7k txvbqb5sx txvbqb36f txvbqbamf txvbqb3b txvbqbl3f txvbqbpsf", variantClassNames: { state: { default: "_11tf63d7 _11tf63d3", active: "_11tf63d8 _11tf63d4 txvbqbv7z txvbqb3jo txvbqbamo", disabled: "_11tf63d9 _11tf63d5 txvbqbv8t txvbqb2k txvbqbr" } }, defaultVariants: { state: "default" }, compoundVariants: [] });
-export {
-  q as container,
-  a as tabRecipe
-};
-//# sourceMappingURL=tabs.css.js.map
+/* empty css                                      */
+/* empty css                    */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/atomic/molecules/tabs/tabs.css.ts
+var t = "_11tf63d0 txvbqb9io txvbqbajx txvbqbco txvbqbao6 txvbqbdnx", n = e({
+	defaultClassName: "_11tf63d6 _11tf63d2 _11tf63d1 txvbqbnvf txvbqboio txvbqbp5f txvbqblx6 txvbqb9jf txvbqbco txvbqbanx txvbqb76x txvbqb746 txvbqb8x txvbqbv8r txvbqb78 txvbqb6x txvbqb7k txvbqb5sx txvbqb36f txvbqbamf txvbqb3b txvbqbl3f txvbqbpsf",
+	variantClassNames: { state: {
+		default: "_11tf63d7 _11tf63d3",
+		active: "_11tf63d8 _11tf63d4 txvbqbv7z txvbqb3jo txvbqbamo",
+		disabled: "_11tf63d9 _11tf63d5 txvbqbv8t txvbqb2k txvbqbr"
+	} },
+	defaultVariants: { state: "default" },
+	compoundVariants: []
+});
+//#endregion
+export { t as container, n as tabRecipe };
+
+//# sourceMappingURL=tabs.css.js.map

package/lib/esm/atomic/molecules/tabs/tabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/tabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'center',\n});\n\nconst tabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    paddingX: 4,\n    paddingY: 2,\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    fontWeight: 'medium',\n    textDecoration: 'none',\n    outline: 'none',\n    position: 'relative',\n  }),\n  {\n    marginBottom: '-1px',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n        color: vars.colors.primary,\n        borderBottomColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: style({\n        selectors: {\n          '&:hover': {\n            color: vars.colors.primary,\n            borderBottomColor: vars.colors.primaryLight,\n          },\n        },\n      }),\n      active: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n        fontWeight: 'semibold',\n      }),\n      disabled: sprinkles({\n        color: 'textMuted',\n        pointerEvents: 'none',\n        cursor: 'not-allowed',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type TabRecipeVariants = RecipeVariants<typeof tabRecipe>;\n"],"mappings":""}