npm - @orion-ds/react - Versions diffs - 4.9.2 → 4.9.3 - Mend

@orion-ds/react 4.9.2 → 4.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1440) hide show

package/dist/contexts/ThemeContext.d.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { UseThemeOptions, UseThemeReturn } from '../hooks/useTheme';
+/**
+ * Theme Provider Props
+ */
+export interface ThemeProviderProps {
+    /**
+     * Child components
+     */
+    children: ReactNode;
+    /**
+     * Default theme
+     * @default 'light'
+     */
+    defaultTheme?: "light" | "dark";
+    /**
+     * Default brand
+     * @default 'orion'
+     */
+    defaultBrand?: "orion" | "red" | "deepblue" | "orange" | "lemon";
+    /**
+     * Theme options (see useTheme for full options)
+     * @deprecated Use flat props (defaultTheme, defaultBrand) instead.
+     */
+    options?: UseThemeOptions;
+    /**
+     * Disable font loading warnings in development
+     * @default false
+     */
+    disableFontWarnings?: boolean;
+    /**
+     * Disable automatic font loading via FontLoader
+     * When false (default), fonts are loaded automatically.
+     * Set to true if you want to manage font loading manually.
+     * @default false
+     */
+    disableAutoFontLoading?: boolean;
+    /**
+     * Disable CSS import warnings in development
+     * When false (default), a warning is shown if react.css is not imported.
+     * @default false
+     */
+    disableCSSWarnings?: boolean;
+}
+/**
+ * ThemeProvider Component
+ *
+ * Wraps your application to provide global theme and brand state.
+ * Must be placed near the root of your application.
+ */
+export declare function ThemeProvider({ children, defaultTheme, defaultBrand, options, disableFontWarnings, disableAutoFontLoading, disableCSSWarnings, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access global theme state
+ *
+ * ⚠️ IMPORTANT: Must be used inside a ThemeProvider
+ *
+ * @throws Error if used outside ThemeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, brand, setTheme, setBrand } = useTheme();
+ *   // Components automatically inherit theme/brand from <html> attributes
+ *   // DO NOT pass brand prop to components - it's applied globally!
+ * }
+ * ```
+ */
+export declare function useThemeContext(): UseThemeReturn;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/contexts/ThemeContext.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAqB3B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEhC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEjE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,mBAA2B,EAC3B,sBAA8B,EAC9B,kBAA0B,GAC3B,EAAE,kBAAkB,2CA2FpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,IAAI,cAAc,CAmBhD"}

package/dist/contexts/ThemeContext.mjs ADDED Viewed

@@ -0,0 +1,98 @@
+import { jsxs as y, jsx as g } from "react/jsx-runtime";
+import { useRef as a, useEffect as l, useContext as S, createContext as O } from "react";
+import { useTheme as P } from "../hooks/useTheme.mjs";
+import { getMissingFonts as x, BRAND_FONTS as C, GOOGLE_FONTS_URL as F } from "../utils/fonts.mjs";
+import { FontLoader as b } from "../components/FontLoader/FontLoader.mjs";
+const f = O(void 0);
+function E() {
+  return typeof window > "u" ? !0 : getComputedStyle(document.documentElement).getPropertyValue("--orion-react-styles-loaded").trim() === "1";
+}
+function R({
+  children: o,
+  defaultTheme: n,
+  defaultBrand: s,
+  options: p,
+  disableFontWarnings: i = !1,
+  disableAutoFontLoading: h = !1,
+  disableCSSWarnings: d = !1
+}) {
+  const v = {
+    ...p,
+    ...n !== void 0 && { defaultTheme: n },
+    ...s !== void 0 && { defaultBrand: s }
+  }, t = P(v), c = a(/* @__PURE__ */ new Set()), m = a(!1);
+  return l(() => {
+    if (d || typeof window > "u" || !(process.env.NODE_ENV === "development" || window.location.hostname === "localhost")) return;
+    const r = setTimeout(() => {
+      !m.current && !E() && (m.current = !0, console.warn(
+        `[Orion] Component styles not detected!
+You must import the component CSS file:
+  import '@orion-ds/react/styles.css'; // Single import includes all styles
+Add this import in your app entry file. It includes both design tokens and component styles.
+To disable this warning, set disableCSSWarnings={true} on ThemeProvider.`
+      ));
+    }, 100);
+    return () => clearTimeout(r);
+  }, [d]), l(() => {
+    if (i || typeof window > "u" || !(process.env.NODE_ENV === "development" || typeof window < "u" && window.location.hostname === "localhost")) return;
+    const r = setTimeout(() => {
+      const { brand: e } = t, u = x(e);
+      if (u.length > 0 && !c.current.has(e)) {
+        c.current.add(e);
+        const w = C[e].join(", ");
+        console.warn(
+          `[Orion] Missing fonts for "${e}" brand: ${u.join(", ")}
+The "${e}" brand requires these fonts: ${w}
+To fix this, add one of the following to your app:
+Option 1: Use <FontLoader /> component (recommended)
+  import { FontLoader } from '@orion-ds/react';
+  <ThemeProvider>
+    <FontLoader />
+    <App />
+  </ThemeProvider>
+Option 2: Add Google Fonts to your HTML <head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="${F}" rel="stylesheet">
+To disable this warning, set disableFontWarnings={true} on ThemeProvider.`
+        );
+      }
+    }, 1e3);
+    return () => clearTimeout(r);
+  }, [t.brand, i, t]), /* @__PURE__ */ y(f.Provider, { value: t, children: [
+    !h && /* @__PURE__ */ g(b, {}),
+    o
+  ] });
+}
+function _() {
+  const o = S(f);
+  if (o === void 0)
+    throw new Error(
+      `❌ useTheme() must be used inside <ThemeProvider>
+Solution:
+Wrap your app with ThemeProvider:
+export default function App() {
+  return (
+    <ThemeProvider>
+      <YourComponents />
+    </ThemeProvider>
+  );
+}`
+    );
+  return o;
+}
+export {
+  R as ThemeProvider,
+  _ as useThemeContext
+};

package/dist/contexts/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * Orion React Contexts
+ */
+export { ThemeProvider, useThemeContext } from './ThemeContext';
+export type { ThemeProviderProps } from './ThemeContext';
+export { useTheme } from '../hooks/useTheme';
+export type { UseThemeOptions, UseThemeReturn, Theme, Brand, } from '../hooks/useTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/contexts/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAChE,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAGzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,YAAY,EACV,eAAe,EACf,cAAc,EACd,KAAK,EACL,KAAK,GACN,MAAM,mBAAmB,CAAC"}

package/dist/dnd.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/CollapsibleFolder/CollapsibleFolder.cjs");exports.CollapsibleFolder=e.CollapsibleFolder;

package/dist/dnd.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * @orion-ds/react/dnd
+ *
+ * Heavy component entry point for drag-and-drop components.
+ * This module requires the @dnd-kit peer dependencies:
+ *   - @dnd-kit/core
+ *   - @dnd-kit/sortable
+ *   - @dnd-kit/utilities
+ *
+ * Usage:
+ *   npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+ *   import { CollapsibleFolder } from '@orion-ds/react/dnd';
+ */
+export { CollapsibleFolder } from './components/CollapsibleFolder';
+export type { CollapsibleFolderProps, SortOption, } from './components/CollapsibleFolder';
+//# sourceMappingURL=dnd.d.ts.map

package/dist/dnd.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"dnd.d.ts","sourceRoot":"","sources":["../src/dnd.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EACV,sBAAsB,EACtB,UAAU,GACX,MAAM,gCAAgC,CAAC"}

package/dist/dnd.mjs ADDED Viewed

@@ -0,0 +1,4 @@
+import { CollapsibleFolder as e } from "./components/CollapsibleFolder/CollapsibleFolder.mjs";
+export {
+  e as CollapsibleFolder
+};

package/dist/docs/DocComponents.d.ts ADDED Viewed

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+type CalloutVariant = "info" | "tip" | "warning" | "error";
+interface CalloutProps {
+    variant?: CalloutVariant;
+    title?: string;
+    children: ReactNode;
+}
+export declare function Callout({ variant, title, children }: CalloutProps): import("react/jsx-runtime").JSX.Element;
+interface FeatureCardProps {
+    icon?: ReactNode;
+    title: string;
+    children: ReactNode;
+}
+export declare function FeatureCard({ icon, title, children }: FeatureCardProps): import("react/jsx-runtime").JSX.Element;
+interface CardGridProps {
+    columns?: 2 | 3;
+    children: ReactNode;
+}
+export declare function CardGrid({ columns, children }: CardGridProps): import("react/jsx-runtime").JSX.Element;
+interface StepProps {
+    number: number;
+    title: string;
+    children: ReactNode;
+}
+export declare function Step({ number, title, children }: StepProps): import("react/jsx-runtime").JSX.Element;
+interface StepsProps {
+    children: ReactNode;
+}
+export declare function Steps({ children }: StepsProps): import("react/jsx-runtime").JSX.Element;
+interface LinkCardProps {
+    title: string;
+    description: string;
+    href: string;
+    icon?: ReactNode;
+}
+export declare function LinkCard({ title, description, href, icon }: LinkCardProps): import("react/jsx-runtime").JSX.Element;
+interface LinkCardGridProps {
+    children: ReactNode;
+}
+export declare function LinkCardGrid({ children }: LinkCardGridProps): import("react/jsx-runtime").JSX.Element;
+interface BrandSwatchProps {
+    color: string;
+    name: string;
+}
+export declare function BrandSwatch({ color, name }: BrandSwatchProps): import("react/jsx-runtime").JSX.Element;
+interface TokenTableRow {
+    token: string;
+    description: string;
+}
+interface TokenTableProps {
+    rows: TokenTableRow[];
+}
+export declare function TokenTable({ rows }: TokenTableProps): import("react/jsx-runtime").JSX.Element;
+interface InfoTableProps {
+    headers: string[];
+    rows: string[][];
+}
+export declare function InfoTable({ headers, rows }: InfoTableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DocComponents.d.ts.map

package/dist/docs/DocComponents.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DocComponents.d.ts","sourceRoot":"","sources":["../../src/docs/DocComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AAItD,KAAK,cAAc,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;AA4B3D,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAoC1E;AAID,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA6DtE;AAID,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAW,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAShE;AAID,UAAU,SAAS;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,SAAS,2CAkD1D;AAED,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE,UAAU,2CAS7C;AAID,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,aAAa,2CAwEzE;AAID,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAS3D;AAID,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAgC5D;AAID,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,2CAsDnD;AAID,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;CAClB;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,cAAc,2CAiD1D"}

package/dist/editor.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/CodeEditor/CodeEditor.cjs");exports.CodeEditor=e.CodeEditor;

package/dist/editor.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * @orion-ds/react/editor
+ *
+ * Heavy component entry point for CodeEditor and related text editing components.
+ * This module requires the `react-syntax-highlighter` peer dependency.
+ *
+ * Usage:
+ *   npm install react-syntax-highlighter
+ *   import { CodeEditor } from '@orion-ds/react/editor';
+ */
+export { CodeEditor } from './components/CodeEditor';
+export type { CodeEditorProps } from './components/CodeEditor';
+//# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/editor.mjs ADDED Viewed

@@ -0,0 +1,4 @@
+import { CodeEditor as d } from "./components/CodeEditor/CodeEditor.mjs";
+export {
+  d as CodeEditor
+};

package/dist/examples/LandingPage.example.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../contexts/ThemeContext.cjs"),s=require("../components/Navbar/Navbar.cjs"),t=require("../components/Button/Button.cjs"),n=require("../sections/Section/Section.cjs"),i=require("../sections/Container/Container.cjs");function o(){return e.jsx(r.ThemeProvider,{children:e.jsxs("div",{style:{minHeight:"100vh",display:"flex",flexDirection:"column"},children:[e.jsx(s.Navbar,{children:e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",padding:"0 24px"},children:[e.jsx("strong",{children:"Orion"}),e.jsxs("div",{style:{display:"flex",gap:"24px"},children:[e.jsx(t.Button,{variant:"ghost",children:"Features"}),e.jsx(t.Button,{variant:"ghost",children:"Pricing"}),e.jsx(t.Button,{variant:"ghost",children:"Docs"}),e.jsx(t.Button,{variant:"primary",children:"Get Started"})]})]})}),e.jsx(n.Section,{children:e.jsx(i.Container,{children:e.jsxs("div",{style:{textAlign:"center",paddingTop:"60px",paddingBottom:"60px"},children:[e.jsx("h1",{style:{fontSize:"48px",marginBottom:"16px",fontWeight:"bold"},children:"Welcome to Orion Design System"}),e.jsx("p",{style:{fontSize:"18px",marginBottom:"32px",color:"var(--text-secondary)"},children:"The AI-first design system for building beautiful, accessible interfaces"}),e.jsx(t.Button,{variant:"primary",size:"lg",children:"Start Building"})]})})}),e.jsx(n.Section,{children:e.jsx(i.Container,{children:e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx("h2",{style:{fontSize:"32px",marginBottom:"16px",fontWeight:"bold"},children:"Premium Sections Available"}),e.jsxs("p",{style:{marginBottom:"24px",color:"var(--text-secondary)"},children:["For pre-built marketing and app sections, templates, and advanced components, install ",e.jsx("strong",{children:"@orion-ds/blocks"})]}),e.jsx(t.Button,{variant:"secondary",onClick:()=>window.open("https://github.com/anthropics/orion","_blank"),children:"Learn More"})]})})})]})})}exports.LandingPageExample=o;

package/dist/examples/LandingPage.example.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+/**
+ * Landing Page Example
+ *
+ * For a complete, full-featured landing page example with pre-built sections
+ * (Hero, Features, Pricing, Testimonials, FAQ, CTA, Footer), see @orion-ds/blocks.
+ *
+ * @example Using @orion-ds/blocks
+ * ```tsx
+ * // Install: npm install @orion-ds/blocks
+ * import { LandingPageTemplate } from '@orion-ds/blocks/templates';
+ *
+ * function App() {
+ *   return <LandingPageTemplate />;
+ * }
+ * ```
+ *
+ * @example Using free components (this package)
+ * ```tsx
+ * import { Section, Container } from '@orion/react/sections';
+ * import { Button, Navbar } from '@orion/react';
+ *
+ * function LandingPage() {
+ *   return (
+ *     <>
+ *       <Navbar />
+ *       <Section>
+ *         <Container>
+ *           <h1>Welcome to Orion</h1>
+ *           <p>Build faster with the AI-first design system</p>
+ *           <Button variant="primary">Get Started</Button>
+ *         </Container>
+ *       </Section>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @module examples
+ */
+/**
+ * Simple landing page example using free Orion components
+ *
+ * For a full-featured landing page with pre-built sections and templates,
+ * install @orion-ds/blocks: `npm install @orion-ds/blocks`
+ */
+export declare function LandingPageExample(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LandingPage.example.d.ts.map

package/dist/examples/LandingPage.example.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"LandingPage.example.d.ts","sourceRoot":"","sources":["../../src/examples/LandingPage.example.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAOH;;;;;GAKG;AACH,wBAAgB,kBAAkB,4CA6FjC"}

package/dist/examples/LandingPage.example.mjs ADDED Viewed

@@ -0,0 +1,106 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { ThemeProvider as o } from "../contexts/ThemeContext.mjs";
+import { Navbar as l } from "../components/Navbar/Navbar.mjs";
+import { Button as t } from "../components/Button/Button.mjs";
+import { Section as n } from "../sections/Section/Section.mjs";
+import { Container as r } from "../sections/Container/Container.mjs";
+function m() {
+  return /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(
+    "div",
+    {
+      style: { minHeight: "100vh", display: "flex", flexDirection: "column" },
+      children: [
+        /* @__PURE__ */ e(l, { children: /* @__PURE__ */ i(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              width: "100%",
+              padding: "0 24px"
+            },
+            children: [
+              /* @__PURE__ */ e("strong", { children: "Orion" }),
+              /* @__PURE__ */ i("div", { style: { display: "flex", gap: "24px" }, children: [
+                /* @__PURE__ */ e(t, { variant: "ghost", children: "Features" }),
+                /* @__PURE__ */ e(t, { variant: "ghost", children: "Pricing" }),
+                /* @__PURE__ */ e(t, { variant: "ghost", children: "Docs" }),
+                /* @__PURE__ */ e(t, { variant: "primary", children: "Get Started" })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ i(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              paddingTop: "60px",
+              paddingBottom: "60px"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "h1",
+                {
+                  style: {
+                    fontSize: "48px",
+                    marginBottom: "16px",
+                    fontWeight: "bold"
+                  },
+                  children: "Welcome to Orion Design System"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  style: {
+                    fontSize: "18px",
+                    marginBottom: "32px",
+                    color: "var(--text-secondary)"
+                  },
+                  children: "The AI-first design system for building beautiful, accessible interfaces"
+                }
+              ),
+              /* @__PURE__ */ e(t, { variant: "primary", size: "lg", children: "Start Building" })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ i("div", { style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ e(
+            "h2",
+            {
+              style: {
+                fontSize: "32px",
+                marginBottom: "16px",
+                fontWeight: "bold"
+              },
+              children: "Premium Sections Available"
+            }
+          ),
+          /* @__PURE__ */ i(
+            "p",
+            {
+              style: { marginBottom: "24px", color: "var(--text-secondary)" },
+              children: [
+                "For pre-built marketing and app sections, templates, and advanced components, install ",
+                /* @__PURE__ */ e("strong", { children: "@orion-ds/blocks" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            t,
+            {
+              variant: "secondary",
+              onClick: () => window.open("https://github.com/anthropics/orion", "_blank"),
+              children: "Learn More"
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  ) });
+}
+export {
+  m as LandingPageExample
+};

package/dist/examples/index.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * @orion/react Examples
+ *
+ * Complete, copy-paste ready examples demonstrating how to use
+ * Orion components and sections together.
+ *
+ * @example
+ * ```tsx
+ * import { LandingPageExample } from '@orion/react';
+ *
+ * // Use directly for testing
+ * function App() {
+ *   return <LandingPageExample />;
+ * }
+ *
+ * // Or study the source code to build your own
+ * ```
+ *
+ * @module examples
+ */
+export { LandingPageExample } from './LandingPage.example';
+//# sourceMappingURL=index.d.ts.map

package/dist/examples/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/examples/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/hooks/index.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+/**
+ * Orion React Hooks
+ *
+ * A collection of utility hooks for building React applications.
+ */
+export { useTheme } from './useTheme';
+export type { UseThemeOptions, UseThemeReturn } from './useTheme';
+export { useMediaQuery, useIsMobile, useIsTablet, useIsDesktop, usePrefersDarkMode, usePrefersReducedMotion, } from './useMediaQuery';
+export { useClickOutside, useClickOutsideMultiple } from './useClickOutside';
+export { useDisclosure } from './useDisclosure';
+export type { UseDisclosureOptions, UseDisclosureReturn, } from './useDisclosure';
+export { useDebounce, useDebouncedCallback } from './useDebounce';
+export type { UseDebouncedCallbackOptions } from './useDebounce';
+export { useLocalStorage, useSessionStorage } from './useLocalStorage';
+export type { UseLocalStorageOptions } from './useLocalStorage';
+export { useCopyToClipboard, useCopy } from './useCopyToClipboard';
+export type { UseCopyToClipboardOptions, UseCopyToClipboardReturn, } from './useCopyToClipboard';
+export { useKeyboard, useKeyboardShortcuts } from './useKeyboard';
+export type { KeyModifiers, UseKeyboardOptions, KeyboardShortcuts, } from './useKeyboard';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGlE,OAAO,EACL,aAAa,EACb,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACvE,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACnE,YAAY,EACV,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,eAAe,CAAC"}

package/dist/hooks/useClickOutside.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react");function c(e,n,u=!0){i.useEffect(()=>{if(!u)return;const t=s=>{const r=s.target;!e.current||e.current.contains(r)||n(s)};return document.addEventListener("mousedown",t),document.addEventListener("touchstart",t),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}},[e,n,u])}function d(e,n,u=!0){i.useEffect(()=>{if(!u)return;const t=s=>{const r=s.target;e.some(o=>o.current&&o.current.contains(r))||n(s)};return document.addEventListener("mousedown",t),document.addEventListener("touchstart",t),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("touchstart",t)}},[e,n,u])}exports.useClickOutside=c;exports.useClickOutsideMultiple=d;

package/dist/hooks/useClickOutside.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+/**
+ * Hook to detect clicks outside of a referenced element
+ *
+ * @param ref - React ref to the element to monitor
+ * @param handler - Callback function when click outside is detected
+ * @param enabled - Whether the hook is active (default: true)
+ */
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+/**
+ * Hook to detect clicks outside of multiple elements
+ *
+ * @param refs - Array of React refs to monitor
+ * @param handler - Callback function when click outside all refs is detected
+ * @param enabled - Whether the hook is active (default: true)
+ */
+export declare function useClickOutsideMultiple<T extends HTMLElement = HTMLElement>(refs: RefObject<T | null>[], handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/hooks/useClickOutside.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickOutside.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACjE,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACxB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,EACjD,OAAO,GAAE,OAAc,GACtB,IAAI,CA0BN;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACzE,IAAI,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,EAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,EACjD,OAAO,GAAE,OAAc,GACtB,IAAI,CA2BN"}

package/dist/hooks/useClickOutside.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import { useEffect as c } from "react";
+function m(e, n, o = !0) {
+  c(() => {
+    if (!o)
+      return;
+    const t = (r) => {
+      const u = r.target;
+      !e.current || e.current.contains(u) || n(r);
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
+    };
+  }, [e, n, o]);
+}
+function a(e, n, o = !0) {
+  c(() => {
+    if (!o)
+      return;
+    const t = (r) => {
+      const u = r.target;
+      e.some(
+        (s) => s.current && s.current.contains(u)
+      ) || n(r);
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
+    };
+  }, [e, n, o]);
+}
+export {
+  m as useClickOutside,
+  a as useClickOutsideMultiple
+};

package/dist/hooks/useCopyToClipboard.cjs ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function f(n={}){const{copiedDuration:a=2e3,onSuccess:l,onError:u}=n,[d,c]=r.useState(!1),[y,i]=r.useState(null),[C,o]=r.useState(null),e=r.useRef(null);r.useEffect(()=>()=>{e.current&&clearTimeout(e.current)},[]);const b=r.useCallback(()=>{c(!1),i(null),o(null),e.current&&clearTimeout(e.current)},[]);return{copy:r.useCallback(async s=>{if(e.current&&clearTimeout(e.current),o(null),!navigator?.clipboard){const t=new Error("Clipboard API not available");return o(t),u?.(t),!1}try{return await navigator.clipboard.writeText(s),c(!0),i(s),l?.(s),e.current=setTimeout(()=>{c(!1)},a),!0}catch(t){const p=t instanceof Error?t:new Error("Failed to copy");return o(p),u?.(p),!1}},[a,l,u]),copied:d,copiedText:y,error:C,reset:b}}function T(){const{copy:n}=f();return n}exports.useCopy=T;exports.useCopyToClipboard=f;