@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/css/themes/default/variables.css

@@ -0,0 +1,162 @@
+@layer base {
+  /* Cognitiv Default Theme */
+  :root,
+  .light,
+  .default,
+  [data-theme="light"],
+  [data-theme="default"] {
+    color-scheme: light;
+
+    /* == Common Variables == */
+
+    /* Primitive Colors (Do not change between light and dark) */
+    --white: oklch(100% 0 0);
+    --black: oklch(0% 0 0);
+    --snow: oklch(0.9911 0 0);
+    --eclipse: oklch(0.2103 0.0059 285.89);
+
+    /* Spacing scale */
+    --spacing: 0.25rem;
+
+    /* Border */
+    --border-width: 1px;
+    --field-border-width: 0px;
+    --disabled-opacity: 0.5;
+
+    /* Ring offset - Used for focus ring */
+    --ring-offset-width: 2px;
+
+    /* Cursor */
+    --cursor-interactive: pointer;
+    --cursor-disabled: not-allowed;
+
+    /* Radius */
+    --radius: 0.5rem;
+    --field-radius: calc(var(--radius) * 1.5);
+
+    /* == Light Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(0.9702 0 0);
+    --foreground: var(--eclipse);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: var(--white);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.9524 0.0013 286.37);
+    --surface-secondary-foreground: var(--foreground);
+
+    --surface-tertiary: oklch(0.9373 0.0013 286.37);
+    --surface-tertiary-foreground: var(--foreground);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
+    --overlay: var(--white);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(0.5517 0.0138 285.94);
+
+    --scrollbar: oklch(87.1% 0.006 286.286);
+
+    --default: oklch(94% 0.001 286.375);
+    --default-foreground: var(--eclipse);
+
+    --accent: oklch(62.03999999999999% 0.195 360);
+    --accent-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: var(--white);
+    --field-foreground: oklch(0.2103 0.0059 285.89);
+    --field-placeholder: var(--muted);
+    --field-border: transparent; /* no border by default on form fields */
+
+    /* Status Colors */
+    --success: oklch(0.7329 0.1935 150.81);
+    --success-foreground: var(--eclipse);
+
+    --warning: oklch(0.7819 0.1585 72.33);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.6532 0.2328 25.74);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: var(--white);
+    --segment-foreground: var(--eclipse);
+
+    /* Misc Colors */
+    --border: oklch(90% 0.004 286.32);
+    --separator: oklch(92% 0.004 286.32);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Shadows */
+    /* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */
+    --surface-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
+    /* Overlay shadow */
+    --overlay-shadow:
+      0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
+      0 14px 28px 0 rgba(0, 0, 0, 0.08);
+    --field-shadow:
+      0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 0 1px 0 rgba(0, 0, 0, 0.06);
+    /* Skeleton Default Global Animation */
+    --skeleton-animation: shimmer; /* shimmer, pulse, none */
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+    /* == Dark Theme Variables == */
+
+    /* Base Colors */
+    --background: oklch(12% 0.005 285.823);
+    --foreground: var(--snow);
+
+    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+    --surface: oklch(0.2103 0.0059 285.89);
+    --surface-foreground: var(--foreground);
+
+    --surface-secondary: oklch(0.257 0.0037 286.14);
+    --surface-tertiary: oklch(0.2721 0.0024 247.91);
+
+    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
+    --overlay: oklch(0.2103 0.0059 285.89);
+    --overlay-foreground: var(--foreground);
+
+    --muted: oklch(70.5% 0.015 286.067);
+
+    --scrollbar: oklch(70.5% 0.015 286.067);
+
+    --default: oklch(27.4% 0.006 286.033);
+    --default-foreground: var(--snow);
+
+    /* Form Fields */
+    --field-background: oklch(0.2103 0.0059 285.89);
+    --field-foreground: var(--foreground);
+
+    /* Status Colors */
+    --warning: oklch(0.8203 0.1388 76.34);
+    --warning-foreground: var(--eclipse);
+
+    --danger: oklch(0.594 0.1967 24.63);
+    --danger-foreground: var(--snow);
+
+    /* Component Colors */
+    --segment: oklch(0.3964 0.01 285.93);
+    --segment-foreground: var(--foreground);
+
+    /* Misc Colors */
+    --border: oklch(28% 0.006 286.033);
+    --separator: oklch(25% 0.006 286.033);
+    --focus: var(--accent);
+    --link: var(--foreground);
+
+    /* Shadows */
+    --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+    --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
+    --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+  }
+}

package/dist/css/themes/shared/theme.css

@@ -0,0 +1,191 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+  --color-surface-secondary: var(--surface-secondary);
+  --color-surface-secondary-foreground: var(--surface-secondary-foreground);
+
+  --color-surface-tertiary: var(--surface-tertiary);
+  --color-surface-tertiary-foreground: var(--surface-tertiary-foreground);
+
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+
+  --color-muted: var(--muted);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-segment: var(--segment);
+  --color-segment-foreground: var(--segment-foreground);
+
+  --color-border: var(--border);
+  --color-separator: var(--separator);
+  --color-focus: var(--focus);
+  --color-link: var(--link);
+
+  --color-default: var(--default);
+  --color-default-foreground: var(--default-foreground);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+
+  --shadow-surface: var(--surface-shadow);
+  --shadow-overlay: var(--overlay-shadow);
+  --shadow-field: var(--field-shadow);
+
+  /* Form Field Tokens */
+  --color-field: var(--field-background, var(--default));
+  --color-field-hover: color-mix(
+    in oklab,
+    var(--field-background, var(--default)) 90%,
+    var(--field-foreground, var(--default-foreground)) 10%
+  );
+  --color-field-foreground: var(--field-foreground, var(--foreground));
+  --color-field-placeholder: var(--field-placeholder, var(--muted));
+  --color-field-border: var(--field-border, var(--border));
+  --radius-field: var(--field-radius, calc(var(--radius) * 1.5));
+  --border-width-field: var(--field-border-width, var(--border-width));
+
+  /* Calculated Variables */
+
+  /* Colors */
+
+  /* --- background shades --- */
+  --color-background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+  --color-background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+  --color-background-inverse: var(--foreground);
+
+  /* ------------------------- */
+  --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+  --color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+  --color-success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+  --color-warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+  --color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+  /* Form Field Colors */
+  --color-field-hover: color-mix(
+    in oklab,
+    var(--field-background, var(--default)) 90%,
+    var(--field-foreground, var(--foreground)) 2%
+  );
+  --color-field-focus: var(--field-background, var(--default));
+  --color-field-border-hover: color-mix(
+    in oklab,
+    var(--field-border, var(--border)) 88%,
+    var(--field-foreground, var(--foreground)) 10%
+  );
+  --color-field-border-focus: color-mix(
+    in oklab,
+    var(--field-border, var(--border)) 74%,
+    var(--field-foreground, var(--foreground)) 22%
+  );
+
+  /* Soft Colors */
+  --color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
+  --color-accent-soft-foreground: var(--accent);
+  --color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
+
+  --color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+  --color-danger-soft-foreground: var(--danger);
+  --color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+  --color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
+  --color-warning-soft-foreground: var(--warning);
+  --color-warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
+
+  --color-success-soft: color-mix(in oklab, var(--success) 15%, transparent);
+  --color-success-soft-foreground: var(--success);
+  --color-success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
+
+  /* Separator Colors - Levels */
+  --color-separator-secondary: color-mix(
+    in oklab,
+    var(--surface) 85%,
+    var(--surface-foreground) 15%
+  );
+  --color-separator-tertiary: color-mix(
+    in oklab,
+    var(--surface) 81%,
+    var(--surface-foreground) 19%
+  );
+
+  /* Border Colors - Levels (progressive contrast: default → secondary → tertiary) */
+  /* Light mode: lighter → darker | Dark mode: darker → lighter */
+  --color-border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+  --color-border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+  /* Radius and default sizes - defaults can change by just changing the --radius */
+  --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
+  --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
+  --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
+  --radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */
+  --radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */
+  --radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */
+  --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
+  --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
+
+  /* Transition Timing Functions  */
+  --ease-smooth: ease; /* same as transition: ease; */
+  /* These custom curves are made by https://twitter.com/bdc */
+
+  /* From smoother to faster */
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  /* From slower to faster */
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+  /* Custom smooth-out curve: fast start, smooth stop - Apple style */
+  --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
+  /* From slower to faster */
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+
+  /* Linear */
+  --ease-linear: linear;
+
+  /* Animations */
+  --animate-spin-fast: spin 0.75s linear infinite;
+  --animate-skeleton: skeleton 2s linear infinite;
+  --animate-caret-blink: caret-blink 1.2s ease-out infinite;
+
+  @keyframes skeleton {
+    100% {
+      transform: translateX(200%);
+    }
+  }
+
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}

package/dist/css/utilities.css

@@ -0,0 +1,56 @@
+/* === Focus Ring === */
+@utility focus-ring {
+  @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
+  /* Overrides the ring offset from the theme variables */
+  --tw-ring-offset-width: var(--ring-offset-width);
+}
+
+@utility focus-field-ring {
+  @apply ring-2 ring-focus ring-offset-0 outline-none;
+  /* No separation - ring sits directly against the element */
+  --tw-ring-offset-width: 0px;
+}
+
+@utility invalid-field-ring {
+  /* Unfocused: show 1px outline */
+  @apply outline-1 outline-danger outline-solid;
+  --tw-ring-offset-width: 3px;
+
+  /* Focused: show 2px ring in danger color, remove outline */
+  &:focus,
+  &:focus-visible,
+  &[data-focused="true"],
+  &[data-focus-visible="true"],
+  &:focus-within,
+  &[data-focus-within="true"] {
+    @apply ring-2 ring-danger ring-offset-0;
+    --tw-ring-offset-width: 0px;
+  }
+}
+
+@utility no-highlight {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* === Statuses === */
+@utility status-focused {
+  @apply focus-ring;
+}
+
+@utility status-focused-field {
+  @apply focus-field-ring;
+}
+
+@utility status-invalid-field {
+  @apply invalid-field-ring;
+}
+
+@utility status-disabled {
+  opacity: var(--disabled-opacity);
+  cursor: var(--cursor-disabled);
+  pointer-events: none;
+}
+
+@utility status-pending {
+  @apply pointer-events-none;
+}

package/dist/css/variants.css

@@ -0,0 +1,106 @@
+/**
+ * ================================================================================================
+ * Cognitiv Custom Tailwind CSS Variants
+ * ================================================================================================
+ *
+ * Custom variants with intelligent fallback: explicit controls override system preferences.
+ *
+ * Usage:
+ *   motion-reduce:opacity-0      - Reduced motion accessibility
+ *   motion-safe:animate-spin     - Full motion effects
+ *   dark:bg-gray-900             - Dark mode styles
+ *
+ * Priority: Explicit data attributes/classes → System preferences (fallback)
+ * ================================================================================================
+ */
+
+/* -------------------------------------------------------------------------------------------------
+ * motion-reduce — Minimize animations for accessibility
+ * Priority: data-reduce-motion="true" → prefers-reduced-motion: reduce
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant motion-reduce {
+  /* Explicit: data-reduce-motion="true" on element or ancestor */
+  &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system prefers-reduced-motion setting */
+  @media (prefers-reduced-motion: reduce) {
+    &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * motion-safe — Enable full animations and transitions
+ * Priority: data-reduce-motion="false" → prefers-reduced-motion: no-preference
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant motion-safe {
+  /* Explicit: data-reduce-motion="false" on element or ancestor */
+  &:is([data-reduce-motion="false"], [data-reduce-motion="false"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system has no motion preference set */
+  @media (prefers-reduced-motion: no-preference) {
+    &:not(
+      :is(
+        [data-reduce-motion="true"],
+        [data-reduce-motion="true"] *,
+        [data-reduce-motion="false"],
+        [data-reduce-motion="false"] *
+      )
+    ) {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * dark — Dark mode styles
+ * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant dark {
+  /* Explicit: .dark class or data-theme="dark" on element or ancestor */
+  &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system prefers dark color scheme */
+  @media (prefers-color-scheme: dark) {
+    &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./use-css-variable";
+export * from "./use-is-hydrated";
+export * from "./use-list-data";
+export * from "./use-measured-height";
+export * from "./use-mounted";
+export * from "./use-overlay-state";
+export * from "./use-safe-layout-effect";
+export * from "./use-isomorphic-layout-effect";
+export * from "./use-media-query";

package/dist/hooks/use-css-variable.d.ts

@@ -0,0 +1,36 @@
+/**
+ * A hook that safely retrieves CSS custom property values from the document element
+ * with SSR support, automatic fallback handling, and optional caching.
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   const animationType = useCSSVariable('--skeleton-animation')
+ *   // Returns the CSS variable value or undefined (cached by default)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * function Component({ color }) {
+ *   // Override with prop if provided
+ *   const themeColor = useCSSVariable('--theme-color', color)
+ *   // Returns color prop if defined, otherwise CSS variable value
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   // Disable caching for dynamic CSS variables
+ *   const dynamicValue = useCSSVariable('--dynamic-value', undefined, false)
+ *   // Will always query the DOM for fresh value
+ * }
+ * ```
+ *
+ * @param variableName - The CSS custom property name (e.g., '--my-variable')
+ * @param override - Optional override value that takes precedence over CSS variable
+ * @param cache - Whether to cache the CSS variable value (default: true)
+ * @returns The CSS variable value, override value, or undefined
+ */
+export declare function useCSSVariable(variableName: string, override?: string, cache?: boolean): string | undefined;

package/dist/hooks/use-css-variable.js

@@ -0,0 +1,72 @@
+"use strict";
+import { useIsSSR } from '@react-aria/ssr';
+import * as React from 'react';
+
+// Cache for CSS variable values to avoid repeated DOM queries
+const cssVariableCache = new Map();
+
+/**
+ * A hook that safely retrieves CSS custom property values from the document element
+ * with SSR support, automatic fallback handling, and optional caching.
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   const animationType = useCSSVariable('--skeleton-animation')
+ *   // Returns the CSS variable value or undefined (cached by default)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * function Component({ color }) {
+ *   // Override with prop if provided
+ *   const themeColor = useCSSVariable('--theme-color', color)
+ *   // Returns color prop if defined, otherwise CSS variable value
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   // Disable caching for dynamic CSS variables
+ *   const dynamicValue = useCSSVariable('--dynamic-value', undefined, false)
+ *   // Will always query the DOM for fresh value
+ * }
+ * ```
+ *
+ * @param variableName - The CSS custom property name (e.g., '--my-variable')
+ * @param override - Optional override value that takes precedence over CSS variable
+ * @param cache - Whether to cache the CSS variable value (default: true)
+ * @returns The CSS variable value, override value, or undefined
+ */
+function useCSSVariable(variableName, override, cache = true) {
+  const isSSR = useIsSSR();
+  return React.useMemo(() => {
+    // Return override if provided
+    if (override !== undefined) return override;
+
+    // Return undefined during SSR
+    if (isSSR) return undefined;
+
+    // Check cache first if caching is enabled
+    if (cache && cssVariableCache.has(variableName)) {
+      return cssVariableCache.get(variableName);
+    }
+    try {
+      const root = document.documentElement;
+      const value = getComputedStyle(root).getPropertyValue(variableName).trim() || undefined;
+
+      // Cache the value if caching is enabled
+      if (cache) {
+        cssVariableCache.set(variableName, value);
+      }
+      return value;
+    } catch {
+      // Return undefined if any error occurs (e.g., document not available)
+      return undefined;
+    }
+  }, [variableName, override, isSSR, cache]);
+}
+
+export { useCSSVariable };

package/dist/hooks/use-is-hydrated.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hook that returns true if the component is mounted on the client (hydrated)
+ * and false when rendering on the server.
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   const isHydrated = useIsHydrated()
+ *
+ *   if (!isHydrated) {
+ *     return <div>Loading...</div>
+ *   }
+ *
+ *   return <div>Client rendered content</div>
+ * }
+ * ```
+ * @returns boolean indicating if the component is hydrated
+ */
+export declare function useIsHydrated(): boolean;

package/dist/hooks/use-is-hydrated.js

@@ -0,0 +1,28 @@
+"use strict";
+import * as React from 'react';
+
+/**
+ * A hook that returns true if the component is mounted on the client (hydrated)
+ * and false when rendering on the server.
+ *
+ * @example
+ * ```jsx
+ * function Component() {
+ *   const isHydrated = useIsHydrated()
+ *
+ *   if (!isHydrated) {
+ *     return <div>Loading...</div>
+ *   }
+ *
+ *   return <div>Client rendered content</div>
+ * }
+ * ```
+ * @returns boolean indicating if the component is hydrated
+ */
+
+function useIsHydrated() {
+  const subscribe = () => () => {};
+  return React.useSyncExternalStore(subscribe, () => true, () => false);
+}
+
+export { useIsHydrated };

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+"use strict";
+import { useLayoutEffect, useEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };