@octaviaflow/core 3.0.18-beta.0 → 3.0.18

package/dist/utils/Slot.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from "react";
+interface SlotProps extends HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Slot.d.ts.map

package/dist/utils/Slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.d.ts","sourceRoot":"","sources":["../../src/utils/Slot.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AAuBf,UAAU,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,mGAkBf,CAAC"}

package/dist/utils/composeRefs.d.ts

@@ -0,0 +1,7 @@
+import type { Ref, RefCallback } from "react";
+/** Compose any number of refs (callback or object) into a single ref-callback.
+ * Each underlying ref receives the node when React assigns it. Useful for the
+ * `asChild` pattern where both the forwarded ref and the child's own ref need
+ * to point at the same DOM node. */
+export declare function composeRefs<T>(...refs: Array<Ref<T> | undefined | null>): RefCallback<T>;
+//# sourceMappingURL=composeRefs.d.ts.map

package/dist/utils/composeRefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeRefs.d.ts","sourceRoot":"","sources":["../../src/utils/composeRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEhE;;;oCAGoC;AACpC,wBAAgB,WAAW,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAUxF"}

package/dist/utils/gradients.d.ts

@@ -0,0 +1,77 @@
+/**
+ * gradient — builder for CSS gradient strings.
+ *
+ * Pre-set variants ship as CSS variables (`--ods-gradient-running-accent`,
+ * etc.) for the common case. This helper covers everything else — custom
+ * angles, stops, and tokens — without callers having to hand-string
+ * `conic-gradient(...)` and remember the syntax.
+ *
+ * Color shorthand: a stop's `color` can be either a full CSS color
+ * (`var(--ods-accent)`, `#3b82f6`, `rgba(...)`, `transparent`) or a
+ * dash-cased v1 token slug (`"accent"`, `"status-success-bg"`). Slugs are
+ * auto-expanded to `var(--ods-<slug>)`.
+ *
+ * @example
+ * gradient.conic({
+ *   from: "0deg",
+ *   stops: [
+ *     { color: "transparent", at: "0%" },
+ *     { color: "accent",      at: "25%" },
+ *     { color: "transparent", at: "50%" },
+ *   ],
+ * });
+ * // → "conic-gradient(from 0deg, transparent 0%, var(--ods-accent) 25%, transparent 50%)"
+ */
+export type GradientStop = {
+    /** CSS color OR a v1 token slug (auto-expanded to var(--ods-<slug>)) */
+    color: string;
+    /** Optional position (e.g. "0%", "25%", "1rem"). Omit to let CSS auto-distribute. */
+    at?: string;
+};
+/**
+ * Expand a stop color. If it's already a full CSS color (var(), #hex,
+ * rgb/rgba, hsl/hsla, oklch, or a CSS-wide keyword) it passes through.
+ * If it's a dash-cased slug like "accent" or "status-success-bg", it's
+ * wrapped as `var(--ods-<slug>)`.
+ */
+export declare function expandGradientColor(value: string): string;
+export declare const gradient: {
+    /**
+     * Build a `conic-gradient(...)` string.
+     *
+     * @param opts.from  — starting angle (e.g. "0deg", "var(--my-angle)"). Optional.
+     * @param opts.at    — center position (e.g. "50% 50%", "center"). Optional.
+     * @param opts.stops — color stops, in sweep order.
+     */
+    readonly conic: (opts: {
+        from?: string;
+        at?: string;
+        stops: readonly GradientStop[];
+    }) => string;
+    /**
+     * Build a `linear-gradient(...)` string.
+     *
+     * @param opts.direction — angle or keyword (e.g. "180deg", "to right").
+     *                         Defaults to `180deg` (top → bottom) per CSS spec.
+     * @param opts.stops     — color stops, in direction order.
+     */
+    readonly linear: (opts: {
+        direction?: string;
+        stops: readonly GradientStop[];
+    }) => string;
+    /**
+     * Build a `radial-gradient(...)` string.
+     *
+     * @param opts.shape — shape + size (e.g. "circle", "ellipse 200px 100px",
+     *                     "circle at 50% 0", "closest-side"). Optional.
+     * @param opts.at    — center position (e.g. "center", "top right"). Optional.
+     *                     Note: if `shape` already encodes `at ...`, omit this.
+     * @param opts.stops — color stops, from center outward.
+     */
+    readonly radial: (opts: {
+        shape?: string;
+        at?: string;
+        stops: readonly GradientStop[];
+    }) => string;
+};
+//# sourceMappingURL=gradients.d.ts.map

package/dist/utils/gradients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradients.d.ts","sourceRoot":"","sources":["../../src/utils/gradients.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,MAAM,YAAY,GAAG;IACzB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOzD;AASD,eAAO,MAAM,QAAQ;IACnB;;;;;;OAMG;2BACS;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;KAAE,KAAG,MAAM;IAQnF;;;;;;OAMG;4BACU;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;KAAE,KAAG,MAAM;IAK5E;;;;;;;;OAQG;4BACU;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;KAAE,KAAG,MAAM;CAO7E,CAAC"}

package/dist/utils/zIndex.d.ts

@@ -0,0 +1,53 @@
+/**
+ * zIndex — typed access to the v1 stacking layer scale.
+ *
+ * CSS-side, every component reaches for `var(--ods-z-modal)` etc. This
+ * map is for the JS-side cases where you need the numeric value inline
+ * (Framer Motion's `style={{ zIndex }}`, Portal layer ordering, etc.)
+ * without writing the raw `var()` string and losing the type safety.
+ *
+ * The values mirror `--ods-z-*` in @octaviaflow/tokens. A drift guard in
+ * the tokens contract suite fails if the two surfaces disagree.
+ *
+ * @example
+ *   import { zIndex } from "@octaviaflow/core";
+ *
+ *   <Portal style={{ zIndex: zIndex.modal }} />
+ *   <Toast style={{ zIndex: zIndex.toast }} />
+ */
+export declare const zIndex: {
+    /** Default page content. */
+    readonly base: 0;
+    /** One step above base — cards / chips with hover lift. */
+    readonly raised: 1;
+    /** Inline menus that overlap nearby content. */
+    readonly dropdown: 10;
+    /** Scroll-pinned page sections (sticky table headers, anchored sub-nav). */
+    readonly sticky: 20;
+    /** App-shell top bar — covers sticky content on scroll. */
+    readonly header: 30;
+    /** App-shell sidebar — its shadow covers the header edge. */
+    readonly sidebar: 40;
+    /** Modal scrim / backdrop. The dialog itself sits at `modal`. */
+    readonly overlay: 50;
+    /** Modal dialog — above its own scrim. */
+    readonly modal: 60;
+    /** Popovers and command palettes — must work above modals. */
+    readonly popover: 70;
+    /** Toast notifications — must reach the user even mid-popover. */
+    readonly toast: 80;
+    /** Tooltips — the last word, always on top. */
+    readonly tooltip: 90;
+};
+/** Names of the canonical stacking layers. */
+export type ZIndexLayer = keyof typeof zIndex;
+/**
+ * Numeric value for a named layer. Equivalent to `zIndex[layer]` — useful
+ * when the layer name is a runtime variable.
+ *
+ * @example
+ *   const layer: ZIndexLayer = userPrefersDialogStyle ? "modal" : "popover";
+ *   element.style.zIndex = String(getZIndex(layer));
+ */
+export declare function getZIndex(layer: ZIndexLayer): number;
+//# sourceMappingURL=zIndex.d.ts.map

package/dist/utils/zIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.d.ts","sourceRoot":"","sources":["../../src/utils/zIndex.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM;IACjB,4BAA4B;;IAE5B,2DAA2D;;IAE3D,gDAAgD;;IAEhD,4EAA4E;;IAE5E,2DAA2D;;IAE3D,6DAA6D;;IAE7D,iEAAiE;;IAEjE,0CAA0C;;IAE1C,8DAA8D;;IAE9D,kEAAkE;;IAElE,+CAA+C;;CAEvC,CAAC;AAEX,8CAA8C;AAC9C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,MAAM,CAAC;AAE9C;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAEpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octaviaflow/core",
-  "version": "3.0.18-beta.0",
+  "version": "3.0.18",
   "description": "OctaviaFlow Design System React components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -46,10 +46,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@octaviaflow/config": "3.0.3",
-    "@octaviaflow/fonts": "3.0.3",
-    "@octaviaflow/icons": "3.0.3",
-    "@octaviaflow/tokens": "3.0.3",
+    "@octaviaflow/config": "3.0.18",
+    "@octaviaflow/fonts": "3.0.18",
+    "@octaviaflow/icons": "3.0.18",
+    "@octaviaflow/tokens": "3.0.18",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "react-aria": "^3.48.0"