@sakaniui/react 0.8.9 → 0.8.10

package/dist/lib/ChartTooltip.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface ChartTooltipPayloadEntry {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    fill?: string;
+    payload?: {
+        fill?: string;
+        [key: string]: unknown;
+    };
+}
+export interface ChartTooltipProps {
+    active?: boolean;
+    payload?: ChartTooltipPayloadEntry[];
+    label?: string;
+    /** Custom value formatter, e.g. for percentages. */
+    formatter?: (value: ChartTooltipPayloadEntry['value'], name: ChartTooltipPayloadEntry['name']) => React.ReactNode;
+}
+export declare const ChartTooltip: React.FC<ChartTooltipProps>;
+export default ChartTooltip;

package/dist/lib/LiquidGlass.d.ts

@@ -0,0 +1,93 @@
+import { default as React } from 'react';
+export type LiquidGlassVariant = 'regular' | 'clear';
+/** How much of the backdrop shows through. 'auto' follows the variant
+ *  (regular 66%, clear 28%); 'subtle' is Figma's glass/bg-subtle (5%), the
+ *  fill of a full-bleed overlay; 'none' is the lens alone. */
+export type LiquidGlassTint = 'auto' | 'regular' | 'clear' | 'subtle' | 'none';
+/** Figma's Glass effect properties, in Figma's units. */
+export interface LiquidGlassEffect {
+    /** 0–1 */
+    refraction: number;
+    /** px */
+    depth: number;
+    /** 0–1 */
+    dispersion: number;
+    /** Figma's frost radius */
+    frost: number;
+    /** 0–1 */
+    lightIntensity: number;
+    /** degrees, clockwise from the top: -45 = light from the top-left */
+    lightAngle: number;
+}
+export interface LiquidBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The image behind the glass, cover-fitted. */
+    src: string;
+    /** background-position of the image. Default 'center'. */
+    position?: string;
+    /** A color laid over the image, in the backdrop every lens sees too (a scrim in
+     *  dark mode, Figma's 5% overlay fill in light). Any CSS color, var() included. */
+    veil?: string;
+}
+/** The photo (or any image) a liquid-glass UI sits on. Lenses inside refract the
+ *  image itself instead of what the browser painted below them. */
+export declare const LiquidBackdrop: React.ForwardRefExoticComponent<LiquidBackdropProps & React.RefAttributes<HTMLDivElement>>;
+/** Re-align every lens's backdrop copy right now. Call it after moving lenses
+ *  from JavaScript (a spring, a drag) in the same frame, so the photo inside a
+ *  lens never trails the lens by a frame. */
+export declare function syncLiquidBackdrop(): void;
+export interface UseLiquidGlassOptions {
+    enabled?: boolean;
+    /** 'off' forces the frosted fallback (e.g. to preview Safari in Chrome). */
+    refraction?: 'auto' | 'off';
+    /** Re-read the --liquid-* properties when this changes (e.g. an inline effect override). */
+    watch?: string;
+    /** Inside a <LiquidBackdrop>, refract its image (default). Pass false for an
+     *  element that floats over other UI (Modal's card sits over a scrim). */
+    source?: boolean;
+    /** Inside a <LiquidBackdrop>: 'auto' (default) bakes lenses bigger than 300×300
+     *  into a canvas once (they don't move); false keeps the filter live (a big lens
+     *  you animate or drag); true always bakes. */
+    bake?: boolean | 'auto';
+}
+/**
+ * The material as a hook, for components that own their element (Modal's
+ * card). Spread `props` onto the element and render `filter` inside it.
+ */
+export declare function useLiquidGlass(ref: React.RefObject<HTMLElement | null>, { enabled, refraction, watch, source, bake }?: UseLiquidGlassOptions): {
+    filter: React.JSX.Element | null;
+    refracting: boolean;
+    props: {
+        readonly 'data-surface': "liquid";
+        readonly 'data-refraction': "source" | "off" | "on";
+        readonly style: {
+            backdropFilter: string;
+        } | undefined;
+        readonly onPointerMove: (e: React.PointerEvent<HTMLElement>) => void;
+    };
+};
+export interface LiquidGlassProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** regular: text-safe tint (panels, sidebars, modals). clear: icons and large labels only. */
+    variant?: LiquidGlassVariant;
+    /** How much of the backdrop shows through. Default 'auto' (follows `variant`). */
+    tint?: LiquidGlassTint;
+    /** Corner radius in px. Default 20. */
+    radius?: number;
+    /** 'off' forces the frosted fallback. */
+    refraction?: 'auto' | 'off';
+    /** Override any of Figma's Glass properties for this element, in Figma's units
+     *  (e.g. { refraction: 0.8, depth: 20, dispersion: 0.4, frost: 1 }). Defaults
+     *  come from the variant's --liquid-* tokens. */
+    effect?: Partial<LiquidGlassEffect>;
+    /** Inside a <LiquidBackdrop>: true (default) refracts the backdrop image;
+     *  false bends whatever is painted below instead (UI under a slider knob). */
+    source?: boolean;
+    /** 'auto' (default): inside a LiquidBackdrop, lenses over 300×300 bake their glass
+     *  once (fast; for surfaces that stay put). false: always live (a big lens that moves). */
+    bake?: boolean | 'auto';
+    /** Squish slightly when pressed (buttons, toolbar pills). */
+    interactive?: boolean;
+}
+export declare const LiquidGlass: React.ForwardRefExoticComponent<LiquidGlassProps & React.RefAttributes<HTMLDivElement>>;
+/** Class names for components that apply the material via the hook. */
+export declare const liquidGlassClass: (variant?: LiquidGlassVariant, tint?: LiquidGlassTint) => string;
+export default LiquidGlass;

package/dist/lib/SakaniLogo.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const SakaniLogo: React.FC;
+export default SakaniLogo;

package/dist/lib/chartPalette.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Real values of --color-chart-1..6, used only when getComputedStyle can't
+ * run — which in practice means server-side rendering, where the charts paint
+ * once before useThemeTick's mount bump re-reads the live tokens.
+ *
+ * Indexed rather than a single value on purpose: every chart used to fall
+ * back to chart-1 for all five slots, so a server-rendered multi-series chart
+ * painted every line, slice and ring the same orange until hydration.
+ *
+ * Keep in sync with src/styles/tokens.css.
+ */
+export declare const CHART_PALETTE_FALLBACK: string[];

package/dist/lib/getContrastColor.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Given any valid CSS color string, returns whichever of this system's own
+ * fixed light/dark icon colors (fg/on-inverse #FAFAF9 vs fg/default
+ * #141414) has the higher WCAG contrast ratio against it.
+ *
+ * Used for icon/text glyphs drawn on top of a consumer-supplied background
+ * color (e.g. ColorSwatch's checkmark) -- a flat "always white" choice
+ * fails contrast on light swatch colors (confirmed: a white check on
+ * #E0D8D1 is not accessible), and a flat luminance>0.5 threshold is less
+ * accurate than actually comparing both candidates' real contrast ratios,
+ * so this does the full WCAG comparison instead.
+ *
+ * Hex and rgb() are parsed directly (identically on server and client);
+ * anything else parses via a 1x1 canvas fillStyle instead of hand-rolling a hex/rgb/hsl
+ * parser -- the canvas 2D context's color parser already accepts every
+ * valid CSS color syntax (hex, rgb(), hsl(), named colors, ...) and
+ * normalizes it to concrete RGB, so this works for any `color` a consumer
+ * might pass without this library needing its own parser.
+ */
+/** Returns fg/on-inverse (#fafaf9) or fg/default (#141414), whichever
+ * contrasts better against `backgroundColor`. Falls back to fg/on-inverse
+ * if run outside a browser (canvas unavailable, e.g. SSR). */
+export declare const getContrastColor: (backgroundColor: string) => string;

package/dist/lib/iconStrokeWidth.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Lucide icons are always drawn on a fixed 24-unit grid regardless of the
+ * requested pixel `size` -- `strokeWidth` is defined in that same 24-unit
+ * space, so rendering below 24px visually scales a stroke down
+ * proportionally (e.g. strokeWidth={1.5} at size={16} renders as an
+ * effective ~1px line), noticeably thinner than Figma's own same-size-
+ * native icon exports, which have no such scaling.
+ *
+ * Scaling strokeWidth up by 24/size compensates so the rendered stroke
+ * actually measures `targetPx`, matching Figma. Every icon in this design
+ * system is exported at 1.5px, hence the default.
+ */
+export declare const iconStrokeWidth: (size: number, targetPx?: number) => number;

package/dist/lib/useChartTokens.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Resolves a chart's color tokens against the chart's OWN element, and
+ * re-renders whenever any scope enclosing it changes theme.
+ *
+ * Recharts needs real color strings, not `var(--…)`, so these have to be read
+ * with getComputedStyle. Two things that looked equivalent were not:
+ *
+ * 1. Reading from document.documentElement ignores any scope between <html>
+ *    and the chart. Both `.dark` and `.force-light` redeclare the whole token
+ *    set on a container -- that's the entire point of them: a docs preview
+ *    panel showing a light component while the site around it is dark, or one
+ *    dashboard demo toggled independently of the page. Read from <html>, such
+ *    a chart painted the OUTER theme's colors on the INNER theme's
+ *    background: dark grid lines on a white panel.
+ *
+ * 2. Watching only <html>'s class misses those same containers. Flipping a
+ *    preview panel to dark changes a wrapper div's class, not <html>'s, and
+ *    the chart is passed down as `children` — a stable element React reuses
+ *    rather than re-rendering — so nothing re-read the tokens and the chart
+ *    kept the previous theme's colors. Every ancestor is observed, not just
+ *    the root.
+ *
+ * The mount tick matters on its own: under SSR there is no getComputedStyle,
+ * so the server paints each chart's hardcoded fallbacks, and React treats
+ * differing attributes on hydration as "won't be patched up". Bumping once on
+ * mount is what replaces those fallbacks with real tokens — and it is also
+ * the point at which the ref is finally attached.
+ */
+export declare function useChartTokens(element: {
+    current: HTMLElement | null;
+}): (name: string) => string | undefined;

package/dist/lib/useHoverHighlight.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export declare function useHoverHighlight<T extends HTMLElement = HTMLDivElement>(): {
+    ref: (el: T | null) => void;
+    groupProps: {
+        'data-hover-group': string;
+        onMouseOver: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+    };
+    highlight: React.JSX.Element;
+    showItem: (item: HTMLElement | null) => void;
+};
+export interface HoverGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+/** Wraps any set of `data-hover-item` children (ListItem, MenuItem, ...)
+ *  in a flowing hover group, for compositions with no container of their own. */
+export declare const HoverGroup: React.FC<HoverGroupProps>;

package/dist/lib/usePortalThemeClass.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Returns the theme-scope class enclosing `anchor`, so a portaled surface can
+ * re-apply it to itself.
+ *
+ * Floating surfaces (a Select's listbox, a Modal) portal to <body> so they
+ * can position with `fixed` without being clipped by an ancestor's overflow.
+ * That works for layout, but it moves them out from under any `.dark` or
+ * `.force-light` container: the panel then inherits <html>'s tokens instead
+ * of the ones in effect where the trigger actually lives. In the docs site,
+ * whose preview panels render a light component inside a dark page, that
+ * showed up as a dark dropdown opening over a white panel.
+ *
+ * Copying the class onto the portaled element keeps the body portal (and its
+ * positioning) while restoring the tokens the trigger sees.
+ *
+ * Returns '' when no scope encloses the anchor, which is the common case and
+ * correctly means "inherit from <html>".
+ */
+export declare function usePortalThemeClass(anchor: {
+    current: HTMLElement | null;
+}, active: boolean): string;
+/**
+ * Same idea for the Surface layer: returns the `data-surface` value
+ * ("solid" | "glass") in effect where `anchor` lives, so a portaled surface
+ * can re-apply it. Without it, a Modal opened from inside a glass area would
+ * portal out of it and render solid. Returns undefined (no attribute) when
+ * no surface scope encloses the anchor -- i.e. the Solid default.
+ */
+export declare function usePortalSurface(anchor: {
+    current: HTMLElement | null;
+}, active: boolean): string | undefined;

package/dist/lib/useThemeTick.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Chart components read color tokens once per render via getComputedStyle
+ * (Recharts needs real color strings, not CSS vars). That read is frozen at
+ * render time, so toggling the app's .dark class on <html> after a chart has
+ * already mounted leaves it showing stale (light-mode) colors until it
+ * happens to re-render for an unrelated reason. This watches <html>'s class
+ * attribute and bumps a counter on change, so a chart calling this hook
+ * re-renders — and re-reads its colors — right when the theme flips.
+ */
+export declare function useThemeTick(): number;