@oztix/roadie-components 1.2.0 → 2.0.0

package/dist/_chunks/chunk-ZXR32FYA.js

@@ -0,0 +1,2 @@
+import {cva}from'class-variance-authority';import {cn}from'@oztix/roadie-core/utils';import {jsx}from'react/jsx-runtime';var p=cva(["text-prose text-normal","[&_a]:underline [&_a]:underline-offset-2","[&_ul]:list-disc [&_ul]:pl-6","[&_ol]:list-decimal [&_ol]:pl-6","[&_blockquote]:border-l-[3px] [&_blockquote]:border-normal [&_blockquote]:pl-4 [&_blockquote]:text-subtle","[&_:not(pre)>code]:bg-subtler [&_:not(pre)>code]:rounded-md [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-[0.9em] [&_:not(pre)>code]:font-mono","[&_pre]:bg-sunken [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_pre]:font-mono","[&_img]:rounded-lg","[&_table]:w-full","[&_th]:text-left [&_th]:font-semibold [&_th]:border-b [&_th]:border-subtle","[&_td]:border-b [&_td]:border-subtler","[&_strong]:font-semibold [&_strong]:text-strong"],{variants:{size:{sm:["text-sm","[&>*+*]:mt-2","[&_h1]:text-display-ui-2 [&_h1]:text-strong [&_h1]:mt-4","[&_h2]:text-display-ui-3 [&_h2]:text-strong [&_h2]:mt-4","[&_h3]:text-display-ui-4 [&_h3]:text-strong [&_h3]:mt-3","[&_h4]:text-display-ui-5 [&_h4]:text-strong [&_h4]:mt-3","[&_h5]:text-display-ui-6 [&_h5]:text-strong [&_h5]:mt-2","[&_h6]:text-display-ui-6 [&_h6]:text-strong [&_h6]:mt-2","[&_ul>li+li]:mt-0.5 [&_ol>li+li]:mt-0.5","[&_pre]:p-3 [&_pre]:text-xs","[&_th]:py-1.5 [&_th]:pr-3 [&_td]:py-1.5 [&_td]:pr-3","[&_hr]:my-4"],md:["[&>*+*]:mt-4","[&_h1]:text-display-prose-1 [&_h1]:text-strong [&_h1]:mt-8","[&_h2]:text-display-prose-2 [&_h2]:text-strong [&_h2]:mt-8","[&_h3]:text-display-prose-3 [&_h3]:text-strong [&_h3]:mt-6","[&_h4]:text-display-prose-4 [&_h4]:text-strong [&_h4]:mt-6","[&_h5]:text-display-prose-5 [&_h5]:text-strong [&_h5]:mt-4","[&_h6]:text-display-prose-6 [&_h6]:text-strong [&_h6]:mt-4","[&_ul>li+li]:mt-1 [&_ol>li+li]:mt-1","[&_pre]:p-4 [&_pre]:text-sm","[&_th]:py-2 [&_th]:pr-4 [&_td]:py-2 [&_td]:pr-4","[&_hr]:my-8"],lg:["text-lg","[&>*+*]:mt-6","[&_h1]:text-display-prose-1 [&_h1]:text-strong [&_h1]:mt-12","[&_h2]:text-display-prose-2 [&_h2]:text-strong [&_h2]:mt-10","[&_h3]:text-display-prose-3 [&_h3]:text-strong [&_h3]:mt-8","[&_h4]:text-display-prose-4 [&_h4]:text-strong [&_h4]:mt-6","[&_h5]:text-display-prose-5 [&_h5]:text-strong [&_h5]:mt-6","[&_h6]:text-display-prose-6 [&_h6]:text-strong [&_h6]:mt-4","[&_ul>li+li]:mt-2 [&_ol>li+li]:mt-2","[&_pre]:p-6 [&_pre]:text-sm","[&_th]:py-3 [&_th]:pr-4 [&_td]:py-3 [&_td]:pr-4","[&_hr]:my-12"]}},defaultVariants:{size:"md"}});function l({as:t,className:e,size:o,..._}){return jsx(t||"div",{className:cn(p({size:o,className:e})),..._})}l.displayName="Prose";export{p as a,l as b};//# sourceMappingURL=chunk-ZXR32FYA.js.map
+//# sourceMappingURL=chunk-ZXR32FYA.js.map

package/dist/_chunks/chunk-ZXR32FYA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Prose/index.tsx"],"names":["proseVariants","cva","Prose","as","className","size","props","jsx","cn"],"mappings":"yHAMO,IAAMA,CAAAA,CAAgBC,GAAAA,CAC3B,CACE,wBAAA,CAEA,0CAAA,CAEA,8BAAA,CACA,iCAAA,CAEA,2GAAA,CAEA,8KAAA,CAEA,gFAAA,CAEA,oBAAA,CAEA,kBAAA,CACA,4EAAA,CACA,uCAAA,CAEA,iDACF,CAAA,CACA,CACE,SAAU,CACR,IAAA,CAAM,CACJ,EAAA,CAAI,CACF,SAAA,CACA,cAAA,CACA,yDAAA,CACA,yDAAA,CACA,yDAAA,CACA,yDAAA,CACA,yDAAA,CACA,yDAAA,CACA,yCAAA,CACA,6BAAA,CACA,qDAAA,CACA,aACF,CAAA,CACA,EAAA,CAAI,CACF,cAAA,CACA,4DAAA,CACA,4DAAA,CACA,4DAAA,CACA,4DAAA,CACA,4DAAA,CACA,4DAAA,CACA,qCAAA,CACA,6BAAA,CACA,iDAAA,CACA,aACF,CAAA,CACA,EAAA,CAAI,CACF,SAAA,CACA,cAAA,CACA,6DAAA,CACA,6DAAA,CACA,4DAAA,CACA,4DAAA,CACA,4DAAA,CACA,4DAAA,CACA,qCAAA,CACA,6BAAA,CACA,iDAAA,CACA,cACF,CACF,CACF,CAAA,CACA,eAAA,CAAiB,CACf,IAAA,CAAM,IACR,CACF,CACF,EAYO,SAASC,CAAAA,CAAqC,CACnD,EAAA,CAAAC,CAAAA,CACA,UAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CAAkB,CAEhB,OACEC,GAAAA,CAFgBJ,CAAAA,EAAM,KAAA,CAErB,CAAU,SAAA,CAAWK,EAAAA,CAAGR,CAAAA,CAAc,CAAE,IAAA,CAAAK,CAAAA,CAAM,SAAA,CAAAD,CAAU,CAAC,CAAC,CAAA,CAAI,GAAGE,CAAAA,CAAO,CAE7E,CAEAJ,CAAAA,CAAM,WAAA,CAAc,OAAA","file":"chunk-ZXR32FYA.js","sourcesContent":["import type { ComponentProps, ElementType } from 'react'\n\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@oztix/roadie-core/utils'\n\nexport const proseVariants = cva(\n  [\n    'text-prose text-normal',\n    // Links\n    '[&_a]:underline [&_a]:underline-offset-2',\n    // Lists\n    '[&_ul]:list-disc [&_ul]:pl-6',\n    '[&_ol]:list-decimal [&_ol]:pl-6',\n    // Blockquote\n    '[&_blockquote]:border-l-[3px] [&_blockquote]:border-normal [&_blockquote]:pl-4 [&_blockquote]:text-subtle',\n    // Code\n    '[&_:not(pre)>code]:bg-subtler [&_:not(pre)>code]:rounded-md [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-[0.9em] [&_:not(pre)>code]:font-mono',\n    // Pre\n    '[&_pre]:bg-sunken [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_pre]:font-mono',\n    // Images\n    '[&_img]:rounded-lg',\n    // Tables\n    '[&_table]:w-full',\n    '[&_th]:text-left [&_th]:font-semibold [&_th]:border-b [&_th]:border-subtle',\n    '[&_td]:border-b [&_td]:border-subtler',\n    // Strong/em\n    '[&_strong]:font-semibold [&_strong]:text-strong'\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'text-sm',\n          '[&>*+*]:mt-2',\n          '[&_h1]:text-display-ui-2 [&_h1]:text-strong [&_h1]:mt-4',\n          '[&_h2]:text-display-ui-3 [&_h2]:text-strong [&_h2]:mt-4',\n          '[&_h3]:text-display-ui-4 [&_h3]:text-strong [&_h3]:mt-3',\n          '[&_h4]:text-display-ui-5 [&_h4]:text-strong [&_h4]:mt-3',\n          '[&_h5]:text-display-ui-6 [&_h5]:text-strong [&_h5]:mt-2',\n          '[&_h6]:text-display-ui-6 [&_h6]:text-strong [&_h6]:mt-2',\n          '[&_ul>li+li]:mt-0.5 [&_ol>li+li]:mt-0.5',\n          '[&_pre]:p-3 [&_pre]:text-xs',\n          '[&_th]:py-1.5 [&_th]:pr-3 [&_td]:py-1.5 [&_td]:pr-3',\n          '[&_hr]:my-4'\n        ],\n        md: [\n          '[&>*+*]:mt-4',\n          '[&_h1]:text-display-prose-1 [&_h1]:text-strong [&_h1]:mt-8',\n          '[&_h2]:text-display-prose-2 [&_h2]:text-strong [&_h2]:mt-8',\n          '[&_h3]:text-display-prose-3 [&_h3]:text-strong [&_h3]:mt-6',\n          '[&_h4]:text-display-prose-4 [&_h4]:text-strong [&_h4]:mt-6',\n          '[&_h5]:text-display-prose-5 [&_h5]:text-strong [&_h5]:mt-4',\n          '[&_h6]:text-display-prose-6 [&_h6]:text-strong [&_h6]:mt-4',\n          '[&_ul>li+li]:mt-1 [&_ol>li+li]:mt-1',\n          '[&_pre]:p-4 [&_pre]:text-sm',\n          '[&_th]:py-2 [&_th]:pr-4 [&_td]:py-2 [&_td]:pr-4',\n          '[&_hr]:my-8'\n        ],\n        lg: [\n          'text-lg',\n          '[&>*+*]:mt-6',\n          '[&_h1]:text-display-prose-1 [&_h1]:text-strong [&_h1]:mt-12',\n          '[&_h2]:text-display-prose-2 [&_h2]:text-strong [&_h2]:mt-10',\n          '[&_h3]:text-display-prose-3 [&_h3]:text-strong [&_h3]:mt-8',\n          '[&_h4]:text-display-prose-4 [&_h4]:text-strong [&_h4]:mt-6',\n          '[&_h5]:text-display-prose-5 [&_h5]:text-strong [&_h5]:mt-6',\n          '[&_h6]:text-display-prose-6 [&_h6]:text-strong [&_h6]:mt-4',\n          '[&_ul>li+li]:mt-2 [&_ol>li+li]:mt-2',\n          '[&_pre]:p-6 [&_pre]:text-sm',\n          '[&_th]:py-3 [&_th]:pr-4 [&_td]:py-3 [&_td]:pr-4',\n          '[&_hr]:my-12'\n        ]\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  }\n)\n\nexport type ProseProps<T extends ElementType = 'div'> = {\n  as?: T\n  className?: string\n} & VariantProps<typeof proseVariants> &\n  Omit<ComponentProps<T>, 'as' | 'className' | 'size'>\n\n/**\n * Prose container for long-form/rich content (CMS output, markdown, user HTML).\n * Applies semantic typography styles to nested HTML elements.\n */\nexport function Prose<T extends ElementType = 'div'>({\n  as,\n  className,\n  size,\n  ...props\n}: ProseProps<T>) {\n  const Component = as || 'div'\n  return (\n    <Component className={cn(proseVariants({ size, className }))} {...props} />\n  )\n}\n\nProse.displayName = 'Prose'\n"]}

package/dist/index.d.ts

@@ -1,16 +1,61 @@
-export { Button, ButtonProps, IconButton, IconButtonProps } from './Button.js';
-export { Code, CodeProps } from './Code.js';
-export { Container, ContainerProps } from './Container.js';
-export { Heading, HeadingProps } from './Heading.js';
+export { B as Button, a as ButtonProps, b as buttonVariants } from './Button-DagX1D_q.js';
+export { IconButton, IconButtonProps } from './Button.js';
+export { LinkButton, LinkButtonProps, LinkIconButton, LinkIconButtonProps } from './LinkButton.js';
+export { Code, CodeProps, codeVariants } from './Code.js';
 export { Highlight, HighlightProps } from './Highlight.js';
-export { Mark, MarkProps } from './Mark.js';
-export { ArrowUpRight, ArrowUpRightProps, CowboyHat, CowboyHatProps, Cursor, CursorProps, FlowerSpiral, FlowerSpiralProps, Football, FootballProps, Hand, HandProps, Heart, HeartProps, HighFive, HighFiveProps, MapPin, MapPinProps, NoteMusic, NoteMusicProps, SpotIllustration, SpotIllustrationComponentProps, SpotIllustrationProps, Ticket, TicketProps, WineGlass, WineGlassProps, createSpotIllustration } from './SpotIllustration.js';
-export { Text, TextProps } from './Text.js';
-export { View, ViewProps } from './View.js';
-export { HighlightChunk, UseHighlightProps, useHighlight } from '@ark-ui/react/highlight';
-import '@oztix/roadie-core/jsx';
-import 'react';
-import 'react/jsx-runtime';
-import '@oztix/roadie-core';
-import '@oztix/roadie-core/recipes';
-import '@oztix/roadie-core/types';
+export { Mark, MarkProps, markVariants } from './Mark.js';
+export { Prose, ProseProps, proseVariants } from './Prose.js';
+export { Accordion, AccordionProps, accordionVariants } from './Accordion.js';
+export { Badge, BadgeProps, badgeVariants } from './Badge.js';
+export { Breadcrumb, BreadcrumbSeparatorProps } from './Breadcrumb.js';
+export { Card, CardProps, cardVariants } from './Card.js';
+export { Separator, SeparatorProps, separatorVariants } from './Separator.js';
+export { Marquee, MarqueeProps } from './Marquee.js';
+export { Steps, StepsItemProps, StepsProps, stepsVariants } from './Steps.js';
+export { OptionalIndicator, OptionalIndicatorProps, RequiredIndicator, RequiredIndicatorProps } from './Indicator.js';
+export { Label, LabelProps } from './Label.js';
+export { Input, InputProps, inputVariants } from './Input.js';
+export { Textarea, TextareaProps, textareaVariants } from './Textarea.js';
+export { Field, FieldErrorTextProps, FieldHelperTextProps, FieldLabelProps, FieldProps, useFieldContext, useFieldInputProps } from './Field.js';
+export { Select, SelectContentProps, SelectErrorTextProps, SelectGroupLabelProps, SelectGroupProps, SelectHelperTextProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectRootProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectTriggerVariantProps as SelectTriggerProps, SelectValueProps, selectTriggerVariants } from './Select.js';
+export { Combobox, ComboboxClearProps, ComboboxCollectionProps, ComboboxEmptyProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInputGroupProps, ComboboxInputProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxLabelProps, ComboboxListProps, ComboboxPopupProps, ComboboxPortalProps, ComboboxPositionerProps, ComboboxProps, ComboboxRootProps, ComboboxStatusProps, ComboboxTriggerProps, comboboxInputGroupVariants, useFilter } from './Combobox.js';
+export { Autocomplete, AutocompleteClearProps, AutocompleteCollectionProps, AutocompleteEmptyProps, AutocompleteGroupLabelProps, AutocompleteGroupProps, AutocompleteInputGroupProps, AutocompleteInputProps, AutocompleteItemProps, AutocompleteListProps, AutocompletePopupProps, AutocompletePortalProps, AutocompletePositionerProps, AutocompleteProps, AutocompleteRootProps, AutocompleteStatusProps, AutocompleteTriggerProps, AutocompleteValueProps, autocompleteInputGroupVariants, useFilteredItems } from './Autocomplete.js';
+export { RadioGroup, RadioGroupErrorTextProps, RadioGroupHelperTextProps, RadioGroupItemProps, RadioGroupLabelProps, RadioGroupProps, radioGroupItemVariants, radioGroupVariants } from './RadioGroup.js';
+export { Fieldset, FieldsetErrorTextProps, FieldsetHelperTextProps, FieldsetLegendProps, FieldsetProps } from './Fieldset.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+export { UseStepsProps, UseStepsReturn, useSteps } from '@ark-ui/react/steps';
+export { ComboboxFilter as Filter, ComboboxFilterOptions as FilterOptions } from '@base-ui/react/combobox';
+export { getThemeScript } from '@oztix/roadie-core/theme';
+import 'class-variance-authority/types';
+import '@base-ui/react/button';
+import 'class-variance-authority';
+import '@base-ui/react/select';
+import '@base-ui/react/autocomplete';
+import '@base-ui/react/radio';
+import '@base-ui/react/radio-group';
+
+interface ThemeContextType {
+    accentColor: string;
+    setAccentColor: (color: string) => void;
+    isDark: boolean;
+    setDark: (dark: boolean) => void;
+}
+interface ThemeProviderProps {
+    children: react.ReactNode;
+    defaultAccentColor?: string;
+    /** Initial dark mode state when no stored preference exists (default: false) */
+    defaultDark?: boolean;
+    /** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */
+    followSystem?: boolean;
+}
+/**
+ * Generate a <style> tag string for server-side rendering.
+ * Sets --accent-hue and --accent-chroma for CSS-native theming,
+ * plus hex fallbacks for older browsers.
+ */
+declare function getAccentStyleTag(accentHex: string, id?: string): Promise<string>;
+declare function ThemeProvider({ children, defaultAccentColor, defaultDark, followSystem }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextType;
+
+export { ThemeProvider, type ThemeProviderProps, getAccentStyleTag, useTheme };

package/dist/index.js

@@ -1,2 +1,35 @@
-export{c as ArrowUpRight,d as CowboyHat,e as Cursor,f as FlowerSpiral,g as Football,h as Hand,i as Heart,j as HighFive,k as MapPin,l as NoteMusic,a as SpotIllustration,m as Ticket,n as WineGlass,b as createSpotIllustration}from'./_chunks/chunk-SUDUTP6A.js';export{a as Text}from'./_chunks/chunk-ZXS7U3VJ.js';export{a as View}from'./_chunks/chunk-RJEJUZ3O.js';export{a as Button,b as IconButton}from'./_chunks/chunk-NMGF2AP6.js';export{a as Code}from'./_chunks/chunk-P5L5LN6E.js';export{a as Container}from'./_chunks/chunk-JOQJCXYF.js';export{a as Heading}from'./_chunks/chunk-YNF56IUK.js';export{a as Highlight,b as useHighlight}from'./_chunks/chunk-AZZHYO2A.js';export{a as Mark}from'./_chunks/chunk-OH4JYS35.js';//# sourceMappingURL=index.js.map
+export{a as Marquee}from'./_chunks/chunk-FQNVMKKV.js';export{b as Prose,a as proseVariants}from'./_chunks/chunk-ZXR32FYA.js';export{c as RadioGroup,b as radioGroupItemVariants,a as radioGroupVariants}from'./_chunks/chunk-3NU36NBL.js';export{t as Select,a as selectTriggerVariants}from'./_chunks/chunk-RXMWFJ6W.js';export{b as Separator,a as separatorVariants}from'./_chunks/chunk-JGTZ3GCR.js';export{c as Steps,b as stepsVariants,a as useSteps}from'./_chunks/chunk-2MBFDJ6K.js';export{t as Combobox,b as comboboxInputGroupVariants,a as useFilter}from'./_chunks/chunk-FSO4EAAY.js';export{a as Fieldset}from'./_chunks/chunk-42UB7PQB.js';export{a as Highlight}from'./_chunks/chunk-JBHYUOI2.js';export{b as Mark,a as markVariants}from'./_chunks/chunk-WOU2B425.js';export{a as LinkButton,b as LinkIconButton}from'./_chunks/chunk-A6JSYXKN.js';export{b as Accordion,a as accordionVariants}from'./_chunks/chunk-MDRAL676.js';export{t as Autocomplete,c as autocompleteInputGroupVariants,b as useFilteredItems}from'./_chunks/chunk-Y6TDYPCZ.js';export{c as Field,a as useFieldContext,b as useFieldInputProps}from'./_chunks/chunk-N2HGY7W7.js';export{b as Textarea,a as textareaVariants}from'./_chunks/chunk-OIAETOZT.js';export{b as OptionalIndicator,a as RequiredIndicator}from'./_chunks/chunk-LMV3JECI.js';export{b as Input,a as inputVariants}from'./_chunks/chunk-VSKUGXQG.js';export{a as Label}from'./_chunks/chunk-IEDKSZAQ.js';export{b as Badge,a as badgeVariants}from'./_chunks/chunk-AFSDN4WI.js';export{a as Breadcrumb}from'./_chunks/chunk-EKOEXSAP.js';export{a as IconButton}from'./_chunks/chunk-M4FEKBLW.js';export{b as Button,a as buttonVariants}from'./_chunks/chunk-3HWPLULJ.js';export{b as Card,a as cardVariants}from'./_chunks/chunk-LHNOY24C.js';export{b as Code,a as codeVariants}from'./_chunks/chunk-DRVUAPKN.js';import'./_chunks/chunk-4LGCF3SN.js';import*as t from'react';import {generateAccentScale,generateNeutralScale,getOklchHue,getOklchChroma}from'@oztix/roadie-core/colors';export{getThemeScript}from'@oztix/roadie-core/theme';import {jsx}from'react/jsx-runtime';var Ae="#0091EB",A="theme",$e=typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("color","oklch(0 0 0)"),$=t.createContext(void 0);async function Ee(o,y="roadie-accent-theme"){let u=await generateAccentScale(o),l=await generateNeutralScale(o),a=Math.round(await getOklchHue(o)),P=+(await getOklchChroma(o)).toFixed(4),m=u.light.map((e,p)=>`--color-accent-${p}: ${e};`).join(`
+    `),s=u.dark.map((e,p)=>`--color-accent-${p}: ${e};`).join(`
+    `),d=l.light.map((e,p)=>`--color-neutral-${p}: ${e};`).join(`
+    `),x=l.dark.map((e,p)=>`--color-neutral-${p}: ${e};`).join(`
+    `);return `<style id="${y.replace(/[<>"&]/g,"")}">
+  :root {
+    --accent-hue: ${a};
+    --accent-chroma: ${P};
+    ${d}
+    ${m}
+  }
+  .dark {
+    ${x}
+    ${s}
+  }
+</style>`}function h(o){document.documentElement.classList.toggle("dark",o),document.documentElement.style.colorScheme=o?"dark":"light";}function S(){try{return localStorage.getItem(A)}catch{return null}}function Ve(o){try{localStorage.setItem(A,o?"dark":"light");}catch{}}function Re({children:o,defaultAccentColor:y=Ae,defaultDark:u=false,followSystem:l=false}){let[a,P]=t.useState(y),[m,s]=t.useState(u);t.useEffect(()=>{let r=S();if(r){s(r==="dark");return}if(l){let e=window.matchMedia("(prefers-color-scheme: dark)").matches;s(e),h(e);}else {let e=document.documentElement.classList.contains("dark");s(e);}},[]),t.useEffect(()=>{if(!l)return;let r=window.matchMedia("(prefers-color-scheme: dark)"),e=p=>{S()||(s(p.matches),h(p.matches));};return r.addEventListener("change",e),()=>r.removeEventListener("change",e)},[l]);let d=t.useCallback(r=>{s(r),h(r),Ve(r);},[]);t.useEffect(()=>{let r=false;async function e(){let p=Math.round(await getOklchHue(a)),E=+(await getOklchChroma(a)).toFixed(4);if(r||document.getElementById("roadie-accent-theme")?.textContent?.includes(`--accent-hue: ${p}`))return;let f;if($e)f=`
+          :root {
+            --accent-hue: ${p};
+            --accent-chroma: ${E};
+          }
+        `;else {let b=await generateAccentScale(a),g=await generateNeutralScale(a);if(r)return;let V=b.light.map((n,c)=>`--color-accent-${c}: ${n};`).join(`
+`),R=b.dark.map((n,c)=>`--color-accent-${c}: ${n};`).join(`
+`),L=g.light.map((n,c)=>`--color-neutral-${c}: ${n};`).join(`
+`),F=g.dark.map((n,c)=>`--color-neutral-${c}: ${n};`).join(`
+`);f=`
+          :root {
+            ${L}
+            ${V}
+          }
+          .dark {
+            ${F}
+            ${R}
+          }
+        `;}let i=document.getElementById("roadie-accent-theme");i||(i=document.createElement("style"),i.id="roadie-accent-theme",document.head.appendChild(i)),i.textContent=f;}return e(),()=>{r=true;}},[a]);let x=t.useMemo(()=>({accentColor:a,setAccentColor:P,isDark:m,setDark:d}),[a,m,d]);return jsx($.Provider,{value:x,children:o})}function Le(){let o=t.useContext($);if(!o)throw new Error("useTheme must be used within a ThemeProvider");return o}export{Re as ThemeProvider,Ee as getAccentStyleTag,Le as useTheme};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../src/providers/ThemeProvider.tsx"],"names":["DEFAULT_ACCENT","THEME_STORAGE_KEY","supportsOklch","ThemeContext","getAccentStyleTag","accentHex","id","result","generateAccentScale","neutral","generateNeutralScale","hue","getOklchHue","chroma","getOklchChroma","accentVars","hex","i","darkAccentVars","neutralVars","darkNeutralVars","applyDark","dark","getStoredTheme","storeTheme","ThemeProvider","children","defaultAccentColor","defaultDark","followSystem","accentColor","setAccentColor","isDark","setIsDarkState","stored","prefersDark","domDark","mq","handler","e","setDark","cancelled","updateAccent","css","style","value","jsx","useTheme","context"],"mappings":"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","file":"index.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n  generateAccentScale,\n  generateNeutralScale,\n  getOklchChroma,\n  getOklchHue\n} from '@oztix/roadie-core/colors'\n\nexport { getThemeScript } from '@oztix/roadie-core/theme'\n\nconst DEFAULT_ACCENT = '#0091EB' // Oztix Blue\nconst THEME_STORAGE_KEY = 'theme'\n\nconst supportsOklch =\n  typeof CSS !== 'undefined' &&\n  typeof CSS.supports === 'function' &&\n  CSS.supports('color', 'oklch(0 0 0)')\n\n// ---------------------------------------------------------------------------\n// Theme context (accent color + dark mode)\n// ---------------------------------------------------------------------------\n\ninterface ThemeContextType {\n  accentColor: string\n  setAccentColor: (color: string) => void\n  isDark: boolean\n  setDark: (dark: boolean) => void\n}\n\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(\n  undefined\n)\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode\n  defaultAccentColor?: string\n  /** Initial dark mode state when no stored preference exists (default: false) */\n  defaultDark?: boolean\n  /** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */\n  followSystem?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// SSR helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Generate a <style> tag string for server-side rendering.\n * Sets --accent-hue and --accent-chroma for CSS-native theming,\n * plus hex fallbacks for older browsers.\n */\nexport async function getAccentStyleTag(\n  accentHex: string,\n  id = 'roadie-accent-theme'\n): Promise<string> {\n  const result = await generateAccentScale(accentHex)\n  const neutral = await generateNeutralScale(accentHex)\n  const hue = Math.round(await getOklchHue(accentHex))\n  const chroma = +(await getOklchChroma(accentHex)).toFixed(4)\n\n  // Hex fallbacks for accent (non-oklch browsers)\n  const accentVars = result.light\n    .map((hex, i) => `--color-accent-${i}: ${hex};`)\n    .join('\\n    ')\n  const darkAccentVars = result.dark\n    .map((hex, i) => `--color-accent-${i}: ${hex};`)\n    .join('\\n    ')\n  // Hex fallbacks for neutral (non-oklch browsers)\n  const neutralVars = neutral.light\n    .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n    .join('\\n    ')\n  const darkNeutralVars = neutral.dark\n    .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n    .join('\\n    ')\n\n  const safeId = id.replace(/[<>\"&]/g, '')\n  return `<style id=\"${safeId}\">\n  :root {\n    --accent-hue: ${hue};\n    --accent-chroma: ${chroma};\n    ${neutralVars}\n    ${accentVars}\n  }\n  .dark {\n    ${darkNeutralVars}\n    ${darkAccentVars}\n  }\n</style>`\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode helpers\n// ---------------------------------------------------------------------------\n\nfunction applyDark(dark: boolean) {\n  document.documentElement.classList.toggle('dark', dark)\n  document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): string | null {\n  try {\n    return localStorage.getItem(THEME_STORAGE_KEY)\n  } catch {\n    return null\n  }\n}\n\nfunction storeTheme(dark: boolean) {\n  try {\n    localStorage.setItem(THEME_STORAGE_KEY, dark ? 'dark' : 'light')\n  } catch {\n    // localStorage unavailable\n  }\n}\n\n// ---------------------------------------------------------------------------\n// ThemeProvider\n// ---------------------------------------------------------------------------\n\nexport function ThemeProvider({\n  children,\n  defaultAccentColor = DEFAULT_ACCENT,\n  defaultDark = false,\n  followSystem = false\n}: ThemeProviderProps) {\n  const [accentColor, setAccentColor] = React.useState(defaultAccentColor)\n\n  // Initialise dark mode from prop — inline script may have already set .dark\n  const [isDark, setIsDarkState] = React.useState(defaultDark)\n\n  // Sync with DOM on mount\n  React.useEffect(() => {\n    const stored = getStoredTheme()\n    if (stored) {\n      setIsDarkState(stored === 'dark')\n      return\n    }\n\n    // No stored preference — check OS preference or DOM state\n    if (followSystem) {\n      const prefersDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches\n      setIsDarkState(prefersDark)\n      applyDark(prefersDark)\n    } else {\n      const domDark = document.documentElement.classList.contains('dark')\n      setIsDarkState(domDark)\n    }\n  }, []) // mount-only: followSystem/defaultDark are expected to be static\n\n  // Listen for OS preference changes when followSystem is true\n  React.useEffect(() => {\n    if (!followSystem) return\n\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\n    const handler = (e: MediaQueryListEvent) => {\n      // Only follow system if user hasn't explicitly chosen\n      if (getStoredTheme()) return\n      setIsDarkState(e.matches)\n      applyDark(e.matches)\n    }\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [followSystem])\n\n  // Explicit toggle — persists to localStorage and applies to DOM\n  const setDark = React.useCallback((dark: boolean) => {\n    setIsDarkState(dark)\n    applyDark(dark)\n    storeTheme(dark)\n  }, [])\n\n  // Accent color effect — skip if SSR already injected matching values\n  React.useEffect(() => {\n    let cancelled = false\n\n    async function updateAccent() {\n      const hue = Math.round(await getOklchHue(accentColor))\n      const chroma = +(await getOklchChroma(accentColor)).toFixed(4)\n\n      if (cancelled) return\n\n      // Skip regeneration if existing style tag already has matching values\n      const existing = document.getElementById('roadie-accent-theme')\n      if (existing?.textContent?.includes(`--accent-hue: ${hue}`)) {\n        return\n      }\n\n      let css: string\n\n      if (supportsOklch) {\n        css = `\n          :root {\n            --accent-hue: ${hue};\n            --accent-chroma: ${chroma};\n          }\n        `\n      } else {\n        const result = await generateAccentScale(accentColor)\n        const neutral = await generateNeutralScale(accentColor)\n\n        if (cancelled) return\n\n        const accentVars = result.light\n          .map((hex, i) => `--color-accent-${i}: ${hex};`)\n          .join('\\n')\n        const darkAccentVars = result.dark\n          .map((hex, i) => `--color-accent-${i}: ${hex};`)\n          .join('\\n')\n        const neutralVars = neutral.light\n          .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n          .join('\\n')\n        const darkNeutralVars = neutral.dark\n          .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n          .join('\\n')\n\n        css = `\n          :root {\n            ${neutralVars}\n            ${accentVars}\n          }\n          .dark {\n            ${darkNeutralVars}\n            ${darkAccentVars}\n          }\n        `\n      }\n\n      let style = document.getElementById('roadie-accent-theme')\n      if (!style) {\n        style = document.createElement('style')\n        style.id = 'roadie-accent-theme'\n        document.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n\n    updateAccent()\n    return () => {\n      cancelled = true\n    }\n  }, [accentColor])\n\n  const value = React.useMemo(\n    () => ({ accentColor, setAccentColor, isDark, setDark }),\n    [accentColor, isDark, setDark]\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\nexport function useTheme() {\n  const context = React.useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider')\n  }\n  return context\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "1.2.0",
-  "description": "The components for Roadie Design System at Oztix",
+  "version": "2.0.0",
+  "description": "React components for the Roadie Design System",
   "type": "module",
   "repository": {
     "type": "git",
@@ -13,42 +13,35 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.js",
-      "require": "./dist/hooks/index.js"
+      "import": "./dist/index.js"
     },
     "./spot-illustrations": {
       "types": "./dist/SpotIllustration.d.ts",
-      "import": "./dist/SpotIllustration.js",
-      "require": "./dist/SpotIllustration.js"
-    },
-    "./src/*": {
-      "types": "./src/*",
-      "import": "./src/*"
+      "import": "./dist/SpotIllustration.js"
     }
   },
   "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
+    "@ark-ui/react": "^5.0.0",
+    "@phosphor-icons/react": "^2.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@ark-ui/react": "5.26.2",
-    "@oztix/roadie-core": "1.2.0"
+    "@base-ui/react": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "@oztix/roadie-core": "2.0.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "1.4.3",
+    "@ark-ui/react": "5.35.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "@size-limit/preset-small-lib": "12.0.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -59,6 +52,7 @@
     "@vitest/coverage-v8": "4.0.4",
     "@vitest/ui": "4.0.4",
     "jsdom": "27.0.1",
+    "size-limit": "12.0.1",
     "svgo": "4.0.0",
     "tsup": "8.5.0",
     "vitest": "4.0.4"
@@ -82,7 +76,7 @@
     "build": "tsup",
     "build:spotillustration": "node scripts/svg-to-spot-illustration.cjs",
     "clean": "rm -rf node_modules dist",
-    "dev": "node scripts/svg-to-spot-illustration.cjs --watch & tsup --watch",
+    "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -91,6 +85,8 @@
     "format:check": "prettier --ignore-path ../../.prettierignore --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "size": "size-limit",
+    "size:check": "size-limit --limit"
   }
 }

package/dist/Container.d.ts

@@ -1,34 +0,0 @@
-import * as _oztix_roadie_core_jsx from '@oztix/roadie-core/jsx';
-import { Container as Container$1 } from '@oztix/roadie-core/jsx';
-
-/**
- * A foundational layout component that provides a centered container with responsive padding
- * and a constrained max-width by default. Perfect for page layouts and content sections.
- *
- * By default, Container has:
- * - Centered content with `mx: auto`
- * - Responsive horizontal padding (300 on mobile, 400 on tablet, 600 on desktop)
- * - Max-width constraint of 7xl (80rem)
- *
- * @example
- * ```tsx
- * // Basic usage - constrained width by default
- * <Container>
- *   <h1>Page Title</h1>
- *   <p>Content with readable max-width</p>
- * </Container>
- * ```
- *
- * @example
- * ```tsx
- * // Full-width container
- * <Container contain={false}>
- *   <h1>Hero Section</h1>
- *   <p>This content spans the full width</p>
- * </Container>
- * ```
- */
-declare const Container: FunctionComponent<_oztix_roadie_core_jsx.ContainerProps>;
-type ContainerProps = React.ComponentProps<typeof Container$1>;
-
-export { Container, type ContainerProps };

package/dist/Container.js

@@ -1,2 +0,0 @@
-export{a as Container}from'./_chunks/chunk-JOQJCXYF.js';//# sourceMappingURL=Container.js.map
-//# sourceMappingURL=Container.js.map

package/dist/Container.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Container.js"}

package/dist/Heading.d.ts

@@ -1,45 +0,0 @@
-import * as _oztix_roadie_core_types from '@oztix/roadie-core/types';
-import { JsxStyleProps } from '@oztix/roadie-core/types';
-import { ReactNode } from 'react';
-import { ColorPalette } from '@oztix/roadie-core';
-import { HTMLStyledProps } from '@oztix/roadie-core/jsx';
-import { HeadingVariantProps } from '@oztix/roadie-core/recipes';
-
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
-type HeadingStyle = Extract<JsxStyleProps['textStyle'], `display.${string}`>;
-/**
- * A heading component that uses display styles for titles and section headers
- */
-interface HeadingProps extends HTMLStyledProps<'h2'> {
-    /**
-     * The heading element to render
-     * @default 'h2'
-     */
-    as?: HeadingElement;
-    /**
-     * The text style to use for the heading
-     * @default 'display.ui'
-     */
-    textStyle?: HeadingStyle;
-    /**
-     * The color palette to use for the heading
-     * @default 'neutral'
-     */
-    colorPalette?: ColorPalette;
-    /**
-     * Set a sepecific empahasis level for differen fonts like subtitles
-     * @default 'default'
-     */
-    emphasis?: HeadingVariantProps['emphasis'];
-    /**
-     * The content to display
-     */
-    children?: ReactNode;
-}
-declare const Heading: _oztix_roadie_core_types.StyledComponent<any, {
-    [x: string]: unknown;
-    [x: number]: unknown;
-    emphasis?: unknown;
-}>;
-
-export { Heading, type HeadingProps };

package/dist/Heading.js

@@ -1,2 +0,0 @@
-export{a as Heading}from'./_chunks/chunk-YNF56IUK.js';//# sourceMappingURL=Heading.js.map
-//# sourceMappingURL=Heading.js.map

package/dist/Heading.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Heading.js"}

package/dist/Text.d.ts

@@ -1,47 +0,0 @@
-import * as _oztix_roadie_core_jsx from '@oztix/roadie-core/jsx';
-import { HTMLStyledProps } from '@oztix/roadie-core/jsx';
-import { ReactNode } from 'react';
-import { ColorPalette } from '@oztix/roadie-core';
-import { TextVariantProps } from '@oztix/roadie-core/recipes';
-
-/**
- * Text component for displaying content with various styling options
- */
-interface TextProps extends HTMLStyledProps<'p'> {
-    /**
-     * The visual emphasis of the text
-     * @default 'default'
-     */
-    emphasis?: TextVariantProps['emphasis'];
-    /**
-     * Whether the text is interactive
-     * @default false
-     */
-    interactive?: TextVariantProps['interactive'];
-    /**
-     * The HTML element to render the text as
-     * @default 'p'
-     */
-    as?: HTMLStyledProps<'p'>['as'];
-    /**
-     * The color palette to use for the text
-     * @default 'neutral'
-     */
-    colorPalette?: ColorPalette;
-    /**
-     * When true, the component will pass props to its child component
-     */
-    asChild?: boolean;
-    /**
-     * The content to display
-     */
-    children?: ReactNode;
-}
-declare const Text: _oztix_roadie_core_jsx.StyledComponent<any, {
-    [x: string]: unknown;
-    [x: number]: unknown;
-    emphasis?: unknown;
-    interactive?: unknown;
-}>;
-
-export { Text, type TextProps };

package/dist/Text.js

@@ -1,2 +0,0 @@
-export{a as Text}from'./_chunks/chunk-ZXS7U3VJ.js';//# sourceMappingURL=Text.js.map
-//# sourceMappingURL=Text.js.map

package/dist/Text.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Text.js"}

package/dist/View.d.ts

@@ -1,12 +0,0 @@
-import * as _oztix_roadie_core_jsx from '@oztix/roadie-core/jsx';
-import { View as View$1 } from '@oztix/roadie-core/jsx';
-
-/**
- * A foundational layout component that provides a flexible container with sensible defaults.
- * Based on the Panda CSS Box pattern but with better defaults for application UI layout.
- *
- */
-declare const View: FunctionComponent<_oztix_roadie_core_jsx.ViewProps>;
-type ViewProps = React.ComponentProps<typeof View$1>;
-
-export { View, type ViewProps };

package/dist/View.js

@@ -1,2 +0,0 @@
-export{a as View}from'./_chunks/chunk-RJEJUZ3O.js';//# sourceMappingURL=View.js.map
-//# sourceMappingURL=View.js.map

package/dist/View.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"View.js"}

package/dist/_chunks/chunk-AZZHYO2A.js

@@ -1,3 +0,0 @@
-"use client";
-import {a}from'./chunk-OH4JYS35.js';import {Fragment as Fragment$1}from'react';import {useHighlight}from'@ark-ui/react/highlight';export{useHighlight as b}from'@ark-ui/react/highlight';import {jsx,Fragment}from'react/jsx-runtime';var f=({text:o,query:t,exactMatch:g=false,ignoreCase:h=true,matchAll:m=true,colorPalette:s="information",...p})=>{if(!t||Array.isArray(t)&&t.length===0||t==="")return jsx(Fragment,{children:o});let n=useHighlight({query:t,text:o,exactMatch:g,ignoreCase:h,matchAll:m});return jsx(Fragment,{children:n.map((r,i)=>r.match?jsx(a,{colorPalette:s,...p,children:r.text},i):jsx(Fragment$1,{children:r.text},i))})};f.displayName="Highlight";export{f as a};//# sourceMappingURL=chunk-AZZHYO2A.js.map
-//# sourceMappingURL=chunk-AZZHYO2A.js.map

package/dist/_chunks/chunk-AZZHYO2A.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Highlight/index.tsx"],"names":["Highlight","text","query","exactMatch","ignoreCase","matchAll","colorPalette","props","jsx","Fragment","chunks","useHighlight","chunk","index","Mark"],"mappings":"sOAuDO,IAAMA,CAAAA,CAAY,CAAC,CACxB,IAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,MACb,UAAA,CAAAC,CAAAA,CAAa,IAAA,CACb,QAAA,CAAAC,CAAAA,CAAW,IAAA,CACX,aAAAC,CAAAA,CAAe,aAAA,CACf,GAAGC,CACL,CAAA,GAAoC,CAKlC,GAFE,CAACL,CAAAA,EAAU,KAAA,CAAM,OAAA,CAAQA,CAAK,CAAA,EAAKA,CAAAA,CAAM,MAAA,GAAW,CAAA,EAAMA,CAAAA,GAAU,EAAA,CAGpE,OAAOM,GAAAA,CAAAC,QAAAA,CAAA,CAAG,QAAA,CAAAR,CAAAA,CAAK,CAAA,CAGjB,IAAMS,CAAAA,CAASC,YAAAA,CAAa,CAC1B,KAAA,CAAAT,CAAAA,CACA,IAAA,CAAAD,CAAAA,CACA,UAAA,CAAAE,CAAAA,CACA,WAAAC,CAAAA,CACA,QAAA,CAAAC,CACF,CAAC,CAAA,CAED,OACEG,GAAAA,CAAAC,QAAAA,CAAA,CACG,QAAA,CAAAC,CAAAA,CAAO,GAAA,CAAI,CAACE,CAAAA,CAAOC,IAClBD,CAAAA,CAAM,KAAA,CACJJ,GAAAA,CAACM,CAAAA,CAAA,CAAiB,YAAA,CAAcR,EAAe,GAAGC,CAAAA,CAC/C,QAAA,CAAAK,CAAAA,CAAM,IAAA,CAAA,CADEC,CAEX,EAEAL,GAAAA,CAACC,UAAAA,CAAA,CAAsB,QAAA,CAAAG,CAAAA,CAAM,IAAA,CAAA,CAAdC,CAAmB,CAEtC,CAAA,CACF,CAEJ,EAEAb,CAAAA,CAAU,WAAA,CAAc,WAAA","file":"chunk-AZZHYO2A.js","sourcesContent":["'use client'\n\nimport { Fragment, type ReactElement } from 'react'\n\nimport { useHighlight } from '@ark-ui/react/highlight'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\n\nimport { Mark } from '../Mark'\n\n// Re-export Ark UI types and hook for advanced use cases\nexport { useHighlight } from '@ark-ui/react/highlight'\nexport type { HighlightChunk, UseHighlightProps } from '@ark-ui/react/highlight'\n\n/**\n * Highlight component for highlighting substrings within text\n */\nexport interface HighlightProps\n  extends Omit<HTMLStyledProps<'mark'>, 'children'> {\n  /**\n   * The text content to display and potentially highlight\n   */\n  text: string\n\n  /**\n   * The query string(s) to highlight within the text\n   */\n  query: string | string[]\n\n  /**\n   * Whether to match whole words only\n   * @default false\n   */\n  exactMatch?: boolean\n\n  /**\n   * Whether to ignore case while matching\n   * @default true\n   */\n  ignoreCase?: boolean\n\n  /**\n   * Whether to match multiple instances of the query\n   * @default true\n   */\n  matchAll?: boolean\n\n  /**\n   * The color palette to use for the highlight\n   * @default 'information'\n   */\n  colorPalette?: ColorPalette\n}\n\nexport const Highlight = ({\n  text,\n  query,\n  exactMatch = false,\n  ignoreCase = true,\n  matchAll = true,\n  colorPalette = 'information',\n  ...props\n}: HighlightProps): ReactElement => {\n  // Fast path: if query is empty, just return the text\n  const isQueryEmpty =\n    !query || (Array.isArray(query) && query.length === 0) || query === ''\n\n  if (isQueryEmpty) {\n    return <>{text}</>\n  }\n\n  const chunks = useHighlight({\n    query,\n    text,\n    exactMatch,\n    ignoreCase,\n    matchAll\n  })\n\n  return (\n    <>\n      {chunks.map((chunk, index) =>\n        chunk.match ? (\n          <Mark key={index} colorPalette={colorPalette} {...props}>\n            {chunk.text}\n          </Mark>\n        ) : (\n          <Fragment key={index}>{chunk.text}</Fragment>\n        )\n      )}\n    </>\n  )\n}\n\nHighlight.displayName = 'Highlight'\n"]}

package/dist/_chunks/chunk-JOQJCXYF.js

@@ -1,2 +0,0 @@
-import {Container}from'@oztix/roadie-core/jsx';var n=Container;n.displayName="Container";export{n as a};//# sourceMappingURL=chunk-JOQJCXYF.js.map
-//# sourceMappingURL=chunk-JOQJCXYF.js.map

package/dist/_chunks/chunk-JOQJCXYF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Container/index.tsx"],"names":["Container","ContainerPattern"],"mappings":"mDA6BaA,CAAAA,CAAYC,UAIzBD,EAAU,WAAA,CAAc,WAAA","file":"chunk-JOQJCXYF.js","sourcesContent":["import { Container as ContainerPattern } from '@oztix/roadie-core/jsx'\n\n/**\n * A foundational layout component that provides a centered container with responsive padding\n * and a constrained max-width by default. Perfect for page layouts and content sections.\n *\n * By default, Container has:\n * - Centered content with `mx: auto`\n * - Responsive horizontal padding (300 on mobile, 400 on tablet, 600 on desktop)\n * - Max-width constraint of 7xl (80rem)\n *\n * @example\n * ```tsx\n * // Basic usage - constrained width by default\n * <Container>\n *   <h1>Page Title</h1>\n *   <p>Content with readable max-width</p>\n * </Container>\n * ```\n *\n * @example\n * ```tsx\n * // Full-width container\n * <Container contain={false}>\n *   <h1>Hero Section</h1>\n *   <p>This content spans the full width</p>\n * </Container>\n * ```\n */\nexport const Container = ContainerPattern\n\nexport type ContainerProps = React.ComponentProps<typeof ContainerPattern>\n\nContainer.displayName = 'Container'\n"]}

package/dist/_chunks/chunk-NMGF2AP6.js

@@ -1,2 +0,0 @@
-import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {button}from'@oztix/roadie-core/recipes';import {jsx}from'react/jsx-runtime';var o=styled(ark.button,button);o.displayName="Button";var e=t=>jsx(o,{px:"0",py:"0",_icon:{fontSize:"1.2em"},...t});e.displayName="IconButton";export{o as a,e as b};//# sourceMappingURL=chunk-NMGF2AP6.js.map
-//# sourceMappingURL=chunk-NMGF2AP6.js.map

package/dist/_chunks/chunk-NMGF2AP6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Button/Button.tsx","../../src/components/Button/IconButton.tsx"],"names":["Button","styled","ark","button","IconButton","props","jsx"],"mappings":"wKAOO,IAAMA,EAASC,MAAAA,CAAOC,GAAAA,CAAI,OAAQC,MAAM,EAE/CH,EAAO,WAAA,CAAc,QAAA,KCARI,CAAAA,CAAcC,CAAAA,EAClBC,IAACN,CAAAA,CAAA,CAAO,GAAG,GAAA,CAAI,EAAA,CAAG,IAAI,KAAA,CAAO,CAAE,SAAU,OAAQ,CAAA,CAAI,GAAGK,CAAAA,CAAO,EAGxED,EAAW,WAAA,CAAc,YAAA","file":"chunk-NMGF2AP6.js","sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport { styled } from '@oztix/roadie-core/jsx'\nimport { button } from '@oztix/roadie-core/recipes'\n\nexport const Button = styled(ark.button, button)\n\nButton.displayName = 'Button'\n\nexport type ButtonProps = ComponentProps<typeof Button>\n","import type { ComponentProps } from 'react'\n\nimport { Button } from './Button'\n\nexport interface IconButtonProps\n  extends Omit<ComponentProps<typeof Button>, 'aria-label'> {\n  'aria-label': string\n}\n\nexport const IconButton = (props: IconButtonProps) => {\n  return <Button px='0' py='0' _icon={{ fontSize: '1.2em' }} {...props} />\n}\n\nIconButton.displayName = 'IconButton'\n"]}

package/dist/_chunks/chunk-OH4JYS35.js

@@ -1,3 +0,0 @@
-"use client";
-import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {mark}from'@oztix/roadie-core/recipes';var t=styled(ark.mark,mark);t.displayName="Mark";export{t as a};//# sourceMappingURL=chunk-OH4JYS35.js.map
-//# sourceMappingURL=chunk-OH4JYS35.js.map

package/dist/_chunks/chunk-OH4JYS35.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Mark/index.tsx"],"names":["Mark","styled","ark","mark"],"mappings":"kIA8BO,IAAMA,EAAOC,MAAAA,CAAOC,GAAAA,CAAI,KAAMC,IAAI,EAEzCH,EAAK,WAAA,CAAc,MAAA","file":"chunk-OH4JYS35.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { mark } from '@oztix/roadie-core/recipes'\n\n/**\n * Mark component for highlighting text content\n */\nexport interface MarkProps extends HTMLStyledProps<'mark'> {\n  /**\n   * The color palette to use for the mark\n   * @default 'information'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * When true, the component will pass props to its child component\n   */\n  asChild?: boolean\n\n  /**\n   * The content to mark\n   */\n  children?: ReactNode\n}\n\nexport const Mark = styled(ark.mark, mark)\n\nMark.displayName = 'Mark'\n"]}

package/dist/_chunks/chunk-P5L5LN6E.js

@@ -1,2 +0,0 @@
-import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {code}from'@oztix/roadie-core/recipes';var t=styled(ark.code,code);t.displayName="Code";export{t as a};//# sourceMappingURL=chunk-P5L5LN6E.js.map
-//# sourceMappingURL=chunk-P5L5LN6E.js.map

package/dist/_chunks/chunk-P5L5LN6E.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Code/index.tsx"],"names":["Code","styled","ark","code"],"mappings":"kIA+BO,IAAMA,EAAOC,MAAAA,CAClBC,GAAAA,CAAI,KACJC,IACF,EAEAH,EAAK,WAAA,CAAc,MAAA","file":"chunk-P5L5LN6E.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type CodeVariantProps, code } from '@oztix/roadie-core/recipes'\n\n/**\n * A code component that inherits from Text and renders as a code element\n */\nexport interface CodeProps extends HTMLStyledProps<'code'> {\n  /**\n   * The appearance of the code block\n   * @default 'default'\n   */\n  emphasis?: CodeVariantProps['emphasis']\n\n  /**\n   * The color palette to use for the code\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Code = styled(\n  ark.code,\n  code\n) as React.ForwardRefExoticComponent<CodeProps>\n\nCode.displayName = 'Code'\n"]}

package/dist/_chunks/chunk-RJEJUZ3O.js

@@ -1,2 +0,0 @@
-import {View}from'@oztix/roadie-core/jsx';var t=View;t.displayName="View";export{t as a};//# sourceMappingURL=chunk-RJEJUZ3O.js.map
-//# sourceMappingURL=chunk-RJEJUZ3O.js.map

package/dist/_chunks/chunk-RJEJUZ3O.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/View/index.tsx"],"names":["View","ViewPattern"],"mappings":"8CAOaA,CAAAA,CAAOC,KAIpBD,EAAK,WAAA,CAAc,MAAA","file":"chunk-RJEJUZ3O.js","sourcesContent":["import { View as ViewPattern } from '@oztix/roadie-core/jsx'\n\n/**\n * A foundational layout component that provides a flexible container with sensible defaults.\n * Based on the Panda CSS Box pattern but with better defaults for application UI layout.\n *\n */\nexport const View = ViewPattern\n\nexport type ViewProps = React.ComponentProps<typeof ViewPattern>\n\nView.displayName = 'View'\n"]}