@noambz/ui 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/components/atoms/index.d.ts +1 -0
  2. package/dist/components/atoms/index.d.ts.map +1 -1
  3. package/dist/components/atoms/index.js +1 -0
  4. package/dist/components/atoms/index.js.map +1 -1
  5. package/dist/components/atoms/price-change/index.d.ts +2 -0
  6. package/dist/components/atoms/price-change/index.d.ts.map +1 -0
  7. package/dist/components/atoms/price-change/index.js +11 -0
  8. package/dist/components/atoms/price-change/index.js.map +1 -0
  9. package/dist/components/atoms/price-change/price-change.d.ts +19 -0
  10. package/dist/components/atoms/price-change/price-change.d.ts.map +1 -0
  11. package/dist/components/atoms/price-change/price-change.js +39 -0
  12. package/dist/components/atoms/price-change/price-change.js.map +1 -0
  13. package/dist/components/atoms/price-change/price-change.stories.d.ts +9 -0
  14. package/dist/components/atoms/price-change/price-change.stories.d.ts.map +1 -0
  15. package/dist/components/atoms/tag/tag.d.ts +1 -1
  16. package/dist/components/molecules/content-list-item/content-list-item.d.ts +15 -0
  17. package/dist/components/molecules/content-list-item/content-list-item.d.ts.map +1 -0
  18. package/dist/components/molecules/content-list-item/content-list-item.js +72 -0
  19. package/dist/components/molecules/content-list-item/content-list-item.js.map +1 -0
  20. package/dist/components/molecules/content-list-item/content-list-item.stories.d.ts +7 -0
  21. package/dist/components/molecules/content-list-item/content-list-item.stories.d.ts.map +1 -0
  22. package/dist/components/molecules/content-list-item/index.d.ts +2 -0
  23. package/dist/components/molecules/content-list-item/index.d.ts.map +1 -0
  24. package/dist/components/molecules/content-list-item/index.js +7 -0
  25. package/dist/components/molecules/content-list-item/index.js.map +1 -0
  26. package/dist/components/molecules/index.d.ts +4 -0
  27. package/dist/components/molecules/index.d.ts.map +1 -1
  28. package/dist/components/molecules/index.js +4 -0
  29. package/dist/components/molecules/index.js.map +1 -1
  30. package/dist/components/molecules/metric-strip/index.d.ts +2 -0
  31. package/dist/components/molecules/metric-strip/index.d.ts.map +1 -0
  32. package/dist/components/molecules/metric-strip/index.js +7 -0
  33. package/dist/components/molecules/metric-strip/index.js.map +1 -0
  34. package/dist/components/molecules/metric-strip/metric-strip.d.ts +17 -0
  35. package/dist/components/molecules/metric-strip/metric-strip.d.ts.map +1 -0
  36. package/dist/components/molecules/metric-strip/metric-strip.js +40 -0
  37. package/dist/components/molecules/metric-strip/metric-strip.js.map +1 -0
  38. package/dist/components/molecules/metric-strip/metric-strip.stories.d.ts +7 -0
  39. package/dist/components/molecules/metric-strip/metric-strip.stories.d.ts.map +1 -0
  40. package/dist/components/molecules/quote-row/index.d.ts +2 -0
  41. package/dist/components/molecules/quote-row/index.d.ts.map +1 -0
  42. package/dist/components/molecules/quote-row/index.js +5 -0
  43. package/dist/components/molecules/quote-row/index.js.map +1 -0
  44. package/dist/components/molecules/quote-row/quote-row.d.ts +13 -0
  45. package/dist/components/molecules/quote-row/quote-row.d.ts.map +1 -0
  46. package/dist/components/molecules/quote-row/quote-row.js +33 -0
  47. package/dist/components/molecules/quote-row/quote-row.js.map +1 -0
  48. package/dist/components/molecules/quote-row/quote-row.stories.d.ts +7 -0
  49. package/dist/components/molecules/quote-row/quote-row.stories.d.ts.map +1 -0
  50. package/dist/components/molecules/social-post-card/index.d.ts +2 -0
  51. package/dist/components/molecules/social-post-card/index.d.ts.map +1 -0
  52. package/dist/components/molecules/social-post-card/index.js +7 -0
  53. package/dist/components/molecules/social-post-card/index.js.map +1 -0
  54. package/dist/components/molecules/social-post-card/social-post-card.d.ts +15 -0
  55. package/dist/components/molecules/social-post-card/social-post-card.d.ts.map +1 -0
  56. package/dist/components/molecules/social-post-card/social-post-card.js +61 -0
  57. package/dist/components/molecules/social-post-card/social-post-card.js.map +1 -0
  58. package/dist/components/molecules/social-post-card/social-post-card.stories.d.ts +7 -0
  59. package/dist/components/molecules/social-post-card/social-post-card.stories.d.ts.map +1 -0
  60. package/dist/components/organisms/app-shell/app-shell-layout.d.ts +6 -0
  61. package/dist/components/organisms/app-shell/app-shell-layout.d.ts.map +1 -1
  62. package/dist/components/organisms/app-shell/app-shell-layout.js +8 -3
  63. package/dist/components/organisms/app-shell/app-shell-layout.js.map +1 -1
  64. package/dist/components/organisms/horizontal-scroller/horizontal-scroller.d.ts +12 -0
  65. package/dist/components/organisms/horizontal-scroller/horizontal-scroller.d.ts.map +1 -0
  66. package/dist/components/organisms/horizontal-scroller/horizontal-scroller.js +76 -0
  67. package/dist/components/organisms/horizontal-scroller/horizontal-scroller.js.map +1 -0
  68. package/dist/components/organisms/horizontal-scroller/horizontal-scroller.stories.d.ts +7 -0
  69. package/dist/components/organisms/horizontal-scroller/horizontal-scroller.stories.d.ts.map +1 -0
  70. package/dist/components/organisms/horizontal-scroller/index.d.ts +2 -0
  71. package/dist/components/organisms/horizontal-scroller/index.d.ts.map +1 -0
  72. package/dist/components/organisms/horizontal-scroller/index.js +7 -0
  73. package/dist/components/organisms/horizontal-scroller/index.js.map +1 -0
  74. package/dist/components/organisms/index.d.ts +1 -0
  75. package/dist/components/organisms/index.d.ts.map +1 -1
  76. package/dist/components/organisms/index.js +1 -0
  77. package/dist/components/organisms/index.js.map +1 -1
  78. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.d.ts +12 -0
  79. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.d.ts.map +1 -0
  80. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.js +19 -0
  81. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.js.map +1 -0
  82. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.d.ts +15 -0
  83. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.d.ts.map +1 -0
  84. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.js +15 -0
  85. package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.js.map +1 -0
  86. package/dist/components/utility-wrappers/appearance-sync/apply-appearance.d.ts +10 -0
  87. package/dist/components/utility-wrappers/appearance-sync/apply-appearance.d.ts.map +1 -0
  88. package/dist/components/utility-wrappers/appearance-sync/apply-appearance.js +26 -0
  89. package/dist/components/utility-wrappers/appearance-sync/apply-appearance.js.map +1 -0
  90. package/dist/components/utility-wrappers/appearance-sync/index.d.ts +5 -0
  91. package/dist/components/utility-wrappers/appearance-sync/index.d.ts.map +1 -0
  92. package/dist/components/utility-wrappers/appearance-sync/index.js +21 -0
  93. package/dist/components/utility-wrappers/appearance-sync/index.js.map +1 -0
  94. package/dist/components/utility-wrappers/index.d.ts +1 -0
  95. package/dist/components/utility-wrappers/index.d.ts.map +1 -1
  96. package/dist/components/utility-wrappers/index.js +1 -0
  97. package/dist/components/utility-wrappers/index.js.map +1 -1
  98. package/package.json +1 -1
  99. package/src/styles/theme.css +51 -1
@@ -0,0 +1,61 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { forwardRef } from "react";
4
+ import { cn } from "../../../utils/cn.js";
5
+ import { Avatar, AvatarFallback } from "../../atoms/avatar/avatar.js";
6
+ import { Tag } from "../../atoms/tag/tag.js";
7
+ import { Card, CardBody } from "../card/card.js";
8
+ const SocialPostCard = forwardRef(
9
+ ({
10
+ author,
11
+ handle,
12
+ body,
13
+ meta,
14
+ ticker,
15
+ href,
16
+ external = false,
17
+ className,
18
+ ...props
19
+ }, ref) => {
20
+ const initials = typeof author === "string" && author.trim().length > 0 ? author.trim().slice(0, 1).toUpperCase() : "?";
21
+ const content = /* @__PURE__ */ jsx(
22
+ Card,
23
+ {
24
+ ref,
25
+ padding: "sm",
26
+ className: cn("h-full w-[17.5rem] shrink-0", className),
27
+ ...props,
28
+ children: /* @__PURE__ */ jsxs(CardBody, { className: "space-y-2", children: [
29
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
30
+ /* @__PURE__ */ jsx(Avatar, { size: "sm", children: /* @__PURE__ */ jsx(AvatarFallback, { children: initials }) }),
31
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
32
+ /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: author }),
33
+ handle ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: handle }) : null
34
+ ] }),
35
+ ticker ? /* @__PURE__ */ jsx(Tag, { size: "sm", children: ticker }) : null
36
+ ] }),
37
+ /* @__PURE__ */ jsx("p", { className: "line-clamp-4 text-sm leading-snug text-foreground", children: body }),
38
+ meta ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: meta }) : null
39
+ ] })
40
+ }
41
+ );
42
+ if (!href) {
43
+ return content;
44
+ }
45
+ return /* @__PURE__ */ jsx(
46
+ "a",
47
+ {
48
+ href,
49
+ target: external ? "_blank" : void 0,
50
+ rel: external ? "noopener noreferrer" : void 0,
51
+ className: "block shrink-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
52
+ children: content
53
+ }
54
+ );
55
+ }
56
+ );
57
+ SocialPostCard.displayName = "SocialPostCard";
58
+ export {
59
+ SocialPostCard
60
+ };
61
+ //# sourceMappingURL=social-post-card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/molecules/social-post-card/social-post-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../../utils/cn.js\";\nimport { Avatar, AvatarFallback } from \"../../atoms/avatar/avatar.js\";\nimport { Tag } from \"../../atoms/tag/tag.js\";\nimport { Card, CardBody } from \"../card/card.js\";\n\nexport interface ISocialPostCardProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n author: ReactNode;\n handle?: ReactNode;\n body: ReactNode;\n meta?: ReactNode;\n ticker?: ReactNode;\n href?: string;\n external?: boolean;\n}\n\n/**\n * Compact social/post card for horizontal feeds and highlight rails.\n */\nexport const SocialPostCard = forwardRef<HTMLDivElement, ISocialPostCardProps>(\n (\n {\n author,\n handle,\n body,\n meta,\n ticker,\n href,\n external = false,\n className,\n ...props\n },\n ref,\n ) => {\n const initials =\n typeof author === \"string\" && author.trim().length > 0\n ? author.trim().slice(0, 1).toUpperCase()\n : \"?\";\n\n const content = (\n <Card\n ref={ref}\n padding=\"sm\"\n className={cn(\"h-full w-[17.5rem] shrink-0\", className)}\n {...props}\n >\n <CardBody className=\"space-y-2\">\n <div className=\"flex items-start gap-2\">\n <Avatar size=\"sm\">\n <AvatarFallback>{initials}</AvatarFallback>\n </Avatar>\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-sm font-medium text-foreground\">\n {author}\n </div>\n {handle ? (\n <div className=\"truncate text-xs text-muted-foreground\">\n {handle}\n </div>\n ) : null}\n </div>\n {ticker ? <Tag size=\"sm\">{ticker}</Tag> : null}\n </div>\n <p className=\"line-clamp-4 text-sm leading-snug text-foreground\">\n {body}\n </p>\n {meta ? (\n <div className=\"text-xs text-muted-foreground\">{meta}</div>\n ) : null}\n </CardBody>\n </Card>\n );\n\n if (!href) {\n return content;\n }\n\n return (\n <a\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n className=\"block shrink-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n {content}\n </a>\n );\n },\n);\nSocialPostCard.displayName = \"SocialPostCard\";\n"],"mappings":";AAoDc,cAEF,YAFE;AAlDd,SAAS,kBAAuD;AAChE,SAAS,UAAU;AACnB,SAAS,QAAQ,sBAAsB;AACvC,SAAS,WAAW;AACpB,SAAS,MAAM,gBAAgB;AAgBxB,MAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WACJ,OAAO,WAAW,YAAY,OAAO,KAAK,EAAE,SAAS,IACjD,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,YAAY,IACtC;AAEN,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,WAAW,GAAG,+BAA+B,SAAS;AAAA,QACrD,GAAG;AAAA,QAEJ,+BAAC,YAAS,WAAU,aAClB;AAAA,+BAAC,SAAI,WAAU,0BACb;AAAA,gCAAC,UAAO,MAAK,MACX,8BAAC,kBAAgB,oBAAS,GAC5B;AAAA,YACA,qBAAC,SAAI,WAAU,kBACb;AAAA,kCAAC,SAAI,WAAU,gDACZ,kBACH;AAAA,cACC,SACC,oBAAC,SAAI,WAAU,0CACZ,kBACH,IACE;AAAA,eACN;AAAA,YACC,SAAS,oBAAC,OAAI,MAAK,MAAM,kBAAO,IAAS;AAAA,aAC5C;AAAA,UACA,oBAAC,OAAE,WAAU,qDACV,gBACH;AAAA,UACC,OACC,oBAAC,SAAI,WAAU,iCAAiC,gBAAK,IACnD;AAAA,WACN;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAW,wBAAwB;AAAA,QACxC,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from "@storybook/react-vite";
2
+ import { SocialPostCard } from "./social-post-card.js";
3
+ declare const meta: Meta<typeof SocialPostCard>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof SocialPostCard>;
6
+ export declare const Default: Story;
7
+ //# sourceMappingURL=social-post-card.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"social-post-card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/social-post-card/social-post-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAIrC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}
@@ -14,6 +14,12 @@ export interface IAppShellLayoutProps {
14
14
  * sidebar, main content, and footer. Contains no navigation, theming, or
15
15
  * i18n concerns; those are the consumer's responsibility.
16
16
  *
17
+ * When a sidebar is provided, the body row is full-width so the aside docks
18
+ * to the viewport start edge; maxWidth constrains header and main content
19
+ * only, both left-aligned in the pane after the aside. Without a sidebar,
20
+ * the body row itself is centered at maxWidth (top-nav shells such as
21
+ * AppShellPreset).
22
+ *
17
23
  * For a flight-finder-shaped default (top-nav header with active links,
18
24
  * mobile hamburger, locale/theme toggles), use AppShellPreset instead.
19
25
  * For sidebar link lists and module sub top bars, use SidebarNav and
@@ -1 +1 @@
1
- {"version":3,"file":"app-shell-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC/F;AAgBD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,EACH,SAAc,EACd,aAAkB,EAClB,QAAgB,GACjB,EAAE,oBAAoB,+BA8BtB"}
1
+ {"version":3,"file":"app-shell-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC/F;AAgBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,EACH,SAAc,EACd,aAAkB,EAClB,QAAgB,GACjB,EAAE,oBAAoB,+BAyCtB"}
@@ -24,16 +24,21 @@ function AppShellLayout({
24
24
  maxWidth = "7xl"
25
25
  }) {
26
26
  const containerClass = `${MAX_WIDTH_CLASSES[maxWidth]} mx-auto w-full`;
27
+ const mainContentClass = `${MAX_WIDTH_CLASSES[maxWidth]} w-full`;
28
+ const hasSidebar = Boolean(sidebar);
27
29
  return /* @__PURE__ */ jsxs(
28
30
  "div",
29
31
  {
30
32
  dir,
31
33
  className: `flex min-h-screen flex-col bg-background text-foreground ${className}`,
32
34
  children: [
33
- header && /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ jsx("div", { className: containerClass, children: header }) }),
34
- /* @__PURE__ */ jsxs("div", { className: `flex flex-1 ${containerClass}`, children: [
35
+ header && /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm", children: hasSidebar ? /* @__PURE__ */ jsxs("div", { className: "flex w-full", children: [
36
+ /* @__PURE__ */ jsx("div", { className: "hidden w-64 shrink-0 md:block", "aria-hidden": "true" }),
37
+ /* @__PURE__ */ jsx("div", { className: `min-w-0 flex-1 px-4 ${mainContentClass}`, children: header })
38
+ ] }) : /* @__PURE__ */ jsx("div", { className: `${containerClass} px-4`, children: header }) }),
39
+ /* @__PURE__ */ jsxs("div", { className: `flex w-full flex-1 ${hasSidebar ? "" : containerClass}`, children: [
35
40
  sidebar && /* @__PURE__ */ jsx("aside", { className: "hidden w-64 shrink-0 border-e border-border-base py-6 md:block", children: sidebar }),
36
- /* @__PURE__ */ jsx("main", { className: `flex-1 px-4 py-6 ${mainClassName}`, children })
41
+ /* @__PURE__ */ jsx("main", { className: `flex-1 px-4 py-6 ${mainClassName}`, children: hasSidebar ? /* @__PURE__ */ jsx("div", { className: mainContentClass, children }) : children })
37
42
  ] }),
38
43
  footer && /* @__PURE__ */ jsx("footer", { className: "border-t border-border-base py-4 text-center text-sm text-muted-foreground", children: footer })
39
44
  ]
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nexport interface IAppShellLayoutProps {\n header?: ReactNode;\n sidebar?: ReactNode;\n footer?: ReactNode;\n children: ReactNode;\n dir?: \"ltr\" | \"rtl\";\n className?: string;\n mainClassName?: string;\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\n}\n\nconst MAX_WIDTH_CLASSES: Record<NonNullable<IAppShellLayoutProps[\"maxWidth\"]>, string> = {\n sm: \"max-w-sm\",\n md: \"max-w-md\",\n lg: \"max-w-lg\",\n xl: \"max-w-xl\",\n \"2xl\": \"max-w-2xl\",\n \"3xl\": \"max-w-3xl\",\n \"4xl\": \"max-w-4xl\",\n \"5xl\": \"max-w-5xl\",\n \"6xl\": \"max-w-6xl\",\n \"7xl\": \"max-w-7xl\",\n full: \"max-w-full\",\n};\n\n/**\n * Unopinionated slot-based app shell: renders a sticky header, optional\n * sidebar, main content, and footer. Contains no navigation, theming, or\n * i18n concerns; those are the consumer's responsibility.\n *\n * For a flight-finder-shaped default (top-nav header with active links,\n * mobile hamburger, locale/theme toggles), use AppShellPreset instead.\n * For sidebar link lists and module sub top bars, use SidebarNav and\n * ModuleSubnav with an injected LinkComponent.\n */\nexport function AppShellLayout({\n header,\n sidebar,\n footer,\n children,\n dir,\n className = \"\",\n mainClassName = \"\",\n maxWidth = \"7xl\",\n}: IAppShellLayoutProps) {\n const containerClass = `${MAX_WIDTH_CLASSES[maxWidth]} mx-auto w-full`;\n\n return (\n <div\n dir={dir}\n className={`flex min-h-screen flex-col bg-background text-foreground ${className}`}\n >\n {header && (\n <header className=\"sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm\">\n <div className={containerClass}>{header}</div>\n </header>\n )}\n\n <div className={`flex flex-1 ${containerClass}`}>\n {sidebar && (\n <aside className=\"hidden w-64 shrink-0 border-e border-border-base py-6 md:block\">\n {sidebar}\n </aside>\n )}\n <main className={`flex-1 px-4 py-6 ${mainClassName}`}>{children}</main>\n </div>\n\n {footer && (\n <footer className=\"border-t border-border-base py-4 text-center text-sm text-muted-foreground\">\n {footer}\n </footer>\n )}\n </div>\n );\n}\n"],"mappings":";AA0DU,cAIJ,YAJI;AA3CV,MAAM,oBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAYO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AACb,GAAyB;AACvB,QAAM,iBAAiB,GAAG,kBAAkB,QAAQ,CAAC;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,4DAA4D,SAAS;AAAA,MAE/E;AAAA,kBACC,oBAAC,YAAO,WAAU,mFAChB,8BAAC,SAAI,WAAW,gBAAiB,kBAAO,GAC1C;AAAA,QAGF,qBAAC,SAAI,WAAW,eAAe,cAAc,IAC1C;AAAA,qBACC,oBAAC,WAAM,WAAU,kEACd,mBACH;AAAA,UAEF,oBAAC,UAAK,WAAW,oBAAoB,aAAa,IAAK,UAAS;AAAA,WAClE;AAAA,QAEC,UACC,oBAAC,YAAO,WAAU,8EACf,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nexport interface IAppShellLayoutProps {\n header?: ReactNode;\n sidebar?: ReactNode;\n footer?: ReactNode;\n children: ReactNode;\n dir?: \"ltr\" | \"rtl\";\n className?: string;\n mainClassName?: string;\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\n}\n\nconst MAX_WIDTH_CLASSES: Record<NonNullable<IAppShellLayoutProps[\"maxWidth\"]>, string> = {\n sm: \"max-w-sm\",\n md: \"max-w-md\",\n lg: \"max-w-lg\",\n xl: \"max-w-xl\",\n \"2xl\": \"max-w-2xl\",\n \"3xl\": \"max-w-3xl\",\n \"4xl\": \"max-w-4xl\",\n \"5xl\": \"max-w-5xl\",\n \"6xl\": \"max-w-6xl\",\n \"7xl\": \"max-w-7xl\",\n full: \"max-w-full\",\n};\n\n/**\n * Unopinionated slot-based app shell: renders a sticky header, optional\n * sidebar, main content, and footer. Contains no navigation, theming, or\n * i18n concerns; those are the consumer's responsibility.\n *\n * When a sidebar is provided, the body row is full-width so the aside docks\n * to the viewport start edge; maxWidth constrains header and main content\n * only, both left-aligned in the pane after the aside. Without a sidebar,\n * the body row itself is centered at maxWidth (top-nav shells such as\n * AppShellPreset).\n *\n * For a flight-finder-shaped default (top-nav header with active links,\n * mobile hamburger, locale/theme toggles), use AppShellPreset instead.\n * For sidebar link lists and module sub top bars, use SidebarNav and\n * ModuleSubnav with an injected LinkComponent.\n */\nexport function AppShellLayout({\n header,\n sidebar,\n footer,\n children,\n dir,\n className = \"\",\n mainClassName = \"\",\n maxWidth = \"7xl\",\n}: IAppShellLayoutProps) {\n const containerClass = `${MAX_WIDTH_CLASSES[maxWidth]} mx-auto w-full`;\n const mainContentClass = `${MAX_WIDTH_CLASSES[maxWidth]} w-full`;\n const hasSidebar = Boolean(sidebar);\n\n return (\n <div\n dir={dir}\n className={`flex min-h-screen flex-col bg-background text-foreground ${className}`}\n >\n {header && (\n <header className=\"sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm\">\n {hasSidebar ? (\n <div className=\"flex w-full\">\n <div className=\"hidden w-64 shrink-0 md:block\" aria-hidden=\"true\" />\n <div className={`min-w-0 flex-1 px-4 ${mainContentClass}`}>{header}</div>\n </div>\n ) : (\n <div className={`${containerClass} px-4`}>{header}</div>\n )}\n </header>\n )}\n\n <div className={`flex w-full flex-1 ${hasSidebar ? \"\" : containerClass}`}>\n {sidebar && (\n <aside className=\"hidden w-64 shrink-0 border-e border-border-base py-6 md:block\">\n {sidebar}\n </aside>\n )}\n <main className={`flex-1 px-4 py-6 ${mainClassName}`}>\n {hasSidebar ? <div className={mainContentClass}>{children}</div> : children}\n </main>\n </div>\n\n {footer && (\n <footer className=\"border-t border-border-base py-4 text-center text-sm text-muted-foreground\">\n {footer}\n </footer>\n )}\n </div>\n );\n}\n"],"mappings":";AAmEY,SACE,KADF;AApDZ,MAAM,oBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAkBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AACb,GAAyB;AACvB,QAAM,iBAAiB,GAAG,kBAAkB,QAAQ,CAAC;AACrD,QAAM,mBAAmB,GAAG,kBAAkB,QAAQ,CAAC;AACvD,QAAM,aAAa,QAAQ,OAAO;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,4DAA4D,SAAS;AAAA,MAE/E;AAAA,kBACC,oBAAC,YAAO,WAAU,mFACf,uBACC,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,SAAI,WAAU,iCAAgC,eAAY,QAAO;AAAA,UAClE,oBAAC,SAAI,WAAW,uBAAuB,gBAAgB,IAAK,kBAAO;AAAA,WACrE,IAEA,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAU,kBAAO,GAEtD;AAAA,QAGF,qBAAC,SAAI,WAAW,sBAAsB,aAAa,KAAK,cAAc,IACnE;AAAA,qBACC,oBAAC,WAAM,WAAU,kEACd,mBACH;AAAA,UAEF,oBAAC,UAAK,WAAW,oBAAoB,aAAa,IAC/C,uBAAa,oBAAC,SAAI,WAAW,kBAAmB,UAAS,IAAS,UACrE;AAAA,WACF;AAAA,QAEC,UACC,oBAAC,YAAO,WAAU,8EACf,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
@@ -0,0 +1,12 @@
1
+ import { type HTMLAttributes, type ReactNode } from "react";
2
+ export interface IHorizontalScrollerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
3
+ children: ReactNode;
4
+ autoplay?: boolean;
5
+ autoplayIntervalMs?: number;
6
+ ariaLabel?: string;
7
+ }
8
+ /**
9
+ * Horizontal snap-scrolling rail with optional autoplay and pause on hover/focus.
10
+ */
11
+ export declare function HorizontalScroller({ children, autoplay, autoplayIntervalMs, ariaLabel, className, ...props }: IHorizontalScrollerProps): import("react").JSX.Element;
12
+ //# sourceMappingURL=horizontal-scroller.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"horizontal-scroller.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/horizontal-scroller/horizontal-scroller.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAgB,EAChB,kBAAiD,EACjD,SAAiC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA6D1B"}
@@ -0,0 +1,76 @@
1
+ "use client";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import {
4
+ Children,
5
+ useEffect,
6
+ useRef,
7
+ useState
8
+ } from "react";
9
+ import { cn } from "../../../utils/cn.js";
10
+ const DEFAULT_AUTOPLAY_INTERVAL_MS = 3500;
11
+ const SCROLL_STEP_PX = 280;
12
+ function HorizontalScroller({
13
+ children,
14
+ autoplay = false,
15
+ autoplayIntervalMs = DEFAULT_AUTOPLAY_INTERVAL_MS,
16
+ ariaLabel = "Horizontal scroller",
17
+ className,
18
+ ...props
19
+ }) {
20
+ const scrollerRef = useRef(null);
21
+ const [paused, setPaused] = useState(false);
22
+ const items = Children.toArray(children);
23
+ useEffect(() => {
24
+ if (!autoplay || paused) {
25
+ return;
26
+ }
27
+ const node = scrollerRef.current;
28
+ if (node === null) {
29
+ return;
30
+ }
31
+ const timer = window.setInterval(() => {
32
+ const maxScroll = node.scrollWidth - node.clientWidth;
33
+ if (maxScroll <= 0) {
34
+ return;
35
+ }
36
+ const next = node.scrollLeft + SCROLL_STEP_PX;
37
+ if (next >= maxScroll - 1) {
38
+ node.scrollTo({ left: 0, behavior: "smooth" });
39
+ } else {
40
+ node.scrollTo({ left: next, behavior: "smooth" });
41
+ }
42
+ }, autoplayIntervalMs);
43
+ return () => {
44
+ window.clearInterval(timer);
45
+ };
46
+ }, [autoplay, autoplayIntervalMs, paused]);
47
+ return /* @__PURE__ */ jsx(
48
+ "div",
49
+ {
50
+ className: cn("relative", className),
51
+ onMouseEnter: () => setPaused(true),
52
+ onMouseLeave: () => setPaused(false),
53
+ onFocusCapture: () => setPaused(true),
54
+ onBlurCapture: (event) => {
55
+ if (!event.currentTarget.contains(event.relatedTarget)) {
56
+ setPaused(false);
57
+ }
58
+ },
59
+ ...props,
60
+ children: /* @__PURE__ */ jsx(
61
+ "div",
62
+ {
63
+ ref: scrollerRef,
64
+ role: "region",
65
+ "aria-label": ariaLabel,
66
+ className: "flex gap-3 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
67
+ children: items.map((child, index) => /* @__PURE__ */ jsx("div", { className: "snap-start", children: child }, index))
68
+ }
69
+ )
70
+ }
71
+ );
72
+ }
73
+ export {
74
+ HorizontalScroller
75
+ };
76
+ //# sourceMappingURL=horizontal-scroller.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/organisms/horizontal-scroller/horizontal-scroller.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n Children,\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../../utils/cn.js\";\n\nconst DEFAULT_AUTOPLAY_INTERVAL_MS = 3500;\nconst SCROLL_STEP_PX = 280;\n\nexport interface IHorizontalScrollerProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n children: ReactNode;\n autoplay?: boolean;\n autoplayIntervalMs?: number;\n ariaLabel?: string;\n}\n\n/**\n * Horizontal snap-scrolling rail with optional autoplay and pause on hover/focus.\n */\nexport function HorizontalScroller({\n children,\n autoplay = false,\n autoplayIntervalMs = DEFAULT_AUTOPLAY_INTERVAL_MS,\n ariaLabel = \"Horizontal scroller\",\n className,\n ...props\n}: IHorizontalScrollerProps) {\n const scrollerRef = useRef<HTMLDivElement>(null);\n const [paused, setPaused] = useState(false);\n const items = Children.toArray(children);\n\n useEffect(() => {\n if (!autoplay || paused) {\n return;\n }\n\n const node = scrollerRef.current;\n if (node === null) {\n return;\n }\n\n const timer = window.setInterval(() => {\n const maxScroll = node.scrollWidth - node.clientWidth;\n if (maxScroll <= 0) {\n return;\n }\n\n const next = node.scrollLeft + SCROLL_STEP_PX;\n if (next >= maxScroll - 1) {\n node.scrollTo({ left: 0, behavior: \"smooth\" });\n } else {\n node.scrollTo({ left: next, behavior: \"smooth\" });\n }\n }, autoplayIntervalMs);\n\n return () => {\n window.clearInterval(timer);\n };\n }, [autoplay, autoplayIntervalMs, paused]);\n\n return (\n <div\n className={cn(\"relative\", className)}\n onMouseEnter={() => setPaused(true)}\n onMouseLeave={() => setPaused(false)}\n onFocusCapture={() => setPaused(true)}\n onBlurCapture={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n setPaused(false);\n }\n }}\n {...props}\n >\n <div\n ref={scrollerRef}\n role=\"region\"\n aria-label={ariaLabel}\n className=\"flex gap-3 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n >\n {items.map((child, index) => (\n <div key={index} className=\"snap-start\">\n {child}\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"mappings":";AAuFU;AArFV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,UAAU;AAEnB,MAAM,+BAA+B;AACrC,MAAM,iBAAiB;AAahB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,QAAQ,SAAS,QAAQ,QAAQ;AAEvC,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,QAAQ;AACvB;AAAA,IACF;AAEA,UAAM,OAAO,YAAY;AACzB,QAAI,SAAS,MAAM;AACjB;AAAA,IACF;AAEA,UAAM,QAAQ,OAAO,YAAY,MAAM;AACrC,YAAM,YAAY,KAAK,cAAc,KAAK;AAC1C,UAAI,aAAa,GAAG;AAClB;AAAA,MACF;AAEA,YAAM,OAAO,KAAK,aAAa;AAC/B,UAAI,QAAQ,YAAY,GAAG;AACzB,aAAK,SAAS,EAAE,MAAM,GAAG,UAAU,SAAS,CAAC;AAAA,MAC/C,OAAO;AACL,aAAK,SAAS,EAAE,MAAM,MAAM,UAAU,SAAS,CAAC;AAAA,MAClD;AAAA,IACF,GAAG,kBAAkB;AAErB,WAAO,MAAM;AACX,aAAO,cAAc,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,UAAU,oBAAoB,MAAM,CAAC;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,cAAc,MAAM,UAAU,IAAI;AAAA,MAClC,cAAc,MAAM,UAAU,KAAK;AAAA,MACnC,gBAAgB,MAAM,UAAU,IAAI;AAAA,MACpC,eAAe,CAAC,UAAU;AACxB,YAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAA4B,GAAG;AACrE,oBAAU,KAAK;AAAA,QACjB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAU;AAAA,UAET,gBAAM,IAAI,CAAC,OAAO,UACjB,oBAAC,SAAgB,WAAU,cACxB,mBADO,KAEV,CACD;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from "@storybook/react-vite";
2
+ import { HorizontalScroller } from "./horizontal-scroller.js";
3
+ declare const meta: Meta<typeof HorizontalScroller>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof HorizontalScroller>;
6
+ export declare const AutoplayCards: Story;
7
+ //# sourceMappingURL=horizontal-scroller.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"horizontal-scroller.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/horizontal-scroller/horizontal-scroller.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAIzC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEjD,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { HorizontalScroller, type IHorizontalScrollerProps, } from "./horizontal-scroller.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/horizontal-scroller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,KAAK,wBAAwB,GAC9B,MAAM,0BAA0B,CAAC"}
@@ -0,0 +1,7 @@
1
+ import {
2
+ HorizontalScroller
3
+ } from "./horizontal-scroller.js";
4
+ export {
5
+ HorizontalScroller
6
+ };
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/organisms/horizontal-scroller/index.ts"],"sourcesContent":["export {\n HorizontalScroller,\n type IHorizontalScrollerProps,\n} from \"./horizontal-scroller.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAEK;","names":[]}
@@ -7,6 +7,7 @@ export * from "./data-grid/index.js";
7
7
  export * from "./date-picker/index.js";
8
8
  export * from "./drawer/index.js";
9
9
  export * from "./file-upload/index.js";
10
+ export * from "./horizontal-scroller/index.js";
10
11
  export * from "./modal/index.js";
11
12
  export * from "./page-scaffolds/index.js";
12
13
  export * from "./paginated-data-grid/index.js";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC"}
@@ -7,6 +7,7 @@ export * from "./data-grid/index.js";
7
7
  export * from "./date-picker/index.js";
8
8
  export * from "./drawer/index.js";
9
9
  export * from "./file-upload/index.js";
10
+ export * from "./horizontal-scroller/index.js";
10
11
  export * from "./modal/index.js";
11
12
  export * from "./page-scaffolds/index.js";
12
13
  export * from "./paginated-data-grid/index.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/organisms/index.ts"],"sourcesContent":["export * from \"./app-shell/index.js\";\nexport * from \"./autocomplete/index.js\";\nexport * from \"./charts/index.js\";\nexport * from \"./command-palette/index.js\";\nexport * from \"./custom-select/index.js\";\nexport * from \"./data-grid/index.js\";\nexport * from \"./date-picker/index.js\";\nexport * from \"./drawer/index.js\";\nexport * from \"./file-upload/index.js\";\nexport * from \"./modal/index.js\";\nexport * from \"./page-scaffolds/index.js\";\nexport * from \"./paginated-data-grid/index.js\";\nexport * from \"./select/index.js\";\nexport * from \"./shortcut-help-overlay/index.js\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/organisms/index.ts"],"sourcesContent":["export * from \"./app-shell/index.js\";\nexport * from \"./autocomplete/index.js\";\nexport * from \"./charts/index.js\";\nexport * from \"./command-palette/index.js\";\nexport * from \"./custom-select/index.js\";\nexport * from \"./data-grid/index.js\";\nexport * from \"./date-picker/index.js\";\nexport * from \"./drawer/index.js\";\nexport * from \"./file-upload/index.js\";\nexport * from \"./horizontal-scroller/index.js\";\nexport * from \"./modal/index.js\";\nexport * from \"./page-scaffolds/index.js\";\nexport * from \"./paginated-data-grid/index.js\";\nexport * from \"./select/index.js\";\nexport * from \"./shortcut-help-overlay/index.js\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
@@ -0,0 +1,12 @@
1
+ import type { DarkPaletteValue, LightPaletteValue } from "./appearance-sync.type.js";
2
+ export interface IAppearanceSyncProps {
3
+ lightPalette?: LightPaletteValue;
4
+ darkPalette?: DarkPaletteValue;
5
+ }
6
+ /**
7
+ * Syncs palette data attributes on `<html>` from controlled props.
8
+ * Pair with `next-themes` for light/dark/system class switching; this component
9
+ * does not own persistence.
10
+ */
11
+ export declare function AppearanceSync({ lightPalette, darkPalette, }: IAppearanceSyncProps): null;
12
+ //# sourceMappingURL=appearance-sync.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"appearance-sync.d.ts","sourceRoot":"","sources":["../../../../src/components/utility-wrappers/appearance-sync/appearance-sync.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAuD,EACvD,WAAqD,GACtD,EAAE,oBAAoB,QAMtB"}
@@ -0,0 +1,19 @@
1
+ "use client";
2
+ import { useEffect } from "react";
3
+ import {
4
+ applyAppearanceToDocument,
5
+ DEFAULT_APPEARANCE_PALETTES
6
+ } from "./apply-appearance.js";
7
+ function AppearanceSync({
8
+ lightPalette = DEFAULT_APPEARANCE_PALETTES.lightPalette,
9
+ darkPalette = DEFAULT_APPEARANCE_PALETTES.darkPalette
10
+ }) {
11
+ useEffect(() => {
12
+ applyAppearanceToDocument({ lightPalette, darkPalette });
13
+ }, [lightPalette, darkPalette]);
14
+ return null;
15
+ }
16
+ export {
17
+ AppearanceSync
18
+ };
19
+ //# sourceMappingURL=appearance-sync.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/utility-wrappers/appearance-sync/appearance-sync.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport {\n applyAppearanceToDocument,\n DEFAULT_APPEARANCE_PALETTES,\n} from \"./apply-appearance.js\";\nimport type {\n DarkPaletteValue,\n LightPaletteValue,\n} from \"./appearance-sync.type.js\";\n\nexport interface IAppearanceSyncProps {\n lightPalette?: LightPaletteValue;\n darkPalette?: DarkPaletteValue;\n}\n\n/**\n * Syncs palette data attributes on `<html>` from controlled props.\n * Pair with `next-themes` for light/dark/system class switching; this component\n * does not own persistence.\n */\nexport function AppearanceSync({\n lightPalette = DEFAULT_APPEARANCE_PALETTES.lightPalette,\n darkPalette = DEFAULT_APPEARANCE_PALETTES.darkPalette,\n}: IAppearanceSyncProps) {\n useEffect(() => {\n applyAppearanceToDocument({ lightPalette, darkPalette });\n }, [lightPalette, darkPalette]);\n\n return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAgBA,SAAS,eAAe;AAAA,EAC7B,eAAe,4BAA4B;AAAA,EAC3C,cAAc,4BAA4B;AAC5C,GAAyB;AACvB,YAAU,MAAM;AACd,8BAA0B,EAAE,cAAc,YAAY,CAAC;AAAA,EACzD,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,SAAO;AACT;","names":[]}
@@ -0,0 +1,15 @@
1
+ export declare enum LightPaletteEnum {
2
+ BRIGHT = "bright",
3
+ SOFT = "soft"
4
+ }
5
+ export declare enum DarkPaletteEnum {
6
+ SOFT = "soft",
7
+ DEEP = "deep"
8
+ }
9
+ export type LightPaletteValue = `${LightPaletteEnum}`;
10
+ export type DarkPaletteValue = `${DarkPaletteEnum}`;
11
+ export interface IAppearancePalettes {
12
+ lightPalette: LightPaletteValue;
13
+ darkPalette: DarkPaletteValue;
14
+ }
15
+ //# sourceMappingURL=appearance-sync.type.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"appearance-sync.type.d.ts","sourceRoot":"","sources":["../../../../src/components/utility-wrappers/appearance-sync/appearance-sync.type.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,iBAAiB,GAAG,GAAG,gBAAgB,EAAE,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG,GAAG,eAAe,EAAE,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,gBAAgB,CAAC;CAC/B"}
@@ -0,0 +1,15 @@
1
+ var LightPaletteEnum = /* @__PURE__ */ ((LightPaletteEnum2) => {
2
+ LightPaletteEnum2["BRIGHT"] = "bright";
3
+ LightPaletteEnum2["SOFT"] = "soft";
4
+ return LightPaletteEnum2;
5
+ })(LightPaletteEnum || {});
6
+ var DarkPaletteEnum = /* @__PURE__ */ ((DarkPaletteEnum2) => {
7
+ DarkPaletteEnum2["SOFT"] = "soft";
8
+ DarkPaletteEnum2["DEEP"] = "deep";
9
+ return DarkPaletteEnum2;
10
+ })(DarkPaletteEnum || {});
11
+ export {
12
+ DarkPaletteEnum,
13
+ LightPaletteEnum
14
+ };
15
+ //# sourceMappingURL=appearance-sync.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/utility-wrappers/appearance-sync/appearance-sync.type.ts"],"sourcesContent":["export enum LightPaletteEnum {\n BRIGHT = \"bright\",\n SOFT = \"soft\",\n}\n\nexport enum DarkPaletteEnum {\n SOFT = \"soft\",\n DEEP = \"deep\",\n}\n\nexport type LightPaletteValue = `${LightPaletteEnum}`;\n\nexport type DarkPaletteValue = `${DarkPaletteEnum}`;\n\nexport interface IAppearancePalettes {\n lightPalette: LightPaletteValue;\n darkPalette: DarkPaletteValue;\n}\n"],"mappings":"AAAO,IAAK,mBAAL,kBAAKA,sBAAL;AACL,EAAAA,kBAAA,YAAS;AACT,EAAAA,kBAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;AAKL,IAAK,kBAAL,kBAAKC,qBAAL;AACL,EAAAA,iBAAA,UAAO;AACP,EAAAA,iBAAA,UAAO;AAFG,SAAAA;AAAA,GAAA;","names":["LightPaletteEnum","DarkPaletteEnum"]}
@@ -0,0 +1,10 @@
1
+ import { type IAppearancePalettes } from "./appearance-sync.type.js";
2
+ export declare const LIGHT_PALETTE_ATTR = "data-light-palette";
3
+ export declare const DARK_PALETTE_ATTR = "data-dark-palette";
4
+ /**
5
+ * Applies light/dark palette data attributes on `document.documentElement`.
6
+ * Persistence and theme mode (light/dark/system) remain the app's responsibility.
7
+ */
8
+ export declare function applyAppearanceToDocument({ lightPalette, darkPalette, }: IAppearancePalettes): void;
9
+ export declare const DEFAULT_APPEARANCE_PALETTES: IAppearancePalettes;
10
+ //# sourceMappingURL=apply-appearance.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"apply-appearance.d.ts","sourceRoot":"","sources":["../../../../src/components/utility-wrappers/appearance-sync/apply-appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AAErD;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,YAAY,EACZ,WAAW,GACZ,EAAE,mBAAmB,GAAG,IAAI,CAM5B;AAED,eAAO,MAAM,2BAA2B,EAAE,mBAGzC,CAAC"}
@@ -0,0 +1,26 @@
1
+ import {
2
+ DarkPaletteEnum,
3
+ LightPaletteEnum
4
+ } from "./appearance-sync.type.js";
5
+ const LIGHT_PALETTE_ATTR = "data-light-palette";
6
+ const DARK_PALETTE_ATTR = "data-dark-palette";
7
+ function applyAppearanceToDocument({
8
+ lightPalette,
9
+ darkPalette
10
+ }) {
11
+ if (typeof document === "undefined") return;
12
+ const html = document.documentElement;
13
+ html.setAttribute(LIGHT_PALETTE_ATTR, lightPalette);
14
+ html.setAttribute(DARK_PALETTE_ATTR, darkPalette);
15
+ }
16
+ const DEFAULT_APPEARANCE_PALETTES = {
17
+ lightPalette: LightPaletteEnum.BRIGHT,
18
+ darkPalette: DarkPaletteEnum.SOFT
19
+ };
20
+ export {
21
+ DARK_PALETTE_ATTR,
22
+ DEFAULT_APPEARANCE_PALETTES,
23
+ LIGHT_PALETTE_ATTR,
24
+ applyAppearanceToDocument
25
+ };
26
+ //# sourceMappingURL=apply-appearance.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/utility-wrappers/appearance-sync/apply-appearance.ts"],"sourcesContent":["import {\n DarkPaletteEnum,\n LightPaletteEnum,\n type IAppearancePalettes,\n} from \"./appearance-sync.type.js\";\n\nexport const LIGHT_PALETTE_ATTR = \"data-light-palette\";\nexport const DARK_PALETTE_ATTR = \"data-dark-palette\";\n\n/**\n * Applies light/dark palette data attributes on `document.documentElement`.\n * Persistence and theme mode (light/dark/system) remain the app's responsibility.\n */\nexport function applyAppearanceToDocument({\n lightPalette,\n darkPalette,\n}: IAppearancePalettes): void {\n if (typeof document === \"undefined\") return;\n\n const html = document.documentElement;\n html.setAttribute(LIGHT_PALETTE_ATTR, lightPalette);\n html.setAttribute(DARK_PALETTE_ATTR, darkPalette);\n}\n\nexport const DEFAULT_APPEARANCE_PALETTES: IAppearancePalettes = {\n lightPalette: LightPaletteEnum.BRIGHT,\n darkPalette: DarkPaletteEnum.SOFT,\n};\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEA,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAM1B,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AACF,GAA8B;AAC5B,MAAI,OAAO,aAAa,YAAa;AAErC,QAAM,OAAO,SAAS;AACtB,OAAK,aAAa,oBAAoB,YAAY;AAClD,OAAK,aAAa,mBAAmB,WAAW;AAClD;AAEO,MAAM,8BAAmD;AAAA,EAC9D,cAAc,iBAAiB;AAAA,EAC/B,aAAa,gBAAgB;AAC/B;","names":[]}
@@ -0,0 +1,5 @@
1
+ export { AppearanceSync } from "./appearance-sync.js";
2
+ export type { IAppearanceSyncProps } from "./appearance-sync.js";
3
+ export { applyAppearanceToDocument, DEFAULT_APPEARANCE_PALETTES, LIGHT_PALETTE_ATTR, DARK_PALETTE_ATTR, } from "./apply-appearance.js";
4
+ export { LightPaletteEnum, DarkPaletteEnum, type LightPaletteValue, type DarkPaletteValue, type IAppearancePalettes, } from "./appearance-sync.type.js";
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/utility-wrappers/appearance-sync/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1,21 @@
1
+ import { AppearanceSync } from "./appearance-sync.js";
2
+ import {
3
+ applyAppearanceToDocument,
4
+ DEFAULT_APPEARANCE_PALETTES,
5
+ LIGHT_PALETTE_ATTR,
6
+ DARK_PALETTE_ATTR
7
+ } from "./apply-appearance.js";
8
+ import {
9
+ LightPaletteEnum,
10
+ DarkPaletteEnum
11
+ } from "./appearance-sync.type.js";
12
+ export {
13
+ AppearanceSync,
14
+ DARK_PALETTE_ATTR,
15
+ DEFAULT_APPEARANCE_PALETTES,
16
+ DarkPaletteEnum,
17
+ LIGHT_PALETTE_ATTR,
18
+ LightPaletteEnum,
19
+ applyAppearanceToDocument
20
+ };
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/utility-wrappers/appearance-sync/index.ts"],"sourcesContent":["export { AppearanceSync } from \"./appearance-sync.js\";\nexport type { IAppearanceSyncProps } from \"./appearance-sync.js\";\nexport {\n applyAppearanceToDocument,\n DEFAULT_APPEARANCE_PALETTES,\n LIGHT_PALETTE_ATTR,\n DARK_PALETTE_ATTR,\n} from \"./apply-appearance.js\";\nexport {\n LightPaletteEnum,\n DarkPaletteEnum,\n type LightPaletteValue,\n type DarkPaletteValue,\n type IAppearancePalettes,\n} from \"./appearance-sync.type.js\";\n"],"mappings":"AAAA,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAIK;","names":[]}
@@ -1,3 +1,4 @@
1
+ export * from "./appearance-sync/index.js";
1
2
  export * from "./install-prompt/index.js";
2
3
  export * from "./locale-sync/index.js";
3
4
  export * from "./query-provider/index.js";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utility-wrappers/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wCAAwC,CAAC;AACvD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utility-wrappers/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wCAAwC,CAAC;AACvD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}
@@ -1,3 +1,4 @@
1
+ export * from "./appearance-sync/index.js";
1
2
  export * from "./install-prompt/index.js";
2
3
  export * from "./locale-sync/index.js";
3
4
  export * from "./query-provider/index.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/utility-wrappers/index.ts"],"sourcesContent":["export * from \"./install-prompt/index.js\";\nexport * from \"./locale-sync/index.js\";\nexport * from \"./query-provider/index.js\";\nexport * from \"./service-worker-registration/index.js\";\nexport * from \"./theme-provider/index.js\";\nexport * from \"./themed-toaster/index.js\";\nexport * from \"./toast/index.js\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/utility-wrappers/index.ts"],"sourcesContent":["export * from \"./appearance-sync/index.js\";\nexport * from \"./install-prompt/index.js\";\nexport * from \"./locale-sync/index.js\";\nexport * from \"./query-provider/index.js\";\nexport * from \"./service-worker-registration/index.js\";\nexport * from \"./theme-provider/index.js\";\nexport * from \"./themed-toaster/index.js\";\nexport * from \"./toast/index.js\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noambz/ui",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "description": "Shared React UI library: atomic design system, Tailwind v4 tokens, Radix primitives, Storybook docs. Built for Next.js 16 + React 19.",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -44,7 +44,57 @@
44
44
  color-scheme: light;
45
45
  }
46
46
 
47
- .dark {
47
+ :root[data-light-palette="soft"] {
48
+ --ui-background: #f4f4f5;
49
+ --ui-foreground: #0a0a0a;
50
+
51
+ --ui-surface: #ffffff;
52
+ --ui-surface-muted: #e4e4e7;
53
+ --ui-surface-raised: #fafafa;
54
+
55
+ --ui-border: #d4d4d8;
56
+ --ui-border-strong: #a1a1aa;
57
+
58
+ --ui-accent: #e4e4e7;
59
+ --ui-accent-foreground: #18181b;
60
+
61
+ --ui-focus-ring-offset: #f4f4f5;
62
+ }
63
+
64
+ .dark,
65
+ .dark[data-dark-palette="soft"] {
66
+ --ui-background: #141416;
67
+ --ui-foreground: #fafafa;
68
+
69
+ --ui-surface: #1c1c1f;
70
+ --ui-surface-muted: #27272a;
71
+ --ui-surface-raised: #2e2e33;
72
+
73
+ --ui-border: #3f3f46;
74
+ --ui-border-strong: #52525b;
75
+
76
+ --ui-muted: #a1a1aa;
77
+ --ui-muted-foreground: #d4d4d8;
78
+
79
+ --ui-primary: #3b82f6;
80
+ --ui-primary-foreground: #f8fafc;
81
+ --ui-primary-hover: #60a5fa;
82
+
83
+ --ui-accent: #3f3f46;
84
+ --ui-accent-foreground: #f4f4f5;
85
+
86
+ --ui-success: #22c55e;
87
+ --ui-warning: #f59e0b;
88
+ --ui-danger: #ef4444;
89
+ --ui-info: #38bdf8;
90
+
91
+ --ui-ring: #60a5fa;
92
+ --ui-focus-ring-offset: #141416;
93
+
94
+ color-scheme: dark;
95
+ }
96
+
97
+ .dark[data-dark-palette="deep"] {
48
98
  --ui-background: #0a0a0a;
49
99
  --ui-foreground: #fafafa;
50
100