@psnext/design-system 1.5.1 → 2.0.0

package/dist/index71.d.ts

@@ -0,0 +1,242 @@
+import { r as ThemeProduct } from "./index63.js";
+import * as React from "react";
+import { ReactNode } from "react";
+import * as react_jsx_runtime218 from "react/jsx-runtime";
+
+//#region src/patterns/Header/types.d.ts
+/** A node in the project hierarchy returned by the projects API. */
+interface ProjectNode {
+  id: string;
+  name: string;
+  children: ProjectNode[];
+  /** Ancestor context node — shown for orientation but not selectable. */
+  isContextOnly?: boolean;
+}
+/** Fully-qualified API endpoints. Built from `apiBaseUrl`; individually overridable. */
+interface HeaderEndpoints {
+  token: string;
+  me: string;
+  logout: string;
+  projects: (clientId: string) => string;
+  credits: string;
+}
+/** A fetch-compatible function, so hosts/tests can inject their own (e.g. mocks). */
+type Fetcher = typeof fetch;
+/** Props for the wired {@link Header} pattern (auth, data layer, and visibility toggles). */
+interface HeaderProps {
+  /** API base URL with full domain, e.g. `https://dev.abc.com`. Studio-auth API host. */
+  apiBaseUrl: string;
+  /**
+   * Environment id used to read the session cookie `{environmentId}-sessionId`
+   * (a JWT) — the header decodes it to determine whether the user is logged in.
+   */
+  environmentId: string;
+  /** Logo to show. Defaults to the active product from ThemeProvider. */
+  logoType?: ThemeProduct;
+  /** Show the read-only organisation pill. */
+  showOrg?: boolean;
+  /** Show the project picker (and the first-run selection overlay). */
+  showProjectDropdown?: boolean;
+  /** Show the profile menu (user email + logout). */
+  showProfile?: boolean;
+  /** Show the light/dark theme toggle. */
+  showThemeSwitcher?: boolean;
+  /** Show the remaining-credits pill (logged-in users only). */
+  showCredits?: boolean;
+  /** Page title shown next to the logo. Omitted when not provided. */
+  pageTitle?: string;
+  /**
+   * URL for the feedback action (message-square-share icon). When omitted the
+   * icon is hidden; when set, the icon renders and links here.
+   */
+  feedbackUrl?: string;
+  /** Active org id from the host session; overrides the value from `/me`. */
+  clientId?: string;
+  /**
+   * ESCAPE HATCH — avoid. Inject a pre-resolved access token to skip the header's
+   * own token fetch. The header is designed to resolve its own token from the
+   * session cookie; only reach for this when the host has *already* fetched a
+   * token and a duplicate round-trip is genuinely unacceptable. Misuse couples
+   * the header to host token lifecycle/refresh and can serve stale auth.
+   */
+  _dangerouslyInjectAccessToken?: string;
+  /** Called when the user picks a project. */
+  onProjectChange?: (id: string) => void;
+  /** Called when the user closes the selection overlay. */
+  onCloseProjectOverlay?: () => void;
+  /** Node rendered between the logo and the project picker. */
+  logoAddon?: ReactNode;
+  className?: string;
+  /** Override individual endpoint paths (defaults derive from `apiBaseUrl`). */
+  endpoints?: Partial<Omit<HeaderEndpoints, "projects">> & {
+    projects?: (clientId: string) => string;
+  };
+  /** Custom fetch implementation (defaults to global `fetch`). Useful for tests/Storybook. */
+  fetcher?: Fetcher;
+  /** How long fetched data stays fresh before refetch, in ms. Default 5 min. */
+  staleTime?: number;
+  /** How long unused data is cached, in ms. Default 10 min. */
+  gcTime?: number;
+}
+//# sourceMappingURL=types.d.ts.map
+//#endregion
+//#region src/patterns/Header/Header.d.ts
+/** The header bar shell — a sticky glass strip. */
+declare function HeaderBar({
+  className,
+  ...props
+}: React.ComponentProps<"header">): react_jsx_runtime218.JSX.Element;
+/** Product logo linking to its home, with a Suspense-safe fallback. */
+declare function HeaderLogo({
+  brand
+}: {
+  brand: ThemeProduct;
+}): react_jsx_runtime218.JSX.Element;
+/** Read-only organisation pill. */
+declare function OrgPill({
+  name,
+  loading
+}: {
+  name?: string;
+  loading?: boolean;
+}): react_jsx_runtime218.JSX.Element | null;
+/** Light/dark toggle — defers to ThemeProvider. */
+declare function ThemeToggle(): react_jsx_runtime218.JSX.Element;
+/** Profile menu — avatar trigger with email + logout. */
+declare function ProfileMenu({
+  email,
+  onLogout
+}: {
+  email?: string;
+  onLogout: () => void;
+}): react_jsx_runtime218.JSX.Element;
+/** Drop-in global header. Must be rendered inside a <ThemeProvider>. */
+declare function Header(props: HeaderProps): react_jsx_runtime218.JSX.Element;
+//# sourceMappingURL=Header.d.ts.map
+//#endregion
+//#region src/patterns/Header/ProjectPicker.d.ts
+interface ProjectPickerProps {
+  projectsTree: ProjectNode[];
+  selectedProjectId: string;
+  selectedProjectName?: string;
+  onSelect: (id: string) => void;
+  projectLabel: string;
+  projectPlaceholder: string;
+  searchPlaceholder: string;
+  emptyStateText: string;
+  isLoading?: boolean;
+}
+declare function ProjectPicker({
+  projectsTree,
+  selectedProjectId,
+  selectedProjectName,
+  onSelect,
+  projectLabel,
+  projectPlaceholder,
+  searchPlaceholder,
+  emptyStateText,
+  isLoading
+}: Readonly<ProjectPickerProps>): react_jsx_runtime218.JSX.Element;
+//#endregion
+//#region src/patterns/Header/use-global-header.d.ts
+/** Window event other modules can dispatch to show/hide the project dropdown. */
+declare const TOGGLE_PROJECT_DROPDOWN_EVENT = "toggle-project-dropdown";
+interface ToggleProjectDropdownDetail {
+  show: boolean;
+}
+interface GlobalHeaderState {
+  /** Whether a valid session cookie exists — when false, hide all user content. */
+  isAuthenticated: boolean;
+  userEmail: string | undefined;
+  organizationName: string | undefined;
+  projectsTree: ProjectNode[];
+  selectedProjectId: string;
+  selectedProjectName: string | undefined;
+  isProjectsLoading: boolean;
+  isOrgLoading: boolean;
+  /** Remaining credits for the user (undefined until loaded / when disabled). */
+  credits: number | undefined;
+  /** Where the credits pill links to (studio-auth `/user/activity`). */
+  creditsHref: string;
+  projectDropdownVisible: boolean;
+  /** True when the dropdown is on, the user is in, but no project is chosen yet. */
+  showOverlay: boolean;
+  selectProject: (id: string) => void;
+  logout: () => void;
+}
+type UseGlobalHeaderArgs = Pick<HeaderProps, "apiBaseUrl" | "environmentId" | "clientId" | "_dangerouslyInjectAccessToken" | "showProjectDropdown" | "showProfile" | "showOrg" | "showCredits" | "endpoints" | "fetcher" | "staleTime" | "gcTime" | "onProjectChange">;
+declare function useGlobalHeader({
+  apiBaseUrl,
+  environmentId,
+  clientId,
+  _dangerouslyInjectAccessToken: injectedToken,
+  showProjectDropdown,
+  showProfile,
+  showOrg,
+  showCredits,
+  endpoints: endpointOverrides,
+  fetcher: fetcherProp,
+  staleTime,
+  gcTime,
+  onProjectChange
+}: UseGlobalHeaderArgs): GlobalHeaderState;
+//#endregion
+//#region src/patterns/Header/header-store.d.ts
+interface HeaderSelection {
+  selectedProjectId: string;
+  selectedProjectName: string;
+  organizationName: string | undefined;
+  /** Remaining credits for the logged-in user (read-only here; set by the Header). */
+  credits: number | undefined;
+  /** Client/org the current selection + org belong to (for cross-org invalidation). */
+  clientId: string | undefined;
+}
+interface UseHeaderProjectResult {
+  selectedProjectId: string;
+  selectedProjectName: string | undefined;
+  organizationName: string | undefined;
+  /** Set the active project from outside the Header (by id). */
+  setProject: (id: string) => void;
+  /** Clear the active project (e.g. to re-prompt selection). */
+  clearProject: () => void;
+}
+/**
+ * Read the current project/org and change the project from anywhere in the app —
+ * no need to be inside the <Header>. Reflects user selections made in the header
+ * and updates the header when changed here.
+ */
+declare function useHeaderProject(): UseHeaderProjectResult;
+/** Read the logged-in user's remaining credits (read-only; the Header owns it). */
+declare function useHeaderCredits(): number | undefined;
+//# sourceMappingURL=header-store.d.ts.map
+//#endregion
+//#region src/patterns/Header/session.d.ts
+/** Read the raw session JWT from the `{environmentId}-sessionId` cookie. */
+declare function getSessionToken(environmentId: string): string | null;
+/** Decode a JWT payload without verifying the signature (display/expiry only). */
+
+/** True when a valid, unexpired session cookie exists for the environment. */
+declare function isSessionValid(environmentId: string): boolean;
+//#endregion
+//#region src/patterns/Header/api.d.ts
+declare function buildEndpoints(apiBaseUrl: string, overrides?: HeaderProps["endpoints"]): HeaderEndpoints;
+//#endregion
+//#region src/patterns/Header/labels.d.ts
+/** Default UI strings. Spread-override via the Header `labels` prop if needed. */
+declare const DEFAULT_LABELS: {
+  readonly orgLabel: "Org";
+  readonly projectLabel: "Project";
+  readonly projectPlaceholder: "Select project...";
+  readonly searchPlaceholder: "Search project";
+  readonly emptyStateText: "No projects found";
+  readonly profileMenuLabel: "Profile menu";
+  readonly logoutLabel: "Logout";
+  readonly overlayTitle: "Select a Project";
+  readonly overlayDescription: "Choose a project to get started. You can change it anytime from the header.";
+};
+type Labels = typeof DEFAULT_LABELS;
+//# sourceMappingURL=labels.d.ts.map
+
+//#endregion
+export { HeaderProps as C, HeaderEndpoints as S, HeaderLogo as _, isSessionValid as a, ThemeToggle as b, useHeaderCredits as c, TOGGLE_PROJECT_DROPDOWN_EVENT as d, ToggleProjectDropdownDetail as f, HeaderBar as g, Header as h, getSessionToken as i, useHeaderProject as l, ProjectPicker as m, Labels as n, HeaderSelection as o, useGlobalHeader as p, buildEndpoints as r, UseHeaderProjectResult as s, DEFAULT_LABELS as t, GlobalHeaderState as u, OrgPill as v, ProjectNode as w, Fetcher as x, ProfileMenu as y };
+//# sourceMappingURL=index71.d.ts.map

package/dist/index71.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index71.d.ts","names":[],"sources":["../src/patterns/Header/types.ts","../src/patterns/Header/Header.tsx","../src/patterns/Header/ProjectPicker.tsx","../src/patterns/Header/use-global-header.ts","../src/patterns/Header/header-store.ts","../src/patterns/Header/session.ts","../src/patterns/Header/api.ts","../src/patterns/Header/labels.ts"],"mappings":"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"}

package/dist/index8.d.cts

@@ -1,14 +1,14 @@
-import * as class_variance_authority_types1 from "class-variance-authority/types";
+import * as class_variance_authority_types24 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import * as react0 from "react";
 import { ComponentProps } from "react";
 
 //#region src/primitives/Button/Button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | null | undefined;
+  variant?: "default" | "outline" | "ai" | "destructive" | "link" | "secondary" | "ghost" | "destructive-ghost" | null | undefined;
+  size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
   shape?: "default" | "square" | null | undefined;
-} & class_variance_authority_types1.ClassProp) | undefined) => string;
+} & class_variance_authority_types24.ClassProp) | undefined) => string;
 type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
   /** Render as the child element (Radix `Slot`) instead of a native `<button>`. */
   asChild?: boolean;

package/dist/index8.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index8.d.cts","names":[],"sources":["../src/primitives/Button/Button.tsx"],"mappings":";;;;;;cAOM,sBAiCL;;;;AAtCuD,CAAA,GAsCvD,+BAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;KAEI,WAAA,GAAc,cAAH,CAAA,QAAA,CAAA,GACd,YADc,CAAA,OACM,cADN,CAAA,GAAA;EAAA;SAAG,CAAA,EAAA,OAAA;;SACjB,CAAA,EAAA,OAAA;AAAY,CAAA;AAAA;;;;;cAYR,MAAM,EAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,EAAA,KAAA,CAAA,GAAA,MAAA,CAAA,aAAA,CAAA,iBAAA,CAAA,CAAA"}
+{"version":3,"file":"index8.d.cts","names":[],"sources":["../src/primitives/Button/Button.tsx"],"mappings":";;;;;;cAUM,sBA4CL;;;;AApDuD,CAAA,GAoDvD,gCAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;KAEI,WAAA,GAAc,cAAH,CAAA,QAAA,CAAA,GACd,YADc,CAAA,OACM,cADN,CAAA,GAAA;EAAA;SAAG,CAAA,EAAA,OAAA;;SACjB,CAAA,EAAA,OAAA;AAAY,CAAA;AAAA;;;;;cAYR,MAAM,EAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,EAAA,KAAA,CAAA,GAAA,MAAA,CAAA,aAAA,CAAA,iBAAA,CAAA,CAAA"}

package/dist/index8.d.ts

@@ -1,14 +1,14 @@
 import * as react0 from "react";
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types25 from "class-variance-authority/types";
+import * as class_variance_authority_types15 from "class-variance-authority/types";
 
 //#region src/primitives/Button/Button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "outline" | "link" | "destructive" | "secondary" | "ghost" | null | undefined;
-  size?: "sm" | "lg" | "default" | "xs" | "icon" | null | undefined;
+  variant?: "default" | "link" | "destructive" | "outline" | "ai" | "secondary" | "ghost" | "destructive-ghost" | null | undefined;
+  size?: "xs" | "sm" | "lg" | "xl" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
   shape?: "default" | "square" | null | undefined;
-} & class_variance_authority_types25.ClassProp) | undefined) => string;
+} & class_variance_authority_types15.ClassProp) | undefined) => string;
 type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
   /** Render as the child element (Radix `Slot`) instead of a native `<button>`. */
   asChild?: boolean;

package/dist/index8.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index8.d.ts","names":[],"sources":["../src/primitives/Button/Button.tsx"],"mappings":";;;;;;cAOM,sBAiCL;;;;AAtCuD,CAAA,GAsCvD,gCAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;KAEI,WAAA,GAAc,cAAH,CAAA,QAAA,CAAA,GACd,YADc,CAAA,OACM,cADN,CAAA,GAAA;EAAA;SAAG,CAAA,EAAA,OAAA;;SACjB,CAAA,EAAA,OAAA;AAAY,CAAA;AAAA;;;;;cAYR,MAAM,EAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,EAAA,KAAA,CAAA,GAAA,MAAA,CAAA,aAAA,CAAA,iBAAA,CAAA,CAAA"}
+{"version":3,"file":"index8.d.ts","names":[],"sources":["../src/primitives/Button/Button.tsx"],"mappings":";;;;;;cAUM,sBA4CL;;;;AApDuD,CAAA,GAoDvD,gCAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;KAEI,WAAA,GAAc,cAAH,CAAA,QAAA,CAAA,GACd,YADc,CAAA,OACM,cADN,CAAA,GAAA;EAAA;SAAG,CAAA,EAAA,OAAA;;SACjB,CAAA,EAAA,OAAA;AAAY,CAAA;AAAA;;;;;cAYR,MAAM,EAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,EAAA,KAAA,CAAA,GAAA,MAAA,CAAA,aAAA,CAAA,iBAAA,CAAA,CAAA"}

package/dist/index9.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime286 from "react/jsx-runtime";
+import * as react_jsx_runtime114 from "react/jsx-runtime";
 import { Separator } from "radix-ui";
 import * as React from "react";
 
@@ -14,7 +14,7 @@ declare function Separator$1({
 }: React.ComponentProps<typeof Separator.Root> & {
   /** Margin applied around the rule along its axis: `none`, `regular`, or `spacious`. */
   spacing?: SeparatorSpacing;
-}): react_jsx_runtime286.JSX.Element;
+}): react_jsx_runtime114.JSX.Element;
 //#endregion
 export { SeparatorSpacing as n, Separator$1 as t };
 //# sourceMappingURL=index9.d.cts.map

package/dist/index9.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Separator } from "radix-ui";
-import * as react_jsx_runtime99 from "react/jsx-runtime";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
 
 //#region src/primitives/Separator/Separator.d.ts
 type SeparatorSpacing = "none" | "regular" | "spacious";
@@ -14,7 +14,7 @@ declare function Separator$1({
 }: React.ComponentProps<typeof Separator.Root> & {
   /** Margin applied around the rule along its axis: `none`, `regular`, or `spacious`. */
   spacing?: SeparatorSpacing;
-}): react_jsx_runtime99.JSX.Element;
+}): react_jsx_runtime61.JSX.Element;
 //#endregion
 export { SeparatorSpacing as n, Separator$1 as t };
 //# sourceMappingURL=index9.d.ts.map

package/dist/layouts/Container/index.cjs

@@ -5,14 +5,14 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const containerVariants = (0, require("class-variance-authority").cva)("mx-auto w-full", {
 	variants: {
 		size: {
-			narrow: "max-w-[900px]",
-			content: "max-w-[1200px]",
-			wide: "max-w-[1440px]",
+			narrow: "max-w-225",
+			content: "max-w-300",
+			wide: "max-w-360",
 			full: "max-w-none"
 		},
 		variant: {
 			default: "px-4",
-			glass: "rounded-2xl bg-[var(--glass-light)] px-4 py-4 backdrop-blur-glass sm:px-6"
+			glass: "rounded-16 bg-glass-40-bg px-4 py-4 backdrop-blur-glass sm:px-6"
 		}
 	},
 	defaultVariants: {

package/dist/layouts/Container/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/layouts/Container/Container.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Container — centered, max-width page column with consistent gutters.\n// `narrow` ~ a reading/hero column; `wide` ~ a full content area.\nconst containerVariants = cva(\"mx-auto w-full\", {\n  variants: {\n    size: {\n      narrow: \"max-w-[900px]\",\n      content: \"max-w-[1200px]\",\n      wide: \"max-w-[1440px]\",\n      full: \"max-w-none\",\n    },\n    // `glass` makes the centered column a translucent, blurred panel.\n    variant: {\n      default: \"px-4\",\n      glass: \"rounded-2xl bg-[var(--glass-light)] px-4 py-4 backdrop-blur-glass sm:px-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"content\",\n    variant: \"default\",\n  },\n});\n\ntype ContainerProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof containerVariants> & {\n    /** Element/component to render as instead of the default `div` (e.g. `main`, `section`). */\n    as?: React.ElementType;\n  };\n\n/** Centered, max-width page column with consistent gutters; optionally a glass panel. */\nfunction Container({ as, className, size, variant, ...props }: ContainerProps) {\n  const Comp = as ?? \"div\";\n  return (\n    <Comp\n      data-slot=\"container\"\n      data-variant={variant ?? \"default\"}\n      className={cn(containerVariants({ size, variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Container, containerVariants, type ContainerProps };\n"],"mappings":";;;;AAOA,MAAM,qBAAA,qCAAA,EAAA,KAAwB,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,SAAS;GACT,MAAM;GACN,MAAM;EACR;EAEA,SAAS;GACP,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;;AASD,SAAS,UAAU,EAAE,IAAI,WAAW,MAAM,SAAS,GAAG,SAAyB;CAE7E,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,OAEjB;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAWA,WAAAA,GAAG,kBAAkB;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/layouts/Container/Container.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Container — centered, max-width page column with consistent gutters.\n// `narrow` ~ a reading/hero column; `wide` ~ a full content area.\nconst containerVariants = cva(\"mx-auto w-full\", {\n  variants: {\n    size: {\n      narrow: \"max-w-225\",\n      content: \"max-w-300\",\n      wide: \"max-w-360\",\n      full: \"max-w-none\",\n    },\n    // `glass` makes the centered column a translucent, blurred panel.\n    variant: {\n      default: \"px-4\",\n      glass: \"rounded-16 bg-glass-40-bg px-4 py-4 backdrop-blur-glass sm:px-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"content\",\n    variant: \"default\",\n  },\n});\n\ntype ContainerProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof containerVariants> & {\n    /** Element/component to render as instead of the default `div` (e.g. `main`, `section`). */\n    as?: React.ElementType;\n  };\n\n/** Centered, max-width page column with consistent gutters; optionally a glass panel. */\nfunction Container({ as, className, size, variant, ...props }: ContainerProps) {\n  const Comp = as ?? \"div\";\n  return (\n    <Comp\n      data-slot=\"container\"\n      data-variant={variant ?? \"default\"}\n      className={cn(containerVariants({ size, variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Container, containerVariants, type ContainerProps };\n"],"mappings":";;;;AAOA,MAAM,qBAAA,qCAAA,EAAA,KAAwB,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,SAAS;GACT,MAAM;GACN,MAAM;EACR;EAEA,SAAS;GACP,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;;AASD,SAAS,UAAU,EAAE,IAAI,WAAW,MAAM,SAAS,GAAG,SAAyB;CAE7E,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,OAEjB;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAWA,WAAAA,GAAG,kBAAkB;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

package/dist/layouts/Container/index.d.cts

@@ -1,2 +1,2 @@
-import { n as ContainerProps, r as containerVariants, t as Container } from "../../index65.cjs";
+import { n as ContainerProps, r as containerVariants, t as Container } from "../../index66.cjs";
 export { Container, ContainerProps, containerVariants };

package/dist/layouts/Container/index.d.ts

@@ -1,2 +1,2 @@
-import { n as ContainerProps, r as containerVariants, t as Container } from "../../index65.js";
+import { n as ContainerProps, r as containerVariants, t as Container } from "../../index66.js";
 export { Container, ContainerProps, containerVariants };

package/dist/layouts/Container/index.js

@@ -5,14 +5,14 @@ import { cva } from "class-variance-authority";
 const containerVariants = cva("mx-auto w-full", {
 	variants: {
 		size: {
-			narrow: "max-w-[900px]",
-			content: "max-w-[1200px]",
-			wide: "max-w-[1440px]",
+			narrow: "max-w-225",
+			content: "max-w-300",
+			wide: "max-w-360",
 			full: "max-w-none"
 		},
 		variant: {
 			default: "px-4",
-			glass: "rounded-2xl bg-[var(--glass-light)] px-4 py-4 backdrop-blur-glass sm:px-6"
+			glass: "rounded-16 bg-glass-40-bg px-4 py-4 backdrop-blur-glass sm:px-6"
 		}
 	},
 	defaultVariants: {

package/dist/layouts/Container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/Container/Container.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Container — centered, max-width page column with consistent gutters.\n// `narrow` ~ a reading/hero column; `wide` ~ a full content area.\nconst containerVariants = cva(\"mx-auto w-full\", {\n  variants: {\n    size: {\n      narrow: \"max-w-[900px]\",\n      content: \"max-w-[1200px]\",\n      wide: \"max-w-[1440px]\",\n      full: \"max-w-none\",\n    },\n    // `glass` makes the centered column a translucent, blurred panel.\n    variant: {\n      default: \"px-4\",\n      glass: \"rounded-2xl bg-[var(--glass-light)] px-4 py-4 backdrop-blur-glass sm:px-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"content\",\n    variant: \"default\",\n  },\n});\n\ntype ContainerProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof containerVariants> & {\n    /** Element/component to render as instead of the default `div` (e.g. `main`, `section`). */\n    as?: React.ElementType;\n  };\n\n/** Centered, max-width page column with consistent gutters; optionally a glass panel. */\nfunction Container({ as, className, size, variant, ...props }: ContainerProps) {\n  const Comp = as ?? \"div\";\n  return (\n    <Comp\n      data-slot=\"container\"\n      data-variant={variant ?? \"default\"}\n      className={cn(containerVariants({ size, variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Container, containerVariants, type ContainerProps };\n"],"mappings":";;;;AAOA,MAAM,oBAAoB,IAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,SAAS;GACT,MAAM;GACN,MAAM;EACR;EAEA,SAAS;GACP,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;;AASD,SAAS,UAAU,EAAE,IAAI,WAAW,MAAM,SAAS,GAAG,SAAyB;CAE7E,OACE,oBAFW,MAAM,OAEjB;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,kBAAkB;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/Container/Container.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Container — centered, max-width page column with consistent gutters.\n// `narrow` ~ a reading/hero column; `wide` ~ a full content area.\nconst containerVariants = cva(\"mx-auto w-full\", {\n  variants: {\n    size: {\n      narrow: \"max-w-225\",\n      content: \"max-w-300\",\n      wide: \"max-w-360\",\n      full: \"max-w-none\",\n    },\n    // `glass` makes the centered column a translucent, blurred panel.\n    variant: {\n      default: \"px-4\",\n      glass: \"rounded-16 bg-glass-40-bg px-4 py-4 backdrop-blur-glass sm:px-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"content\",\n    variant: \"default\",\n  },\n});\n\ntype ContainerProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof containerVariants> & {\n    /** Element/component to render as instead of the default `div` (e.g. `main`, `section`). */\n    as?: React.ElementType;\n  };\n\n/** Centered, max-width page column with consistent gutters; optionally a glass panel. */\nfunction Container({ as, className, size, variant, ...props }: ContainerProps) {\n  const Comp = as ?? \"div\";\n  return (\n    <Comp\n      data-slot=\"container\"\n      data-variant={variant ?? \"default\"}\n      className={cn(containerVariants({ size, variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Container, containerVariants, type ContainerProps };\n"],"mappings":";;;;AAOA,MAAM,oBAAoB,IAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,QAAQ;GACR,SAAS;GACT,MAAM;GACN,MAAM;EACR;EAEA,SAAS;GACP,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;;AASD,SAAS,UAAU,EAAE,IAAI,WAAW,MAAM,SAAS,GAAG,SAAyB;CAE7E,OACE,oBAFW,MAAM,OAEjB;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,WAAW,GAAG,kBAAkB;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

package/dist/layouts/PageBackground/index.cjs

@@ -2,13 +2,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/layouts/PageBackground/PageBackground.tsx
-const PAGE_GRADIENT = "radial-gradient(circle at 90% 10%, var(--page-gradient-edge) 0%, var(--page-gradient-mid) 25%, var(--page-gradient-edge) 60%)";
+const PAGE_GRADIENT = "radial-gradient(circle at 90% 10%, var(--brand-gradient-to) 0%, var(--brand-gradient-from) 25%, var(--brand-gradient-to) 60%)";
 /** Ambient, theme-aware radial-gradient backdrop that sits behind the app so glass surfaces read. */
 function PageBackground({ fixed = true, className, style, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "page-background",
 		"aria-hidden": true,
-		className: require_cn.cn("pointer-events-none inset-0 bg-page-gradient-edge", fixed ? "fixed -z-10" : "absolute", className),
+		className: require_cn.cn("pointer-events-none inset-0 bg-brand-gradient-to", fixed ? "fixed -z-10" : "absolute", className),
 		style: {
 			backgroundImage: PAGE_GRADIENT,
 			...style

package/dist/layouts/PageBackground/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/layouts/PageBackground/PageBackground.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// PageBackground — ambient gradient backdrop that sits behind the app and makes\n// glass surfaces read. Composes a radial gradient from the theme-aware\n// `--page-gradient-mid` / `--page-gradient-edge` tokens (the middle stop is the\n// active brand tint; see styles/semantic.css), so it changes with\n// `.theme-slingshot` / `.theme-bodhi` / `.theme-sustain` and light/dark.\n// The gradient is built here (a real property) rather than as a composite token\n// so the vars resolve in this element's theme scope. Decorative (aria-hidden).\n//\n// By default it's `fixed` behind the page (the app body must be transparent);\n// set `fixed={false}` to fill a positioned parent instead.\nconst PAGE_GRADIENT =\n  \"radial-gradient(circle at 90% 10%, var(--page-gradient-edge) 0%, var(--page-gradient-mid) 25%, var(--page-gradient-edge) 60%)\";\n\n/** Props for {@link PageBackground}; extends the native `div` props. */\ntype PageBackgroundProps = React.ComponentProps<\"div\"> & {\n  /** Fixed to the viewport (default) vs absolute-fill of a positioned parent. */\n  fixed?: boolean;\n};\n\n/** Ambient, theme-aware radial-gradient backdrop that sits behind the app so glass surfaces read. */\nfunction PageBackground({ fixed = true, className, style, ...props }: PageBackgroundProps) {\n  return (\n    <div\n      data-slot=\"page-background\"\n      aria-hidden\n      // Neutral fallback color under the gradient so it's never fully empty.\n      className={cn(\n        \"pointer-events-none inset-0 bg-page-gradient-edge\",\n        fixed ? \"fixed -z-10\" : \"absolute\",\n        className,\n      )}\n      style={{ backgroundImage: PAGE_GRADIENT, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport { PageBackground, type PageBackgroundProps };\n"],"mappings":";;;;AAcA,MAAM,gBACJ;;AASF,SAAS,eAAe,EAAE,QAAQ,MAAM,WAAW,OAAO,GAAG,SAA8B;CACzF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,eAAA;EAEA,WAAWA,WAAAA,GACT,qDACA,QAAQ,gBAAgB,YACxB,SACF;EACA,OAAO;GAAE,iBAAiB;GAAe,GAAG;EAAM;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/layouts/PageBackground/PageBackground.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// PageBackground — ambient gradient backdrop that sits behind the app and makes\n// glass surfaces read. Composes a radial gradient from the theme-aware\n// `--brand-gradient-from` (the active brand tint — Figma bg/page/gradient-1)\n// and `--brand-gradient-to` (neutral slate — bg/page/gradient-2) mode tokens,\n// so it changes with `.theme-*` and light/dark.\n// The gradient is built here (a real property) rather than as a composite token\n// so the vars resolve in this element's theme scope. Decorative (aria-hidden).\n//\n// By default it's `fixed` behind the page (the app body must be transparent);\n// set `fixed={false}` to fill a positioned parent instead.\nconst PAGE_GRADIENT =\n  \"radial-gradient(circle at 90% 10%, var(--brand-gradient-to) 0%, var(--brand-gradient-from) 25%, var(--brand-gradient-to) 60%)\";\n\n/** Props for {@link PageBackground}; extends the native `div` props. */\ntype PageBackgroundProps = React.ComponentProps<\"div\"> & {\n  /** Fixed to the viewport (default) vs absolute-fill of a positioned parent. */\n  fixed?: boolean;\n};\n\n/** Ambient, theme-aware radial-gradient backdrop that sits behind the app so glass surfaces read. */\nfunction PageBackground({ fixed = true, className, style, ...props }: PageBackgroundProps) {\n  return (\n    <div\n      data-slot=\"page-background\"\n      aria-hidden\n      // Neutral fallback color under the gradient so it's never fully empty.\n      className={cn(\n        \"pointer-events-none inset-0 bg-brand-gradient-to\",\n        fixed ? \"fixed -z-10\" : \"absolute\",\n        className,\n      )}\n      style={{ backgroundImage: PAGE_GRADIENT, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport { PageBackground, type PageBackgroundProps };\n"],"mappings":";;;;AAcA,MAAM,gBACJ;;AASF,SAAS,eAAe,EAAE,QAAQ,MAAM,WAAW,OAAO,GAAG,SAA8B;CACzF,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,eAAA;EAEA,WAAWA,WAAAA,GACT,oDACA,QAAQ,gBAAgB,YACxB,SACF;EACA,OAAO;GAAE,iBAAiB;GAAe,GAAG;EAAM;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/layouts/PageBackground/index.d.cts

@@ -1,2 +1,2 @@
-import { n as PageBackgroundProps, t as PageBackground } from "../../index66.cjs";
+import { n as PageBackgroundProps, t as PageBackground } from "../../index67.cjs";
 export { PageBackground, PageBackgroundProps };

package/dist/layouts/PageBackground/index.d.ts

@@ -1,2 +1,2 @@
-import { n as PageBackgroundProps, t as PageBackground } from "../../index66.js";
+import { n as PageBackgroundProps, t as PageBackground } from "../../index67.js";
 export { PageBackground, PageBackgroundProps };

package/dist/layouts/PageBackground/index.js

@@ -1,13 +1,13 @@
 import { t as cn } from "../../cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/PageBackground/PageBackground.tsx
-const PAGE_GRADIENT = "radial-gradient(circle at 90% 10%, var(--page-gradient-edge) 0%, var(--page-gradient-mid) 25%, var(--page-gradient-edge) 60%)";
+const PAGE_GRADIENT = "radial-gradient(circle at 90% 10%, var(--brand-gradient-to) 0%, var(--brand-gradient-from) 25%, var(--brand-gradient-to) 60%)";
 /** Ambient, theme-aware radial-gradient backdrop that sits behind the app so glass surfaces read. */
 function PageBackground({ fixed = true, className, style, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "page-background",
 		"aria-hidden": true,
-		className: cn("pointer-events-none inset-0 bg-page-gradient-edge", fixed ? "fixed -z-10" : "absolute", className),
+		className: cn("pointer-events-none inset-0 bg-brand-gradient-to", fixed ? "fixed -z-10" : "absolute", className),
 		style: {
 			backgroundImage: PAGE_GRADIENT,
 			...style

package/dist/layouts/PageBackground/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/PageBackground/PageBackground.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// PageBackground — ambient gradient backdrop that sits behind the app and makes\n// glass surfaces read. Composes a radial gradient from the theme-aware\n// `--page-gradient-mid` / `--page-gradient-edge` tokens (the middle stop is the\n// active brand tint; see styles/semantic.css), so it changes with\n// `.theme-slingshot` / `.theme-bodhi` / `.theme-sustain` and light/dark.\n// The gradient is built here (a real property) rather than as a composite token\n// so the vars resolve in this element's theme scope. Decorative (aria-hidden).\n//\n// By default it's `fixed` behind the page (the app body must be transparent);\n// set `fixed={false}` to fill a positioned parent instead.\nconst PAGE_GRADIENT =\n  \"radial-gradient(circle at 90% 10%, var(--page-gradient-edge) 0%, var(--page-gradient-mid) 25%, var(--page-gradient-edge) 60%)\";\n\n/** Props for {@link PageBackground}; extends the native `div` props. */\ntype PageBackgroundProps = React.ComponentProps<\"div\"> & {\n  /** Fixed to the viewport (default) vs absolute-fill of a positioned parent. */\n  fixed?: boolean;\n};\n\n/** Ambient, theme-aware radial-gradient backdrop that sits behind the app so glass surfaces read. */\nfunction PageBackground({ fixed = true, className, style, ...props }: PageBackgroundProps) {\n  return (\n    <div\n      data-slot=\"page-background\"\n      aria-hidden\n      // Neutral fallback color under the gradient so it's never fully empty.\n      className={cn(\n        \"pointer-events-none inset-0 bg-page-gradient-edge\",\n        fixed ? \"fixed -z-10\" : \"absolute\",\n        className,\n      )}\n      style={{ backgroundImage: PAGE_GRADIENT, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport { PageBackground, type PageBackgroundProps };\n"],"mappings":";;;AAcA,MAAM,gBACJ;;AASF,SAAS,eAAe,EAAE,QAAQ,MAAM,WAAW,OAAO,GAAG,SAA8B;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAA;EAEA,WAAW,GACT,qDACA,QAAQ,gBAAgB,YACxB,SACF;EACA,OAAO;GAAE,iBAAiB;GAAe,GAAG;EAAM;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/PageBackground/PageBackground.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// PageBackground — ambient gradient backdrop that sits behind the app and makes\n// glass surfaces read. Composes a radial gradient from the theme-aware\n// `--brand-gradient-from` (the active brand tint — Figma bg/page/gradient-1)\n// and `--brand-gradient-to` (neutral slate — bg/page/gradient-2) mode tokens,\n// so it changes with `.theme-*` and light/dark.\n// The gradient is built here (a real property) rather than as a composite token\n// so the vars resolve in this element's theme scope. Decorative (aria-hidden).\n//\n// By default it's `fixed` behind the page (the app body must be transparent);\n// set `fixed={false}` to fill a positioned parent instead.\nconst PAGE_GRADIENT =\n  \"radial-gradient(circle at 90% 10%, var(--brand-gradient-to) 0%, var(--brand-gradient-from) 25%, var(--brand-gradient-to) 60%)\";\n\n/** Props for {@link PageBackground}; extends the native `div` props. */\ntype PageBackgroundProps = React.ComponentProps<\"div\"> & {\n  /** Fixed to the viewport (default) vs absolute-fill of a positioned parent. */\n  fixed?: boolean;\n};\n\n/** Ambient, theme-aware radial-gradient backdrop that sits behind the app so glass surfaces read. */\nfunction PageBackground({ fixed = true, className, style, ...props }: PageBackgroundProps) {\n  return (\n    <div\n      data-slot=\"page-background\"\n      aria-hidden\n      // Neutral fallback color under the gradient so it's never fully empty.\n      className={cn(\n        \"pointer-events-none inset-0 bg-brand-gradient-to\",\n        fixed ? \"fixed -z-10\" : \"absolute\",\n        className,\n      )}\n      style={{ backgroundImage: PAGE_GRADIENT, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport { PageBackground, type PageBackgroundProps };\n"],"mappings":";;;AAcA,MAAM,gBACJ;;AASF,SAAS,eAAe,EAAE,QAAQ,MAAM,WAAW,OAAO,GAAG,SAA8B;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAA;EAEA,WAAW,GACT,oDACA,QAAQ,gBAAgB,YACxB,SACF;EACA,OAAO;GAAE,iBAAiB;GAAe,GAAG;EAAM;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/layouts/Stack/index.d.cts

@@ -1,2 +1,2 @@
-import { n as StackProps, r as stackVariants, t as Stack } from "../../index67.cjs";
+import { n as StackProps, r as stackVariants, t as Stack } from "../../index68.cjs";
 export { Stack, StackProps, stackVariants };

package/dist/layouts/Stack/index.d.ts

@@ -1,2 +1,2 @@
-import { n as StackProps, r as stackVariants, t as Stack } from "../../index67.js";
+import { n as StackProps, r as stackVariants, t as Stack } from "../../index68.js";
 export { Stack, StackProps, stackVariants };

package/dist/layouts/TwoColumn/index.d.cts

@@ -1,2 +1,2 @@
-import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index68.cjs";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index69.cjs";
 export { TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, twoColumnVariants };

package/dist/layouts/TwoColumn/index.d.ts

@@ -1,2 +1,2 @@
-import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index68.js";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index69.js";
 export { TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, twoColumnVariants };

package/dist/layouts/index.d.cts

@@ -1,5 +1,5 @@
-import { n as ContainerProps, r as containerVariants, t as Container } from "../index65.cjs";
-import { n as PageBackgroundProps, t as PageBackground } from "../index66.cjs";
-import { n as StackProps, r as stackVariants, t as Stack } from "../index67.cjs";
-import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index68.cjs";
+import { n as ContainerProps, r as containerVariants, t as Container } from "../index66.cjs";
+import { n as PageBackgroundProps, t as PageBackground } from "../index67.cjs";
+import { n as StackProps, r as stackVariants, t as Stack } from "../index68.cjs";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index69.cjs";
 export { Container, ContainerProps, PageBackground, PageBackgroundProps, Stack, StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };

package/dist/layouts/index.d.ts

@@ -1,5 +1,5 @@
-import { n as ContainerProps, r as containerVariants, t as Container } from "../index65.js";
-import { n as PageBackgroundProps, t as PageBackground } from "../index66.js";
-import { n as StackProps, r as stackVariants, t as Stack } from "../index67.js";
-import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index68.js";
+import { n as ContainerProps, r as containerVariants, t as Container } from "../index66.js";
+import { n as PageBackgroundProps, t as PageBackground } from "../index67.js";
+import { n as StackProps, r as stackVariants, t as Stack } from "../index68.js";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index69.js";
 export { Container, ContainerProps, PageBackground, PageBackgroundProps, Stack, StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };

package/dist/patterns/DataTable/index.cjs

@@ -34,25 +34,30 @@ function DataTable({ columns, data, striped = true, enablePagination = true, pag
 		"data-slot": "data-table",
 		className: "space-y-4",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "overflow-hidden rounded-md border",
+			className: "overflow-x-auto",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Table_index.Table, {
 				striped,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableHead, {
 					colSpan: header.colSpan,
+					className: "h-auto bg-glass-60-bg backdrop-blur-glass px-2 py-2 text-xs leading-4 font-medium",
 					children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
 				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, {
 					"data-state": row.getIsSelected() ? "selected" : void 0,
-					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+					className: "hover:bg-muted-bg data-[state=selected]:bg-secondary-bg",
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, {
+						className: "px-2 py-2 text-xs leading-4",
+						children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+					}, cell.id))
 				}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, {
 					colSpan: columns.length,
-					className: "h-24 text-center text-muted-foreground",
+					className: "h-24 text-center text-muted-txt",
 					children: "No results."
 				}) }) })]
 			})
 		}), enablePagination ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-between gap-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-muted-txt",
 				"data-slot": "data-table-selection",
 				children: [
 					table.getFilteredSelectedRowModel().rows.length,
@@ -65,7 +70,7 @@ function DataTable({ columns, data, striped = true, enablePagination = true, pag
 				className: "flex items-center gap-2",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-muted-txt",
 						children: [
 							"Page ",
 							table.getState().pagination.pageIndex + 1,
@@ -102,9 +107,9 @@ function DataTableColumnHeader({ column, title, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Button_index.Button, {
 		variant: "ghost",
 		size: "sm",
-		className: require_cn.cn("-ml-2 h-8", className),
+		className: require_cn.cn("-ml-2 h-8 text-xs leading-4 font-medium", className),
 		onClick: () => column.toggleSorting(sorted === "asc"),
-		children: [title, sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, {})]
+		children: [title, sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, { className: "opacity-50" })]
 	});
 }
 //#endregion