@lostgradient/cinder 0.12.0 → 0.13.0

package/dist/components/sidebar/index.js

@@ -973,6 +973,10 @@ function Drawer($$anchor, $$props) {
 }
 $5.delegate(["click"]);
 
+// src/components/sidebar/sidebar.constants.ts
+var SIDEBAR_MOBILE_BREAKPOINT = "47.99rem";
+var SIDEBAR_MOBILE_MEDIA_QUERY = `(max-width: ${SIDEBAR_MOBILE_BREAKPOINT})`;
+
 // src/components/sidebar/sidebar.svelte
 var rest_excludes3 = new Set([
   "$$slots",
@@ -1055,7 +1059,7 @@ function Sidebar($$anchor, $$props) {
   const navigationLabel = $6.derived(() => `${$6.get(validatedLabel)} navigation`);
   const hasMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
   const usesSsrResponsiveFallback = !hasMatchMedia;
-  const mobile = hasMatchMedia ? new MediaQuery2("(max-width: 47.99rem)", false) : { current: false };
+  const mobile = hasMatchMedia ? new MediaQuery2(SIDEBAR_MOBILE_MEDIA_QUERY, false) : { current: false };
   const context = {
     get collapsed() {
       return collapsed();
@@ -1130,7 +1134,9 @@ function Sidebar($$anchor, $$props) {
 var sidebar_default = Sidebar;
 export {
   sidebar_default as default,
-  Sidebar
+  Sidebar,
+  SIDEBAR_MOBILE_MEDIA_QUERY,
+  SIDEBAR_MOBILE_BREAKPOINT
 };
 
-//# debugId=13D61E15EB9EC3BE64756E2164756E21
+//# debugId=F22F69D3515A029C64756E2164756E21

package/dist/components/sidebar/sidebar.constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Viewport width below which Sidebar uses its mobile drawer behavior.
+ *
+ * Consumers with app chrome outside the Sidebar can import this value instead
+ * of duplicating the component's internal breakpoint.
+ */
+export declare const SIDEBAR_MOBILE_BREAKPOINT = "47.99rem";
+/**
+ * Fully parenthesized media query used by Sidebar to switch from the inline
+ * aside to the mobile drawer.
+ */
+export declare const SIDEBAR_MOBILE_MEDIA_QUERY = "(max-width: 47.99rem)";

package/dist/components/stat/stat.css

@@ -1,17 +1,25 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-stat {
+    --cinder-stat-row-gap: var(--cinder-space-1, 0.25rem);
+    --cinder-stat-column-gap: var(--cinder-space-3, 0.75rem);
+    --cinder-stat-label-font-size: var(--cinder-text-sm);
+    --cinder-stat-value-font-size: var(--cinder-text-4xl);
+    --cinder-stat-value-font-weight: var(--cinder-font-semibold);
+    --cinder-stat-value-line-height: 1.1;
+    --cinder-stat-change-gap: var(--cinder-space-1, 0.25rem);
+    --cinder-stat-change-font-size: var(--cinder-text-sm);
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
-    row-gap: var(--cinder-space-1, 0.25rem);
+    row-gap: var(--cinder-stat-row-gap, var(--cinder-space-1, 0.25rem));
     align-items: start;
     color: var(--cinder-text);
   }
 
   .cinder-stat[data-cinder-has-icon] {
     grid-template-columns: auto 1fr;
-    column-gap: var(--cinder-space-3, 0.75rem);
+    column-gap: var(--cinder-stat-column-gap, var(--cinder-space-3, 0.75rem));
   }
 
   .cinder-stat__icon {
@@ -25,7 +33,7 @@
   }
 
   .cinder-stat__label {
-    font-size: var(--cinder-text-sm);
+    font-size: var(--cinder-stat-label-font-size, var(--cinder-text-sm));
     color: var(--cinder-text-muted);
   }
 
@@ -34,10 +42,10 @@
   }
 
   .cinder-stat__value {
-    font-size: var(--cinder-text-4xl);
-    font-weight: var(--cinder-font-semibold);
+    font-size: var(--cinder-stat-value-font-size, var(--cinder-text-4xl));
+    font-weight: var(--cinder-stat-value-font-weight, var(--cinder-font-semibold));
     font-variant-numeric: tabular-nums;
-    line-height: 1.1;
+    line-height: var(--cinder-stat-value-line-height, 1.1);
   }
 
   .cinder-stat[data-cinder-has-icon] .cinder-stat__value {
@@ -47,8 +55,8 @@
   .cinder-stat__change {
     display: inline-flex;
     align-items: center;
-    gap: var(--cinder-space-1, 0.25rem);
-    font-size: var(--cinder-text-sm);
+    gap: var(--cinder-stat-change-gap, var(--cinder-space-1, 0.25rem));
+    font-size: var(--cinder-stat-change-font-size, var(--cinder-text-sm));
   }
 
   .cinder-stat[data-cinder-has-icon] .cinder-stat__change {

package/dist/components/stat/stat.schema.js

@@ -78,6 +78,10 @@ var schema = {
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-stat`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-stat` root."
     }
   },
   additionalProperties: false,
@@ -107,4 +111,4 @@ export {
   stat_schema_default as default
 };
 
-//# debugId=C0F5E1E3C641FA3864756E2164756E21
+//# debugId=429D4BA8E0F6656864756E2164756E21

package/dist/components/stat/stat.types.d.ts

@@ -33,3 +33,22 @@ export type StatProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Additional class names merged with `.cinder-stat`. */
     class?: string;
 };
+/** Schema generator surface for Stat — excludes native attributes except supported styling hooks. */
+export interface StatSchemaProps {
+    /** Short label describing the metric, e.g. "Monthly Revenue". */
+    label: string;
+    /** The statistic. Strings rendered verbatim; numbers formatted via formatNumber. */
+    value: string | number;
+    /** Optional change indicator with direction and accessible wording. */
+    change?: StatChange;
+    /** Optional leading icon snippet (decorative — wrapper is aria-hidden). */
+    icon?: Snippet;
+    /** Intl.NumberFormat options applied only when `value` is a number. */
+    valueFormatOptions?: Intl.NumberFormatOptions;
+    /** Locale forwarded to formatNumber. Defaults to the nearest LocaleProvider locale, then en-US. */
+    valueLocale?: string;
+    /** Additional class names merged with `.cinder-stat`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-stat` root. */
+    style?: string;
+}

package/dist/components/stat/stat.variables.js

@@ -52,10 +52,19 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/stat/stat.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-stat-change-font-size",
+  "--cinder-stat-change-gap",
+  "--cinder-stat-column-gap",
+  "--cinder-stat-label-font-size",
+  "--cinder-stat-row-gap",
+  "--cinder-stat-value-font-size",
+  "--cinder-stat-value-font-weight",
+  "--cinder-stat-value-line-height"
+];
 var stat_variables_default = variables;
 export {
   stat_variables_default as default
 };
 
-//# debugId=D0CE6D1B1C484C6664756E2164756E21
+//# debugId=7108937A7CEA419964756E2164756E21

package/dist/components/stat-group/stat-group.css

@@ -1,8 +1,11 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
 @layer cinder.components {
   .cinder-stat-group {
+    --cinder-stat-group-gap: var(--cinder-space-4, 1rem);
+    --cinder-stat-group-card-padding: var(--cinder-space-4, 1rem);
+    --cinder-stat-group-shared-cell-padding: var(--cinder-space-4, 1rem);
     display: grid;
-    gap: var(--cinder-space-4, 1rem);
+    gap: var(--cinder-stat-group-gap, var(--cinder-space-4, 1rem));
     /* Query the group's own inline size so fixed column counts can collapse when
        the group is narrow — even inside a wide viewport (RESPONSIVE-POLICY.md). */
     container-type: inline-size;
@@ -50,7 +53,7 @@
 
   /* variant: cards — each stat gets a card-style border, background, and shadow */
   .cinder-stat-group[data-cinder-variant='cards'] > .cinder-stat {
-    padding: var(--cinder-space-4, 1rem);
+    padding: var(--cinder-stat-group-card-padding, var(--cinder-space-4, 1rem));
     background: var(--cinder-surface-raised);
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md, 0.5rem);
@@ -63,15 +66,15 @@
  * gap with the surface color, avoiding nth-child math for any column count.
  */
   .cinder-stat-group[data-cinder-variant='shared-borders'] {
+    --cinder-stat-group-gap: 1px;
     border: 1px solid var(--cinder-border);
     border-radius: var(--cinder-radius-md, 0.5rem);
     overflow: hidden;
     background: var(--cinder-border);
-    gap: 1px;
   }
 
   .cinder-stat-group[data-cinder-variant='shared-borders'] > .cinder-stat {
-    padding: var(--cinder-space-4, 1rem);
+    padding: var(--cinder-stat-group-shared-cell-padding, var(--cinder-space-4, 1rem));
     background: var(--cinder-surface-raised);
   }
 }

package/dist/components/stat-group/stat-group.schema.js

@@ -73,6 +73,10 @@ var schema = {
     class: {
       type: "string",
       description: "Additional class names merged with `.cinder-stat-group`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-stat-group` root."
     }
   },
   additionalProperties: false,
@@ -92,4 +96,4 @@ export {
   stat_group_schema_default as default
 };
 
-//# debugId=A2F52548CE94E2A964756E2164756E21
+//# debugId=0D9871ECB97A1A0D64756E2164756E21

package/dist/components/stat-group/stat-group.types.d.ts

@@ -28,3 +28,30 @@ export type StatGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Additional class names merged with `.cinder-stat-group`. */
     class?: string;
 };
+/** Schema generator surface for StatGroup — excludes native attributes except supported styling hooks. */
+export interface StatGroupSchemaProps {
+    /**
+     * Optional accessible label for the whole stat set. When provided, the
+     * container becomes `role="group"` and uses this value as its accessible name.
+     */
+    label?: string;
+    /**
+     * Grid column count. `'auto'` uses auto-fit with minmax for responsive layout.
+     * @default 'auto'
+     */
+    columns?: StatGroupColumns;
+    /**
+     * Visual variant; surfaced as `data-cinder-variant` for CSS styling.
+     * - `'default'` — plain grid, no borders or backgrounds.
+     * - `'cards'` — each stat gets a card-style border and shadow.
+     * - `'shared-borders'` — single outer border with 1px gap dividers between stats.
+     * @default 'default'
+     */
+    variant?: StatGroupVariant;
+    /** Stat children, typically one or more `<Stat>` components. */
+    children: Snippet;
+    /** Additional class names merged with `.cinder-stat-group`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-stat-group` root. */
+    style?: string;
+}

package/dist/components/stat-group/stat-group.variables.js

@@ -52,10 +52,14 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/stat-group/stat-group.variables.ts
-var variables = [];
+var variables = [
+  "--cinder-stat-group-card-padding",
+  "--cinder-stat-group-gap",
+  "--cinder-stat-group-shared-cell-padding"
+];
 var stat_group_variables_default = variables;
 export {
   stat_group_variables_default as default
 };
 
-//# debugId=D3FFE80178FC6D7064756E2164756E21
+//# debugId=1CF303317D7DF3EA64756E2164756E21

package/dist/index.d.ts

@@ -302,7 +302,7 @@ export { default as SideNavigationGroup } from './components/side-navigation-gro
 export type { SideNavigationGroupProps } from './components/side-navigation-group/index.ts';
 export { default as SideNavigationItem } from './components/side-navigation-item/index.ts';
 export type { SideNavigationItemProps } from './components/side-navigation-item/index.ts';
-export { default as Sidebar } from './components/sidebar/index.ts';
+export { SIDEBAR_MOBILE_BREAKPOINT, SIDEBAR_MOBILE_MEDIA_QUERY, default as Sidebar, } from './components/sidebar/index.ts';
 export type { SidebarProps } from './components/sidebar/index.ts';
 export { default as SortableList } from './components/sortable-list/index.ts';
 export type { SortableListProps } from './components/sortable-list/index.ts';