@noambz/ui 0.7.1 → 0.8.0

package/dist/components/molecules/social-post-card/social-post-card.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn.js";
+import { Avatar, AvatarFallback } from "../../atoms/avatar/avatar.js";
+import { Tag } from "../../atoms/tag/tag.js";
+import { Card, CardBody } from "../card/card.js";
+const SocialPostCard = forwardRef(
+  ({
+    author,
+    handle,
+    body,
+    meta,
+    ticker,
+    href,
+    external = false,
+    className,
+    ...props
+  }, ref) => {
+    const initials = typeof author === "string" && author.trim().length > 0 ? author.trim().slice(0, 1).toUpperCase() : "?";
+    const content = /* @__PURE__ */ jsx(
+      Card,
+      {
+        ref,
+        padding: "sm",
+        className: cn("h-full w-[17.5rem] shrink-0", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(CardBody, { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx(Avatar, { size: "sm", children: /* @__PURE__ */ jsx(AvatarFallback, { children: initials }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: author }),
+              handle ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: handle }) : null
+            ] }),
+            ticker ? /* @__PURE__ */ jsx(Tag, { size: "sm", children: ticker }) : null
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "line-clamp-4 text-sm leading-snug text-foreground", children: body }),
+          meta ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: meta }) : null
+        ] })
+      }
+    );
+    if (!href) {
+      return content;
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        className: "block shrink-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: content
+      }
+    );
+  }
+);
+SocialPostCard.displayName = "SocialPostCard";
+export {
+  SocialPostCard
+};
+//# sourceMappingURL=social-post-card.js.map

package/dist/components/molecules/social-post-card/social-post-card.js.map

@@ -0,0 +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":[]}

package/dist/components/molecules/social-post-card/social-post-card.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SocialPostCard } from "./social-post-card.js";
+declare const meta: Meta<typeof SocialPostCard>;
+export default meta;
+type Story = StoryObj<typeof SocialPostCard>;
+export declare const Default: Story;
+//# sourceMappingURL=social-post-card.stories.d.ts.map

package/dist/components/molecules/social-post-card/social-post-card.stories.d.ts.map

@@ -0,0 +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"}

package/dist/components/organisms/horizontal-scroller/horizontal-scroller.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface IHorizontalScrollerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode;
+    autoplay?: boolean;
+    autoplayIntervalMs?: number;
+    ariaLabel?: string;
+}
+/**
+ * Horizontal snap-scrolling rail with optional autoplay and pause on hover/focus.
+ */
+export declare function HorizontalScroller({ children, autoplay, autoplayIntervalMs, ariaLabel, className, ...props }: IHorizontalScrollerProps): import("react").JSX.Element;
+//# sourceMappingURL=horizontal-scroller.d.ts.map

package/dist/components/organisms/horizontal-scroller/horizontal-scroller.d.ts.map

@@ -0,0 +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"}

package/dist/components/organisms/horizontal-scroller/horizontal-scroller.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  Children,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../../utils/cn.js";
+const DEFAULT_AUTOPLAY_INTERVAL_MS = 3500;
+const SCROLL_STEP_PX = 280;
+function HorizontalScroller({
+  children,
+  autoplay = false,
+  autoplayIntervalMs = DEFAULT_AUTOPLAY_INTERVAL_MS,
+  ariaLabel = "Horizontal scroller",
+  className,
+  ...props
+}) {
+  const scrollerRef = useRef(null);
+  const [paused, setPaused] = useState(false);
+  const items = Children.toArray(children);
+  useEffect(() => {
+    if (!autoplay || paused) {
+      return;
+    }
+    const node = scrollerRef.current;
+    if (node === null) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      const maxScroll = node.scrollWidth - node.clientWidth;
+      if (maxScroll <= 0) {
+        return;
+      }
+      const next = node.scrollLeft + SCROLL_STEP_PX;
+      if (next >= maxScroll - 1) {
+        node.scrollTo({ left: 0, behavior: "smooth" });
+      } else {
+        node.scrollTo({ left: next, behavior: "smooth" });
+      }
+    }, autoplayIntervalMs);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [autoplay, autoplayIntervalMs, paused]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative", className),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setPaused(false);
+        }
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollerRef,
+          role: "region",
+          "aria-label": ariaLabel,
+          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",
+          children: items.map((child, index) => /* @__PURE__ */ jsx("div", { className: "snap-start", children: child }, index))
+        }
+      )
+    }
+  );
+}
+export {
+  HorizontalScroller
+};
+//# sourceMappingURL=horizontal-scroller.js.map

package/dist/components/organisms/horizontal-scroller/horizontal-scroller.js.map

@@ -0,0 +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":[]}

package/dist/components/organisms/horizontal-scroller/horizontal-scroller.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HorizontalScroller } from "./horizontal-scroller.js";
+declare const meta: Meta<typeof HorizontalScroller>;
+export default meta;
+type Story = StoryObj<typeof HorizontalScroller>;
+export declare const AutoplayCards: Story;
+//# sourceMappingURL=horizontal-scroller.stories.d.ts.map

package/dist/components/organisms/horizontal-scroller/horizontal-scroller.stories.d.ts.map

@@ -0,0 +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"}

package/dist/components/organisms/horizontal-scroller/index.d.ts

@@ -0,0 +1,2 @@
+export { HorizontalScroller, type IHorizontalScrollerProps, } from "./horizontal-scroller.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/horizontal-scroller/index.d.ts.map

@@ -0,0 +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"}

package/dist/components/organisms/horizontal-scroller/index.js

@@ -0,0 +1,7 @@
+import {
+  HorizontalScroller
+} from "./horizontal-scroller.js";
+export {
+  HorizontalScroller
+};
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/horizontal-scroller/index.js.map

@@ -0,0 +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":[]}

package/dist/components/organisms/index.d.ts

@@ -7,6 +7,7 @@ export * from "./data-grid/index.js";
 export * from "./date-picker/index.js";
 export * from "./drawer/index.js";
 export * from "./file-upload/index.js";
+export * from "./horizontal-scroller/index.js";
 export * from "./modal/index.js";
 export * from "./page-scaffolds/index.js";
 export * from "./paginated-data-grid/index.js";

package/dist/components/organisms/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/components/organisms/index.js

@@ -7,6 +7,7 @@ export * from "./data-grid/index.js";
 export * from "./date-picker/index.js";
 export * from "./drawer/index.js";
 export * from "./file-upload/index.js";
+export * from "./horizontal-scroller/index.js";
 export * from "./modal/index.js";
 export * from "./page-scaffolds/index.js";
 export * from "./paginated-data-grid/index.js";

package/dist/components/organisms/index.js.map

@@ -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":[]}
+{"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":[]}

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.d.ts

@@ -0,0 +1,12 @@
+import type { DarkPaletteValue, LightPaletteValue } from "./appearance-sync.type.js";
+export interface IAppearanceSyncProps {
+    lightPalette?: LightPaletteValue;
+    darkPalette?: DarkPaletteValue;
+}
+/**
+ * Syncs palette data attributes on `<html>` from controlled props.
+ * Pair with `next-themes` for light/dark/system class switching; this component
+ * does not own persistence.
+ */
+export declare function AppearanceSync({ lightPalette, darkPalette, }: IAppearanceSyncProps): null;
+//# sourceMappingURL=appearance-sync.d.ts.map

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.d.ts.map

@@ -0,0 +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"}

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect } from "react";
+import {
+  applyAppearanceToDocument,
+  DEFAULT_APPEARANCE_PALETTES
+} from "./apply-appearance.js";
+function AppearanceSync({
+  lightPalette = DEFAULT_APPEARANCE_PALETTES.lightPalette,
+  darkPalette = DEFAULT_APPEARANCE_PALETTES.darkPalette
+}) {
+  useEffect(() => {
+    applyAppearanceToDocument({ lightPalette, darkPalette });
+  }, [lightPalette, darkPalette]);
+  return null;
+}
+export {
+  AppearanceSync
+};
+//# sourceMappingURL=appearance-sync.js.map

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.js.map

@@ -0,0 +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":[]}

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.d.ts

@@ -0,0 +1,15 @@
+export declare enum LightPaletteEnum {
+    BRIGHT = "bright",
+    SOFT = "soft"
+}
+export declare enum DarkPaletteEnum {
+    SOFT = "soft",
+    DEEP = "deep"
+}
+export type LightPaletteValue = `${LightPaletteEnum}`;
+export type DarkPaletteValue = `${DarkPaletteEnum}`;
+export interface IAppearancePalettes {
+    lightPalette: LightPaletteValue;
+    darkPalette: DarkPaletteValue;
+}
+//# sourceMappingURL=appearance-sync.type.d.ts.map

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.d.ts.map

@@ -0,0 +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"}

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.js

@@ -0,0 +1,15 @@
+var LightPaletteEnum = /* @__PURE__ */ ((LightPaletteEnum2) => {
+  LightPaletteEnum2["BRIGHT"] = "bright";
+  LightPaletteEnum2["SOFT"] = "soft";
+  return LightPaletteEnum2;
+})(LightPaletteEnum || {});
+var DarkPaletteEnum = /* @__PURE__ */ ((DarkPaletteEnum2) => {
+  DarkPaletteEnum2["SOFT"] = "soft";
+  DarkPaletteEnum2["DEEP"] = "deep";
+  return DarkPaletteEnum2;
+})(DarkPaletteEnum || {});
+export {
+  DarkPaletteEnum,
+  LightPaletteEnum
+};
+//# sourceMappingURL=appearance-sync.type.js.map

package/dist/components/utility-wrappers/appearance-sync/appearance-sync.type.js.map

@@ -0,0 +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"]}

package/dist/components/utility-wrappers/appearance-sync/apply-appearance.d.ts

@@ -0,0 +1,10 @@
+import { type IAppearancePalettes } from "./appearance-sync.type.js";
+export declare const LIGHT_PALETTE_ATTR = "data-light-palette";
+export declare const DARK_PALETTE_ATTR = "data-dark-palette";
+/**
+ * Applies light/dark palette data attributes on `document.documentElement`.
+ * Persistence and theme mode (light/dark/system) remain the app's responsibility.
+ */
+export declare function applyAppearanceToDocument({ lightPalette, darkPalette, }: IAppearancePalettes): void;
+export declare const DEFAULT_APPEARANCE_PALETTES: IAppearancePalettes;
+//# sourceMappingURL=apply-appearance.d.ts.map

package/dist/components/utility-wrappers/appearance-sync/apply-appearance.d.ts.map

@@ -0,0 +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"}

package/dist/components/utility-wrappers/appearance-sync/apply-appearance.js

@@ -0,0 +1,26 @@
+import {
+  DarkPaletteEnum,
+  LightPaletteEnum
+} from "./appearance-sync.type.js";
+const LIGHT_PALETTE_ATTR = "data-light-palette";
+const DARK_PALETTE_ATTR = "data-dark-palette";
+function applyAppearanceToDocument({
+  lightPalette,
+  darkPalette
+}) {
+  if (typeof document === "undefined") return;
+  const html = document.documentElement;
+  html.setAttribute(LIGHT_PALETTE_ATTR, lightPalette);
+  html.setAttribute(DARK_PALETTE_ATTR, darkPalette);
+}
+const DEFAULT_APPEARANCE_PALETTES = {
+  lightPalette: LightPaletteEnum.BRIGHT,
+  darkPalette: DarkPaletteEnum.SOFT
+};
+export {
+  DARK_PALETTE_ATTR,
+  DEFAULT_APPEARANCE_PALETTES,
+  LIGHT_PALETTE_ATTR,
+  applyAppearanceToDocument
+};
+//# sourceMappingURL=apply-appearance.js.map

package/dist/components/utility-wrappers/appearance-sync/apply-appearance.js.map

@@ -0,0 +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":[]}

package/dist/components/utility-wrappers/appearance-sync/index.d.ts

@@ -0,0 +1,5 @@
+export { AppearanceSync } from "./appearance-sync.js";
+export type { IAppearanceSyncProps } from "./appearance-sync.js";
+export { applyAppearanceToDocument, DEFAULT_APPEARANCE_PALETTES, LIGHT_PALETTE_ATTR, DARK_PALETTE_ATTR, } from "./apply-appearance.js";
+export { LightPaletteEnum, DarkPaletteEnum, type LightPaletteValue, type DarkPaletteValue, type IAppearancePalettes, } from "./appearance-sync.type.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/utility-wrappers/appearance-sync/index.d.ts.map

@@ -0,0 +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"}

package/dist/components/utility-wrappers/appearance-sync/index.js

@@ -0,0 +1,21 @@
+import { AppearanceSync } from "./appearance-sync.js";
+import {
+  applyAppearanceToDocument,
+  DEFAULT_APPEARANCE_PALETTES,
+  LIGHT_PALETTE_ATTR,
+  DARK_PALETTE_ATTR
+} from "./apply-appearance.js";
+import {
+  LightPaletteEnum,
+  DarkPaletteEnum
+} from "./appearance-sync.type.js";
+export {
+  AppearanceSync,
+  DARK_PALETTE_ATTR,
+  DEFAULT_APPEARANCE_PALETTES,
+  DarkPaletteEnum,
+  LIGHT_PALETTE_ATTR,
+  LightPaletteEnum,
+  applyAppearanceToDocument
+};
+//# sourceMappingURL=index.js.map

package/dist/components/utility-wrappers/appearance-sync/index.js.map

@@ -0,0 +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":[]}

package/dist/components/utility-wrappers/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./appearance-sync/index.js";
 export * from "./install-prompt/index.js";
 export * from "./locale-sync/index.js";
 export * from "./query-provider/index.js";

package/dist/components/utility-wrappers/index.d.ts.map

@@ -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"}
+{"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"}

package/dist/components/utility-wrappers/index.js

@@ -1,3 +1,4 @@
+export * from "./appearance-sync/index.js";
 export * from "./install-prompt/index.js";
 export * from "./locale-sync/index.js";
 export * from "./query-provider/index.js";

package/dist/components/utility-wrappers/index.js.map

@@ -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":[]}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@noambz/ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Shared React UI library: atomic design system, Tailwind v4 tokens, Radix primitives, Storybook docs. Built for Next.js 16 + React 19.",
   "type": "module",
   "sideEffects": [

package/src/styles/theme.css

@@ -44,7 +44,57 @@
   color-scheme: light;
 }
 
-.dark {
+:root[data-light-palette="soft"] {
+  --ui-background: #f4f4f5;
+  --ui-foreground: #0a0a0a;
+
+  --ui-surface: #ffffff;
+  --ui-surface-muted: #e4e4e7;
+  --ui-surface-raised: #fafafa;
+
+  --ui-border: #d4d4d8;
+  --ui-border-strong: #a1a1aa;
+
+  --ui-accent: #e4e4e7;
+  --ui-accent-foreground: #18181b;
+
+  --ui-focus-ring-offset: #f4f4f5;
+}
+
+.dark,
+.dark[data-dark-palette="soft"] {
+  --ui-background: #141416;
+  --ui-foreground: #fafafa;
+
+  --ui-surface: #1c1c1f;
+  --ui-surface-muted: #27272a;
+  --ui-surface-raised: #2e2e33;
+
+  --ui-border: #3f3f46;
+  --ui-border-strong: #52525b;
+
+  --ui-muted: #a1a1aa;
+  --ui-muted-foreground: #d4d4d8;
+
+  --ui-primary: #3b82f6;
+  --ui-primary-foreground: #f8fafc;
+  --ui-primary-hover: #60a5fa;
+
+  --ui-accent: #3f3f46;
+  --ui-accent-foreground: #f4f4f5;
+
+  --ui-success: #22c55e;
+  --ui-warning: #f59e0b;
+  --ui-danger: #ef4444;
+  --ui-info: #38bdf8;
+
+  --ui-ring: #60a5fa;
+  --ui-focus-ring-offset: #141416;
+
+  color-scheme: dark;
+}
+
+.dark[data-dark-palette="deep"] {
   --ui-background: #0a0a0a;
   --ui-foreground: #fafafa;