@usefragments/ui 1.0.0

package/dist/utils/a11y.d.ts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+/**
+ * Generates a unique ID for ARIA relationships (labelledby, describedby, etc.)
+ * Falls back to React.useId if available (React 18+), otherwise uses a counter.
+ *
+ * @param prefix - Optional prefix for the ID
+ * @returns A unique ID string
+ *
+ * @example
+ * ```tsx
+ * const id = useId('dialog-title');
+ * // Returns: "dialog-title-1" or ":r0:" (React 18)
+ * ```
+ */
+export declare function useId(prefix?: string): string;
+/**
+ * Hook to announce messages to screen readers via a live region.
+ * Creates an ARIA live region that persists for the component lifetime.
+ *
+ * @returns An object with an announce function
+ *
+ * @example
+ * ```tsx
+ * const { announce } = useAnnounce();
+ *
+ * // Polite announcement (waits for screen reader to finish)
+ * announce('Item added to cart');
+ *
+ * // Assertive announcement (interrupts immediately)
+ * announce('Error: Please fix the form', 'assertive');
+ * ```
+ */
+export declare function useAnnounce(): {
+    announce: (message: string, priority?: 'polite' | 'assertive') => void;
+};
+/**
+ * Hook to detect if the user prefers reduced motion.
+ * Respects the `prefers-reduced-motion` media query.
+ *
+ * @returns boolean - true if user prefers reduced motion
+ *
+ * @example
+ * ```tsx
+ * const prefersReducedMotion = usePrefersReducedMotion();
+ *
+ * <div style={{
+ *   transition: prefersReducedMotion ? 'none' : 'transform 200ms'
+ * }}>
+ * ```
+ */
+export declare function usePrefersReducedMotion(): boolean;
+/**
+ * Hook to detect if the user prefers increased contrast.
+ * Respects the `prefers-contrast: more` media query.
+ *
+ * @returns boolean - true if user prefers high contrast
+ *
+ * @example
+ * ```tsx
+ * const prefersContrast = usePrefersContrast();
+ *
+ * <div className={prefersContrast ? styles.highContrast : undefined}>
+ * ```
+ */
+export declare function usePrefersContrast(): boolean;
+/**
+ * Hook to trap focus within a container element.
+ * Useful for modals, dialogs, and other overlays.
+ *
+ * @param ref - React ref to the container element
+ * @param active - Whether focus trap is active
+ *
+ * @example
+ * ```tsx
+ * const dialogRef = useRef<HTMLDivElement>(null);
+ * useFocusTrap(dialogRef, isOpen);
+ *
+ * return <div ref={dialogRef}>...</div>;
+ * ```
+ */
+export declare function useFocusTrap(ref: React.RefObject<HTMLElement | null>, active: boolean): void;
+/**
+ * Helper to handle keyboard navigation within a group of elements.
+ * Supports arrow keys, Home, End, and optional type-ahead.
+ *
+ * @param event - Keyboard event
+ * @param items - Array of focusable items
+ * @param currentIndex - Current focused item index
+ * @param options - Navigation options
+ * @returns New index or undefined if no navigation occurred
+ *
+ * @example
+ * ```tsx
+ * const handleKeyDown = (event: KeyboardEvent) => {
+ *   const newIndex = handleArrowNavigation(event, menuItems, currentIndex, {
+ *     orientation: 'vertical',
+ *     loop: true,
+ *   });
+ *   if (newIndex !== undefined) {
+ *     setCurrentIndex(newIndex);
+ *   }
+ * };
+ * ```
+ */
+export declare function handleArrowNavigation(event: React.KeyboardEvent | KeyboardEvent, items: readonly unknown[], currentIndex: number, options?: {
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    loop?: boolean;
+}): number | undefined;
+export interface VisuallyHiddenProps {
+    children: React.ReactNode;
+    /** If true, becomes visible when focused (useful for skip links) */
+    focusable?: boolean;
+}
+/**
+ * Visually hides content while keeping it accessible to screen readers.
+ * Use for skip links, additional context, or off-screen labels.
+ *
+ * @example
+ * ```tsx
+ * // Hidden label for icon-only button
+ * <button>
+ *   <Icon name="search" />
+ *   <VisuallyHidden>Search</VisuallyHidden>
+ * </button>
+ *
+ * // Skip link that shows on focus
+ * <VisuallyHidden focusable>
+ *   <a href="#main">Skip to main content</a>
+ * </VisuallyHidden>
+ * ```
+ */
+export declare function VisuallyHidden({ children, focusable }: VisuallyHiddenProps): React.ReactElement;
+//# sourceMappingURL=a11y.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/utils/a11y.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAU7C;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,IAAI;IAC7B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;CACxE,CAiEA;AAMD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAsBjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAmB5C;AAMD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,MAAM,EAAE,OAAO,GACd,IAAI,CAkDN;AAeD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,aAAa,EAC1C,KAAK,EAAE,SAAS,OAAO,EAAE,EACzB,YAAY,EAAE,MAAM,EACpB,OAAO,GAAE;IACP,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;CACX,GACL,MAAM,GAAG,SAAS,CA4DpB;AAMD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAiB,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAoBvG"}

package/dist/utils/a11y.js

@@ -0,0 +1,215 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+let idCounter = 0;
+function useId(prefix) {
+  var _a;
+  const reactId = (_a = React.useId) == null ? void 0 : _a.call(React);
+  const [id] = React.useState(() => {
+    if (reactId) return reactId;
+    return `${prefix ? `${prefix}-` : "fui-"}${++idCounter}`;
+  });
+  return id;
+}
+function useAnnounce() {
+  const politeRef = React.useRef(null);
+  const assertiveRef = React.useRef(null);
+  React.useEffect(() => {
+    const polite = document.createElement("div");
+    polite.setAttribute("aria-live", "polite");
+    polite.setAttribute("aria-atomic", "true");
+    polite.setAttribute("role", "status");
+    Object.assign(polite.style, {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      border: "0"
+    });
+    document.body.appendChild(polite);
+    politeRef.current = polite;
+    const assertive = document.createElement("div");
+    assertive.setAttribute("aria-live", "assertive");
+    assertive.setAttribute("aria-atomic", "true");
+    assertive.setAttribute("role", "alert");
+    Object.assign(assertive.style, {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      border: "0"
+    });
+    document.body.appendChild(assertive);
+    assertiveRef.current = assertive;
+    return () => {
+      polite.remove();
+      assertive.remove();
+    };
+  }, []);
+  const announce = React.useCallback(
+    (message, priority = "polite") => {
+      const region = priority === "assertive" ? assertiveRef.current : politeRef.current;
+      if (region) {
+        region.textContent = "";
+        requestAnimationFrame(() => {
+          region.textContent = message;
+        });
+      }
+    },
+    []
+  );
+  return { announce };
+}
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    setPrefersReducedMotion(mediaQuery.matches);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+}
+function usePrefersContrast() {
+  const [prefersContrast, setPrefersContrast] = React.useState(false);
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-contrast: more)");
+    const handleChange = (event) => {
+      setPrefersContrast(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    setPrefersContrast(mediaQuery.matches);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  return prefersContrast;
+}
+function useFocusTrap(ref, active) {
+  const previousActiveElement = React.useRef(null);
+  React.useEffect(() => {
+    if (!active || !ref.current) return;
+    const container = ref.current;
+    previousActiveElement.current = document.activeElement;
+    const focusableElements = getFocusableElements(container);
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const focusable = getFocusableElements(container);
+      if (focusable.length === 0) return;
+      const firstFocusable = focusable[0];
+      const lastFocusable = focusable[focusable.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          event.preventDefault();
+          lastFocusable.focus();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          event.preventDefault();
+          firstFocusable.focus();
+        }
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+      if (previousActiveElement.current instanceof HTMLElement) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [active, ref]);
+}
+function getFocusableElements(container) {
+  return container.querySelectorAll(
+    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+  );
+}
+function handleArrowNavigation(event, items, currentIndex, options = {}) {
+  const { orientation = "vertical", loop = true } = options;
+  const length = items.length;
+  if (length === 0) return void 0;
+  let newIndex;
+  switch (event.key) {
+    case "ArrowDown":
+      if (orientation === "horizontal") return void 0;
+      event.preventDefault();
+      newIndex = currentIndex + 1;
+      if (newIndex >= length) {
+        newIndex = loop ? 0 : length - 1;
+      }
+      break;
+    case "ArrowUp":
+      if (orientation === "horizontal") return void 0;
+      event.preventDefault();
+      newIndex = currentIndex - 1;
+      if (newIndex < 0) {
+        newIndex = loop ? length - 1 : 0;
+      }
+      break;
+    case "ArrowRight":
+      if (orientation === "vertical") return void 0;
+      event.preventDefault();
+      newIndex = currentIndex + 1;
+      if (newIndex >= length) {
+        newIndex = loop ? 0 : length - 1;
+      }
+      break;
+    case "ArrowLeft":
+      if (orientation === "vertical") return void 0;
+      event.preventDefault();
+      newIndex = currentIndex - 1;
+      if (newIndex < 0) {
+        newIndex = loop ? length - 1 : 0;
+      }
+      break;
+    case "Home":
+      event.preventDefault();
+      newIndex = 0;
+      break;
+    case "End":
+      event.preventDefault();
+      newIndex = length - 1;
+      break;
+    default:
+      return void 0;
+  }
+  return newIndex;
+}
+function VisuallyHidden({ children, focusable = false }) {
+  const style = focusable ? {} : {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: "0"
+  };
+  return /* @__PURE__ */ jsx("span", { style, "data-visually-hidden": !focusable || void 0, children });
+}
+export {
+  VisuallyHidden,
+  handleArrowNavigation,
+  useAnnounce,
+  useFocusTrap,
+  useId,
+  usePrefersContrast,
+  usePrefersReducedMotion
+};

package/dist/utils/aria.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function mergeAriaIds(...ids) {
+  const merged = ids.filter(Boolean).join(" ").trim();
+  return merged.length > 0 ? merged : void 0;
+}
+function normalizeError(error) {
+  return {
+    hasError: !!error,
+    errorMessage: typeof error === "string" ? error : void 0
+  };
+}
+function useFormFieldIds(prefix, opts) {
+  const id = React__namespace.useId();
+  const labelId = opts.label ? `${prefix}-label-${id}` : void 0;
+  const { hasError, errorMessage } = normalizeError(opts.error);
+  const errorId = errorMessage ? `${prefix}-error-${id}` : void 0;
+  const helperId = opts.helperText ? `${prefix}-helper-${id}` : void 0;
+  return { id, labelId, helperId, errorId, hasError, errorMessage };
+}
+exports.mergeAriaIds = mergeAriaIds;
+exports.normalizeError = normalizeError;
+exports.useFormFieldIds = useFormFieldIds;

package/dist/utils/aria.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Merge multiple aria ID values into a single space-separated string.
+ * Filters out undefined/empty values. Returns undefined if no valid IDs.
+ */
+export declare function mergeAriaIds(...ids: Array<string | undefined>): string | undefined;
+/**
+ * Normalize a flexible error prop (boolean | string) into its constituent parts.
+ * Used by form components that accept `error?: boolean | string`.
+ */
+export declare function normalizeError(error?: boolean | string): {
+    hasError: boolean;
+    errorMessage: string | undefined;
+};
+/**
+ * Hook that generates consistent ARIA IDs for form field components.
+ * Eliminates duplicated ID generation across Select, Combobox, DatePicker, RadioGroup, etc.
+ */
+export declare function useFormFieldIds(prefix: string, opts: {
+    label?: string;
+    helperText?: string;
+    error?: boolean | string;
+}): {
+    id: string;
+    labelId: string | undefined;
+    helperId: string | undefined;
+    errorId: string | undefined;
+    hasError: boolean;
+    errorMessage: string | undefined;
+};
+/**
+ * Base props shared by all form field components.
+ * Extend this interface to get consistent label, helper, error, and disabled props.
+ */
+export interface FormFieldProps {
+    /** Visible label text */
+    label?: string;
+    /** Helper text shown below the field */
+    helperText?: string;
+    /** Show error styling. When a string is provided, it is displayed as an error message. */
+    error?: boolean | string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+}
+//# sourceMappingURL=aria.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../src/utils/aria.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,GAAG,MAAM,GAAG,SAAS,CAGlF;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG;IACxD,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,CAKA;AAMD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAAE;;;;;;;EAQxE;AAMD;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/utils/aria.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+function mergeAriaIds(...ids) {
+  const merged = ids.filter(Boolean).join(" ").trim();
+  return merged.length > 0 ? merged : void 0;
+}
+function normalizeError(error) {
+  return {
+    hasError: !!error,
+    errorMessage: typeof error === "string" ? error : void 0
+  };
+}
+function useFormFieldIds(prefix, opts) {
+  const id = React.useId();
+  const labelId = opts.label ? `${prefix}-label-${id}` : void 0;
+  const { hasError, errorMessage } = normalizeError(opts.error);
+  const errorId = errorMessage ? `${prefix}-error-${id}` : void 0;
+  const helperId = opts.helperText ? `${prefix}-helper-${id}` : void 0;
+  return { id, labelId, helperId, errorId, hasError, errorMessage };
+}
+export {
+  mergeAriaIds,
+  normalizeError,
+  useFormFieldIds
+};

package/dist/utils/canonical-stamp.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function fragmentsCanonicalStampProps(component, slot = "root") {
+  if (isProductionBuild()) return {};
+  return {
+    "data-fc-canonical": component,
+    "data-fc-slot": slot,
+    "data-fc-contract": `source:@usefragments/ui#${component}`
+  };
+}
+function isProductionBuild() {
+  try {
+    return process.env.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+}
+exports.fragmentsCanonicalStampProps = fragmentsCanonicalStampProps;

package/dist/utils/canonical-stamp.d.ts

@@ -0,0 +1,25 @@
+export type FragmentsCanonicalStampProps = {
+    "data-fc-canonical"?: string;
+    "data-fc-slot"?: string;
+    "data-fc-contract"?: string;
+};
+/**
+ * Dev-only governance stamps consumed by Fragments Inspect. They mark a DOM
+ * element as the rendered output of a canonical design-system component so the
+ * Inspect host can grade it green ("source-bound canonical stamp") instead of
+ * falling back to advisory. The `source:` contract prefix is what earns
+ * `source_bound` trust on the host (see `stampTrustForSourceBackedHost`).
+ *
+ * The stamp is emitted unless we can PROVE we are in a production build. We read
+ * `process.env.NODE_ENV` directly so bundlers (Vite/Next/webpack) statically
+ * replace it and tree-shake the stamp out of production, while tolerating
+ * runtimes where `process` is genuinely undefined (an unbundled browser) by
+ * emitting.
+ *
+ * NOTE: an earlier guard `typeof process === "undefined" || ...` silently
+ * disabled the stamp in EVERY browser runtime — `process` is undefined in the
+ * browser, so it short-circuited to no stamp, which is the opposite of intent.
+ * Detect production affirmatively instead.
+ */
+export declare function fragmentsCanonicalStampProps(component: string, slot?: string): FragmentsCanonicalStampProps;
+//# sourceMappingURL=canonical-stamp.d.ts.map

package/dist/utils/canonical-stamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canonical-stamp.d.ts","sourceRoot":"","sources":["../../src/utils/canonical-stamp.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,4BAA4B,GAAG;IACzC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,4BAA4B,CAC1C,SAAS,EAAE,MAAM,EACjB,IAAI,SAAS,GACZ,4BAA4B,CAO9B"}

package/dist/utils/canonical-stamp.js

@@ -0,0 +1,18 @@
+function fragmentsCanonicalStampProps(component, slot = "root") {
+  if (isProductionBuild()) return {};
+  return {
+    "data-fc-canonical": component,
+    "data-fc-slot": slot,
+    "data-fc-contract": `source:@usefragments/ui#${component}`
+  };
+}
+function isProductionBuild() {
+  try {
+    return process.env.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+}
+export {
+  fragmentsCanonicalStampProps
+};

package/dist/utils/css-warning.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let hasChecked = false;
+function checkCssLoaded() {
+  if (hasChecked || typeof window === "undefined") return;
+  hasChecked = true;
+  requestAnimationFrame(() => {
+    const root = document.documentElement;
+    const value = getComputedStyle(root).getPropertyValue("--fui-text-primary").trim();
+    if (!value) {
+      console.warn(
+        "[Fragments UI] Component styles not loaded. Components will render unstyled.\n\nAdd this import to your app entry point (e.g., main.tsx, layout.tsx):\n\n  import '@usefragments/ui/styles';\n\nNext.js users also need:\n\n  // next.config.ts\n  transpilePackages: ['@usefragments/ui']\n\nOr run: npx @usefragments/cli setup\n\nDocs: https://usefragments.com/getting-started"
+      );
+    }
+  });
+}
+exports.checkCssLoaded = checkCssLoaded;

package/dist/utils/css-warning.d.ts

@@ -0,0 +1,2 @@
+export declare function checkCssLoaded(): void;
+//# sourceMappingURL=css-warning.d.ts.map

package/dist/utils/css-warning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-warning.d.ts","sourceRoot":"","sources":["../../src/utils/css-warning.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,IAAI,IAAI,CAsBrC"}

package/dist/utils/css-warning.js

@@ -0,0 +1,17 @@
+let hasChecked = false;
+function checkCssLoaded() {
+  if (hasChecked || typeof window === "undefined") return;
+  hasChecked = true;
+  requestAnimationFrame(() => {
+    const root = document.documentElement;
+    const value = getComputedStyle(root).getPropertyValue("--fui-text-primary").trim();
+    if (!value) {
+      console.warn(
+        "[Fragments UI] Component styles not loaded. Components will render unstyled.\n\nAdd this import to your app entry point (e.g., main.tsx, layout.tsx):\n\n  import '@usefragments/ui/styles';\n\nNext.js users also need:\n\n  // next.config.ts\n  transpilePackages: ['@usefragments/ui']\n\nOr run: npx @usefragments/cli setup\n\nDocs: https://usefragments.com/getting-started"
+      );
+    }
+  });
+}
+export {
+  checkCssLoaded
+};