@oztix/roadie-components 0.1.0 → 0.2.0

package/dist/Button.d.ts

@@ -0,0 +1,116 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as packages_core_dist_types from 'packages/core/dist/types';
+import { ButtonProps as ButtonProps$1 } from 'react-aria-components';
+
+/**
+ * Button emphasis variants
+ */
+type ButtonEmphasis = 'strong' | 'default' | 'subtle' | 'muted';
+/**
+ * Button size variants
+ */
+type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Props for the Button component
+ */
+interface ButtonProps extends Omit<ButtonProps$1, 'className'> {
+    /** The visual style of the button */
+    emphasis?: ButtonEmphasis;
+    /** The size of the button */
+    size?: ButtonSize;
+    /** The color palette to use for the button */
+    colorPalette?: 'neutral' | 'accent' | 'brand' | 'information' | 'success' | 'warning' | 'danger';
+    /** Additional class names to be applied to the button */
+    className?: string;
+}
+declare const buttonRecipe: packages_core_dist_types.RecipeRuntimeFn<{
+    emphasis: {
+        strong: {
+            color: "colorPalette.fg.inverted";
+            backgroundColor: "colorPalette.solid.strong";
+            _hover: {
+                color: "colorPalette.fg.inverted.hover";
+                backgroundColor: "colorPalette.solid.strong.hover";
+            };
+            _active: {
+                color: "colorPalette.fg.inverted.active";
+                backgroundColor: "colorPalette.solid.strong.active";
+            };
+        };
+        default: {
+            borderColor: "colorPalette.border";
+            backgroundColor: "colorPalette.surface.subtle";
+            _hover: {
+                borderColor: "colorPalette.border.hover";
+                backgroundColor: "colorPalette.surface.subtle.hover";
+            };
+            _active: {
+                borderColor: "colorPalette.border.active";
+                backgroundColor: "colorPalette.surface.subtle.active";
+            };
+        };
+        subtle: {
+            backgroundColor: "colorPalette.solid.subtle";
+            _hover: {
+                backgroundColor: "colorPalette.solid.subtle.hover";
+            };
+            _active: {
+                backgroundColor: "colorPalette.solid.subtle.active";
+            };
+        };
+        muted: {
+            _hover: {
+                backgroundColor: "colorPalette.solid.subtle.hover";
+            };
+            _active: {
+                backgroundColor: "colorPalette.solid.subtle.active";
+            };
+        };
+    };
+    colorPalette: {
+        neutral: {
+            colorPalette: "neutral";
+        };
+        accent: {
+            colorPalette: "accent";
+        };
+        brand: {
+            colorPalette: "brand";
+        };
+        information: {
+            colorPalette: "information";
+        };
+        success: {
+            colorPalette: "success";
+        };
+        warning: {
+            colorPalette: "warning";
+        };
+        danger: {
+            colorPalette: "danger";
+        };
+    };
+    size: {
+        sm: {
+            minHeight: "400";
+            fontSize: "sm";
+            px: "200";
+            py: "075";
+        };
+        md: {
+            minHeight: "500";
+            fontSize: "md";
+            px: "200";
+            py: "100";
+        };
+        lg: {
+            minHeight: "600";
+            fontSize: "lg";
+            px: "300";
+            py: "150";
+        };
+    };
+}>;
+declare function Button({ children, emphasis, size, colorPalette, isDisabled, onPress, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps, buttonRecipe };

package/dist/Button.js

@@ -0,0 +1,3 @@
+export { b as Button, a as buttonRecipe } from './_chunks/chunk-JDVDZGUN.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

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

package/dist/Code.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { HTMLStyledProps } from '@oztix/roadie-core/jsx';
+import { JsxStyleProps } from '@oztix/roadie-core/types';
+
+/**
+ * A code component that inherits from Text and renders as a code element
+ */
+interface CodeProps extends HTMLStyledProps<'code'>, JsxStyleProps {
+    /**
+     * The appearance of the code block
+     * @default 'outline'
+     */
+    emphasis?: 'default' | 'strong' | 'subtle' | 'muted';
+}
+declare const Code: React.ForwardRefExoticComponent<CodeProps>;
+
+export { Code, type CodeProps };

package/dist/Code.js

@@ -0,0 +1,3 @@
+export { a as Code } from './_chunks/chunk-76TTGNAE.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Code.js.map

package/dist/Code.js.map

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

package/dist/Heading.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { HTMLStyledProps } from '@oztix/roadie-core/jsx';
+import { JsxStyleProps } from '@oztix/roadie-core/types';
+
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * A heading component that uses display styles for titles and section headers
+ */
+interface HeadingProps extends HTMLStyledProps<'h2'>, JsxStyleProps {
+    /**
+     * The heading level to render
+     * @default 'h2'
+     */
+    as?: HeadingLevel;
+    /**
+     * The text style to use for the heading
+     * @default 'display.ui'
+     */
+    textStyle?: Extract<JsxStyleProps['textStyle'], 'display' | `display${string}`>;
+}
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps>;
+
+export { Heading, type HeadingProps };

package/dist/Heading.js

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

package/dist/Heading.js.map

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

package/dist/Text.d.ts

@@ -0,0 +1,54 @@
+import React, { ElementType } from 'react';
+import { JsxStyleProps } from '@oztix/roadie-core/types';
+
+type AsProp<C extends ElementType> = {
+    as?: C;
+};
+type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * A foundational text component that is responsive and customizable.
+ */
+interface TextProps<C extends ElementType = 'span'> {
+    /**
+     * The HTML element or React component to render the Text as
+     * @default 'span'
+     */
+    as?: C;
+    /**
+     * Controls the font family, line height, and letter spacing of the text.
+     * @default 'ui'
+     */
+    textStyle?: JsxStyleProps['textStyle'];
+    /**
+     * The color of the text
+     * @default 'neutral'
+     */
+    colorPalette?: 'neutral' | 'accent' | 'brand' | 'information' | 'success' | 'warning' | 'danger';
+    /**
+     * The emphasis of the text
+     * - default: For standard body text and general content
+     * - strong: For text that needs visual emphasis or importance, like headings, key terms or warnings
+     * - subtle: For secondary or supplementary text that should be visually de-emphasized
+     * - muted: For text that should be visually muted, like placeholder text or disabled text
+     * @default 'default'
+     */
+    emphasis?: 'default' | 'strong' | 'subtle' | 'muted';
+    /**
+     * Whether the text is interactive. Adds hover, focus, and active styles. Includes group styles.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * The line clamp of the text. Useful for limiting the number of lines of text in a component.
+     * @default 'none'
+     */
+    lineClamp?: JsxStyleProps['lineClamp'];
+}
+type PolymorphicTextProps<C extends ElementType> = TextProps<C> & Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, TextProps>> & JsxStyleProps;
+type TextComponent = {
+    <C extends ElementType = 'span'>(props: PolymorphicTextProps<C>): React.ReactElement | null;
+    displayName?: string;
+};
+declare const Text: TextComponent;
+
+export { type PolymorphicTextProps, Text, type TextProps };

package/dist/Text.js

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

package/dist/Text.js.map

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

package/dist/View.d.ts

@@ -0,0 +1,75 @@
+import React, { ElementType } from 'react';
+import { JsxStyleProps } from '@oztix/roadie-core/types';
+
+type AsProp<C extends ElementType> = {
+    as?: C;
+};
+type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * A foundational layout component that provides a flexible container with sensible defaults.
+ */
+interface ViewProps<C extends ElementType = 'div'> {
+    /**
+     * The HTML element or React component to render the View as
+     * @default 'div'
+     */
+    as?: C;
+    /**
+     * The display property of the View
+     * @default 'flex'
+     */
+    display?: JsxStyleProps['display'];
+    /**
+     * The position property of the View
+     * @default 'relative'
+     */
+    position?: JsxStyleProps['position'];
+    /**
+     * The flex direction property of the View
+     * @default 'column'
+     */
+    flexDirection?: JsxStyleProps['flexDirection'];
+    /**
+     * The flex wrap property of the View
+     * @default 'nowrap'
+     */
+    flexWrap?: JsxStyleProps['flexWrap'];
+    /**
+     * The align items property of the View
+     * @default 'stretch'
+     */
+    alignItems?: JsxStyleProps['alignItems'];
+    /**
+     * The align self property of the View
+     * @default 'flex-start'
+     */
+    alignSelf?: JsxStyleProps['alignSelf'];
+    /**
+     * The align content property of the View
+     * @default 'flex-start'
+     */
+    alignContent?: JsxStyleProps['alignContent'];
+    /**
+     * The justify content property of the View
+     * @default 'flex-start'
+     */
+    justifyContent?: JsxStyleProps['justifyContent'];
+    /**
+     * The min height property of the View
+     * @default '0'
+     */
+    minHeight?: JsxStyleProps['minHeight'];
+    /**
+     * The min width property of the View
+     * @default '0'
+     */
+    minWidth?: JsxStyleProps['minWidth'];
+}
+type PolymorphicViewProps<C extends ElementType> = ViewProps<C> & Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, ViewProps>> & JsxStyleProps;
+type ViewComponent = {
+    <C extends ElementType = 'div'>(props: PolymorphicViewProps<C>): React.ReactElement | null;
+    displayName?: string;
+};
+declare const View: ViewComponent;
+
+export { type PolymorphicViewProps, View, type ViewProps };

package/dist/View.js

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

package/dist/View.js.map

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

package/dist/_chunks/chunk-5EABNA3A.js

@@ -0,0 +1,8 @@
+import 'react';
+import { styled } from '@oztix/roadie-core/jsx';
+
+var t=styled("h2",{base:{textStyle:"display.ui",color:"accent.fg.strong"}});t.displayName="Heading";
+
+export { t as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5EABNA3A.js.map

package/dist/_chunks/chunk-5EABNA3A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Heading/index.tsx"],"names":["styled","Heading"],"mappings":"AAAA,MAAkB,QAGlB,OAAS,UAAAA,MAAc,yBAwBhB,IAAMC,EAAUD,EAAO,KAAM,CAClC,KAAM,CACJ,UAAW,aACX,MAAO,kBACT,CACF,CAAC,EAEDC,EAAQ,YAAc","sourcesContent":["import React from 'react'\n\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * A heading component that uses display styles for titles and section headers\n */\nexport interface HeadingProps extends HTMLStyledProps<'h2'>, JsxStyleProps {\n  /**\n   * The heading level to render\n   * @default 'h2'\n   */\n  as?: HeadingLevel\n  /**\n   * The text style to use for the heading\n   * @default 'display.ui'\n   */\n  textStyle?: Extract<\n    JsxStyleProps['textStyle'],\n    'display' | `display${string}`\n  >\n}\n\nexport const Heading = styled('h2', {\n  base: {\n    textStyle: 'display.ui',\n    color: 'accent.fg.strong'\n  }\n}) as React.ForwardRefExoticComponent<HeadingProps>\n\nHeading.displayName = 'Heading'\n"]}

package/dist/_chunks/chunk-72747LP3.js

@@ -0,0 +1,8 @@
+import 'react';
+import { styled } from '@oztix/roadie-core/jsx';
+
+var t=styled("div",{base:{display:"flex",position:"relative",flexDirection:"column",flexWrap:"nowrap",alignItems:"stretch",alignContent:"flex-start",justifyContent:"flex-start",minHeight:0,minWidth:0}}),o=t;o.displayName="View";
+
+export { o as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-72747LP3.js.map

package/dist/_chunks/chunk-72747LP3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/View/index.tsx"],"names":["styled","StyledView","View"],"mappings":"AACA,MAAkB,QAElB,OAAS,UAAAA,MAAc,yBAiFvB,IAAMC,EAAaD,EAAO,MAAO,CAC/B,KAAM,CACJ,QAAS,OACT,SAAU,WACV,cAAe,SACf,SAAU,SACV,WAAY,UACZ,aAAc,aACd,eAAgB,aAChB,UAAW,EACX,SAAU,CACZ,CACF,CAAC,EAEYE,EAAOD,EAEpBC,EAAK,YAAc","sourcesContent":["import type { ElementType } from 'react'\nimport React from 'react'\n\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype AsProp<C extends ElementType> = {\n  as?: C\n}\n\ntype PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P)\n\n/**\n * A foundational layout component that provides a flexible container with sensible defaults.\n */\nexport interface ViewProps<C extends ElementType = 'div'> {\n  /**\n   * The HTML element or React component to render the View as\n   * @default 'div'\n   */\n  as?: C\n  /**\n   * The display property of the View\n   * @default 'flex'\n   */\n  display?: JsxStyleProps['display']\n  /**\n   * The position property of the View\n   * @default 'relative'\n   */\n  position?: JsxStyleProps['position']\n  /**\n   * The flex direction property of the View\n   * @default 'column'\n   */\n  flexDirection?: JsxStyleProps['flexDirection']\n  /**\n   * The flex wrap property of the View\n   * @default 'nowrap'\n   */\n  flexWrap?: JsxStyleProps['flexWrap']\n  /**\n   * The align items property of the View\n   * @default 'stretch'\n   */\n  alignItems?: JsxStyleProps['alignItems']\n  /**\n   * The align self property of the View\n   * @default 'flex-start'\n   */\n  alignSelf?: JsxStyleProps['alignSelf']\n  /**\n   * The align content property of the View\n   * @default 'flex-start'\n   */\n  alignContent?: JsxStyleProps['alignContent']\n  /**\n   * The justify content property of the View\n   * @default 'flex-start'\n   */\n  justifyContent?: JsxStyleProps['justifyContent']\n  /**\n   * The min height property of the View\n   * @default '0'\n   */\n  minHeight?: JsxStyleProps['minHeight']\n  /**\n   * The min width property of the View\n   * @default '0'\n   */\n  minWidth?: JsxStyleProps['minWidth']\n}\n\nexport type PolymorphicViewProps<C extends ElementType> = ViewProps<C> &\n  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, ViewProps>> &\n  JsxStyleProps\n\ntype ViewComponent = {\n  <C extends ElementType = 'div'>(\n    props: PolymorphicViewProps<C>\n  ): React.ReactElement | null\n  displayName?: string\n}\n\nconst StyledView = styled('div', {\n  base: {\n    display: 'flex',\n    position: 'relative',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    alignItems: 'stretch',\n    alignContent: 'flex-start',\n    justifyContent: 'flex-start',\n    minHeight: 0,\n    minWidth: 0\n  }\n})\n\nexport const View = StyledView as ViewComponent\n\nView.displayName = 'View'\n"]}

package/dist/_chunks/chunk-76TTGNAE.js

@@ -0,0 +1,8 @@
+import 'react';
+import { styled } from '@oztix/roadie-core/jsx';
+
+var e=styled("code",{base:{backgroundColor:"neutral.surface.subtle",textStyle:"code",px:"050",borderRadius:"050",border:"1px solid"},variants:{emphasis:{default:{borderColor:"neutral.border",backgroundColor:"neutral.surface.subtle"},strong:{borderColor:"neutral.border.strong",backgroundColor:"neutral.surface.strong"},subtle:{borderColor:"neutral.border.subtle"},muted:{borderColor:"transparent"}}},defaultVariants:{emphasis:"default"}});e.displayName="Code";
+
+export { e as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-76TTGNAE.js.map

package/dist/_chunks/chunk-76TTGNAE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Code/index.tsx"],"names":["styled","Code"],"mappings":"AAAA,MAAkB,QAGlB,OAAS,UAAAA,MAAc,yBAchB,IAAMC,EAAOD,EAAO,OAAQ,CACjC,KAAM,CACJ,gBAAiB,yBACjB,UAAW,OACX,GAAI,MACJ,aAAc,MACd,OAAQ,WACV,EACA,SAAU,CACR,SAAU,CACR,QAAS,CACP,YAAa,iBACb,gBAAiB,wBACnB,EACA,OAAQ,CACN,YAAa,wBACb,gBAAiB,wBACnB,EACA,OAAQ,CACN,YAAa,uBACf,EACA,MAAO,CACL,YAAa,aACf,CACF,CACF,EACA,gBAAiB,CACf,SAAU,SACZ,CACF,CAAC,EAEDC,EAAK,YAAc","sourcesContent":["import React from 'react'\n\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\n/**\n * A code component that inherits from Text and renders as a code element\n */\nexport interface CodeProps extends HTMLStyledProps<'code'>, JsxStyleProps {\n  /**\n   * The appearance of the code block\n   * @default 'outline'\n   */\n  emphasis?: 'default' | 'strong' | 'subtle' | 'muted'\n}\n\nexport const Code = styled('code', {\n  base: {\n    backgroundColor: 'neutral.surface.subtle',\n    textStyle: 'code',\n    px: '050',\n    borderRadius: '050',\n    border: '1px solid'\n  },\n  variants: {\n    emphasis: {\n      default: {\n        borderColor: 'neutral.border',\n        backgroundColor: 'neutral.surface.subtle'\n      },\n      strong: {\n        borderColor: 'neutral.border.strong',\n        backgroundColor: 'neutral.surface.strong'\n      },\n      subtle: {\n        borderColor: 'neutral.border.subtle'\n      },\n      muted: {\n        borderColor: 'transparent'\n      }\n    }\n  },\n  defaultVariants: {\n    emphasis: 'default'\n  }\n}) as React.ForwardRefExoticComponent<CodeProps>\n\nCode.displayName = 'Code'\n"]}

package/dist/_chunks/chunk-CNVMCX74.js

@@ -0,0 +1,8 @@
+import 'react';
+import { styled } from '@oztix/roadie-core/jsx';
+
+var t=styled("span",{base:{textStyle:"ui",color:"colorPalette.fg"},variants:{emphasis:{default:{color:"colorPalette.fg"},strong:{color:"colorPalette.fg.strong",fontWeight:"semibold"},subtle:{color:"colorPalette.fg.subtle"},muted:{color:"colorPalette.fg.muted"}},interactive:{true:{cursor:"pointer",_hover:{color:"colorPalette.fg.hover"},_focus:{color:"colorPalette.fg.hover"},_active:{color:"colorPalette.fg.active"},_groupHover:{color:"colorPalette.fg.hover"},_groupFocus:{color:"colorPalette.fg.hover"},_groupActive:{color:"colorPalette.fg.active"}}}},defaultVariants:{emphasis:"default",interactive:!1}}),o=t;o.displayName="Text";
+
+export { o as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-CNVMCX74.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Text/index.tsx"],"names":["styled","StyledText","Text"],"mappings":"AACA,MAAkB,QAElB,OAAS,UAAAA,MAAc,yBAmEvB,IAAMC,EAAaD,EAAO,OAAQ,CAChC,KAAM,CACJ,UAAW,KACX,MAAO,iBACT,EACA,SAAU,CACR,SAAU,CACR,QAAS,CACP,MAAO,iBACT,EACA,OAAQ,CACN,MAAO,yBACP,WAAY,UACd,EACA,OAAQ,CACN,MAAO,wBACT,EACA,MAAO,CACL,MAAO,uBACT,CACF,EACA,YAAa,CACX,KAAM,CACJ,OAAQ,UACR,OAAQ,CACN,MAAO,uBACT,EACA,OAAQ,CACN,MAAO,uBACT,EACA,QAAS,CACP,MAAO,wBACT,EACA,YAAa,CACX,MAAO,uBACT,EACA,YAAa,CACX,MAAO,uBACT,EACA,aAAc,CACZ,MAAO,wBACT,CACF,CACF,CACF,EACA,gBAAiB,CACf,SAAU,UACV,YAAa,EACf,CACF,CAAC,EAEYE,EAAOD,EAEpBC,EAAK,YAAc","sourcesContent":["import type { ElementType } from 'react'\nimport React from 'react'\n\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype AsProp<C extends ElementType> = {\n  as?: C\n}\n\ntype PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P)\n\n/**\n * A foundational text component that is responsive and customizable.\n */\nexport interface TextProps<C extends ElementType = 'span'> {\n  /**\n   * The HTML element or React component to render the Text as\n   * @default 'span'\n   */\n  as?: C\n  /**\n   * Controls the font family, line height, and letter spacing of the text.\n   * @default 'ui'\n   */\n  textStyle?: JsxStyleProps['textStyle']\n  /**\n   * The color of the text\n   * @default 'neutral'\n   */\n  colorPalette?:\n    | 'neutral'\n    | 'accent'\n    | 'brand'\n    | 'information'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  /**\n   * The emphasis of the text\n   * - default: For standard body text and general content\n   * - strong: For text that needs visual emphasis or importance, like headings, key terms or warnings\n   * - subtle: For secondary or supplementary text that should be visually de-emphasized\n   * - muted: For text that should be visually muted, like placeholder text or disabled text\n   * @default 'default'\n   */\n  emphasis?: 'default' | 'strong' | 'subtle' | 'muted'\n  /**\n   * Whether the text is interactive. Adds hover, focus, and active styles. Includes group styles.\n   * @default false\n   */\n  interactive?: boolean\n  /**\n   * The line clamp of the text. Useful for limiting the number of lines of text in a component.\n   * @default 'none'\n   */\n  lineClamp?: JsxStyleProps['lineClamp']\n}\n\nexport type PolymorphicTextProps<C extends ElementType> = TextProps<C> &\n  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, TextProps>> &\n  JsxStyleProps\n\ntype TextComponent = {\n  <C extends ElementType = 'span'>(\n    props: PolymorphicTextProps<C>\n  ): React.ReactElement | null\n  displayName?: string\n}\n\nconst StyledText = styled('span', {\n  base: {\n    textStyle: 'ui',\n    color: 'colorPalette.fg'\n  },\n  variants: {\n    emphasis: {\n      default: {\n        color: 'colorPalette.fg'\n      },\n      strong: {\n        color: 'colorPalette.fg.strong',\n        fontWeight: 'semibold'\n      },\n      subtle: {\n        color: 'colorPalette.fg.subtle'\n      },\n      muted: {\n        color: 'colorPalette.fg.muted'\n      }\n    },\n    interactive: {\n      true: {\n        cursor: 'pointer',\n        _hover: {\n          color: 'colorPalette.fg.hover'\n        },\n        _focus: {\n          color: 'colorPalette.fg.hover'\n        },\n        _active: {\n          color: 'colorPalette.fg.active'\n        },\n        _groupHover: {\n          color: 'colorPalette.fg.hover'\n        },\n        _groupFocus: {\n          color: 'colorPalette.fg.hover'\n        },\n        _groupActive: {\n          color: 'colorPalette.fg.active'\n        }\n      }\n    }\n  },\n  defaultVariants: {\n    emphasis: 'default',\n    interactive: false\n  }\n})\n\nexport const Text = StyledText as TextComponent\n\nText.displayName = 'Text'\n"]}

package/dist/_chunks/chunk-JDVDZGUN.js

@@ -0,0 +1,9 @@
+import { Button } from 'react-aria-components';
+import { cva, cx } from '@oztix/roadie-core/css';
+import { jsx } from 'react/jsx-runtime';
+
+var d=cva({base:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent",borderRadius:"050",fontWeight:"medium",fontFamily:"ui",cursor:"pointer",borderWidth:"1px",borderStyle:"solid",borderColor:"transparent",transition:"all 0.2s",color:"colorPalette.fg",_hover:{color:"colorPalette.fg.hover"},_active:{color:"colorPalette.fg.active"},_disabled:{opacity:.4,cursor:"not-allowed",color:"colorPalette.fg.subtle"},_focusVisible:{outlineColor:"colorPalette.border.strong",outlineWidth:"2px",outlineStyle:"solid",outlineOffset:"2px"}},variants:{emphasis:{strong:{color:"colorPalette.fg.inverted",backgroundColor:"colorPalette.solid.strong",_hover:{color:"colorPalette.fg.inverted.hover",backgroundColor:"colorPalette.solid.strong.hover"},_active:{color:"colorPalette.fg.inverted.active",backgroundColor:"colorPalette.solid.strong.active"}},default:{borderColor:"colorPalette.border",backgroundColor:"colorPalette.surface.subtle",_hover:{borderColor:"colorPalette.border.hover",backgroundColor:"colorPalette.surface.subtle.hover"},_active:{borderColor:"colorPalette.border.active",backgroundColor:"colorPalette.surface.subtle.active"}},subtle:{backgroundColor:"colorPalette.solid.subtle",_hover:{backgroundColor:"colorPalette.solid.subtle.hover"},_active:{backgroundColor:"colorPalette.solid.subtle.active"}},muted:{_hover:{backgroundColor:"colorPalette.solid.subtle.hover"},_active:{backgroundColor:"colorPalette.solid.subtle.active"}}},colorPalette:{neutral:{colorPalette:"neutral"},accent:{colorPalette:"accent"},brand:{colorPalette:"brand"},information:{colorPalette:"information"},success:{colorPalette:"success"},warning:{colorPalette:"warning"},danger:{colorPalette:"danger"}},size:{sm:{minHeight:"400",fontSize:"sm",px:"200",py:"075"},md:{minHeight:"500",fontSize:"md",px:"200",py:"100"},lg:{minHeight:"600",fontSize:"lg",px:"300",py:"150"}}},defaultVariants:{emphasis:"default",colorPalette:"neutral",size:"md"}});function f({children:o,emphasis:e="default",size:t="md",colorPalette:r="neutral",isDisabled:l=!1,onPress:a,className:n,...c}){return jsx(Button,{onPress:a,isDisabled:l,className:cx(d({emphasis:e,size:t,colorPalette:r}),n),...c,children:o})}
+
+export { d as a, f as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-JDVDZGUN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Button/index.tsx"],"names":["AriaButton","cva","cx","jsx","buttonRecipe","Button","children","emphasis","size","colorPalette","isDisabled","onPress","className","props"],"mappings":"AAAA,OACE,UAAUA,MAEL,wBAEP,OAAS,OAAAC,EAAK,MAAAC,MAAU,yBA6KpB,cAAAC,MAAA,oBA5IG,IAAMC,EAAeH,EAAI,CAC9B,KAAM,CACJ,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,gBAAiB,cACjB,aAAc,MACd,WAAY,SACZ,WAAY,KACZ,OAAQ,UACR,YAAa,MACb,YAAa,QACb,YAAa,cACb,WAAY,WACZ,MAAO,kBACP,OAAQ,CACN,MAAO,uBACT,EACA,QAAS,CACP,MAAO,wBACT,EACA,UAAW,CACT,QAAS,GACT,OAAQ,cACR,MAAO,wBACT,EACA,cAAe,CACb,aAAc,6BACd,aAAc,MACd,aAAc,QACd,cAAe,KACjB,CACF,EACA,SAAU,CACR,SAAU,CACR,OAAQ,CACN,MAAO,2BACP,gBAAiB,4BACjB,OAAQ,CACN,MAAO,iCACP,gBAAiB,iCACnB,EACA,QAAS,CACP,MAAO,kCACP,gBAAiB,kCACnB,CACF,EACA,QAAS,CACP,YAAa,sBACb,gBAAiB,8BACjB,OAAQ,CACN,YAAa,4BACb,gBAAiB,mCACnB,EACA,QAAS,CACP,YAAa,6BACb,gBAAiB,oCACnB,CACF,EACA,OAAQ,CACN,gBAAiB,4BAEjB,OAAQ,CACN,gBAAiB,iCACnB,EACA,QAAS,CACP,gBAAiB,kCACnB,CACF,EACA,MAAO,CACL,OAAQ,CACN,gBAAiB,iCACnB,EACA,QAAS,CACP,gBAAiB,kCACnB,CACF,CACF,EACA,aAAc,CACZ,QAAS,CACP,aAAc,SAChB,EACA,OAAQ,CACN,aAAc,QAChB,EACA,MAAO,CACL,aAAc,OAChB,EACA,YAAa,CACX,aAAc,aAChB,EACA,QAAS,CACP,aAAc,SAChB,EACA,QAAS,CACP,aAAc,SAChB,EACA,OAAQ,CACN,aAAc,QAChB,CACF,EACA,KAAM,CACJ,GAAI,CACF,UAAW,MACX,SAAU,KACV,GAAI,MACJ,GAAI,KACN,EACA,GAAI,CACF,UAAW,MACX,SAAU,KACV,GAAI,MACJ,GAAI,KACN,EACA,GAAI,CACF,UAAW,MACX,SAAU,KACV,GAAI,MACJ,GAAI,KACN,CACF,CACF,EACA,gBAAiB,CACf,SAAU,UACV,aAAc,UACd,KAAM,IACR,CACF,CAAC,EAEM,SAASI,EAAO,CACrB,SAAAC,EACA,SAAAC,EAAW,UACX,KAAAC,EAAO,KACP,aAAAC,EAAe,UACf,WAAAC,EAAa,GACb,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAgB,CACd,OACEV,EAACH,EAAA,CACC,QAASW,EACT,WAAYD,EACZ,UAAWR,EAAGE,EAAa,CAAE,SAAAG,EAAU,KAAAC,EAAM,aAAAC,CAAa,CAAC,EAAGG,CAAS,EACtE,GAAGC,EAEH,SAAAP,EACH,CAEJ","sourcesContent":["import {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps\n} from 'react-aria-components'\n\nimport { cva, cx } from '@oztix/roadie-core/css'\n\n/**\n * Button emphasis variants\n */\ntype ButtonEmphasis = 'strong' | 'default' | 'subtle' | 'muted'\n\n/**\n * Button size variants\n */\ntype ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for the Button component\n */\nexport interface ButtonProps extends Omit<AriaButtonProps, 'className'> {\n  /** The visual style of the button */\n  emphasis?: ButtonEmphasis\n  /** The size of the button */\n  size?: ButtonSize\n  /** The color palette to use for the button */\n  colorPalette?:\n    | 'neutral'\n    | 'accent'\n    | 'brand'\n    | 'information'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  /** Additional class names to be applied to the button */\n  className?: string\n}\n\nexport const buttonRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: 'transparent',\n    borderRadius: '050',\n    fontWeight: 'medium',\n    fontFamily: 'ui',\n    cursor: 'pointer',\n    borderWidth: '1px',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    transition: 'all 0.2s',\n    color: 'colorPalette.fg',\n    _hover: {\n      color: 'colorPalette.fg.hover'\n    },\n    _active: {\n      color: 'colorPalette.fg.active'\n    },\n    _disabled: {\n      opacity: 0.4,\n      cursor: 'not-allowed',\n      color: 'colorPalette.fg.subtle'\n    },\n    _focusVisible: {\n      outlineColor: 'colorPalette.border.strong',\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineOffset: '2px'\n    }\n  },\n  variants: {\n    emphasis: {\n      strong: {\n        color: 'colorPalette.fg.inverted',\n        backgroundColor: 'colorPalette.solid.strong',\n        _hover: {\n          color: 'colorPalette.fg.inverted.hover',\n          backgroundColor: 'colorPalette.solid.strong.hover'\n        },\n        _active: {\n          color: 'colorPalette.fg.inverted.active',\n          backgroundColor: 'colorPalette.solid.strong.active'\n        }\n      },\n      default: {\n        borderColor: 'colorPalette.border',\n        backgroundColor: 'colorPalette.surface.subtle',\n        _hover: {\n          borderColor: 'colorPalette.border.hover',\n          backgroundColor: 'colorPalette.surface.subtle.hover'\n        },\n        _active: {\n          borderColor: 'colorPalette.border.active',\n          backgroundColor: 'colorPalette.surface.subtle.active'\n        }\n      },\n      subtle: {\n        backgroundColor: 'colorPalette.solid.subtle',\n\n        _hover: {\n          backgroundColor: 'colorPalette.solid.subtle.hover'\n        },\n        _active: {\n          backgroundColor: 'colorPalette.solid.subtle.active'\n        }\n      },\n      muted: {\n        _hover: {\n          backgroundColor: 'colorPalette.solid.subtle.hover'\n        },\n        _active: {\n          backgroundColor: 'colorPalette.solid.subtle.active'\n        }\n      }\n    },\n    colorPalette: {\n      neutral: {\n        colorPalette: 'neutral'\n      },\n      accent: {\n        colorPalette: 'accent'\n      },\n      brand: {\n        colorPalette: 'brand'\n      },\n      information: {\n        colorPalette: 'information'\n      },\n      success: {\n        colorPalette: 'success'\n      },\n      warning: {\n        colorPalette: 'warning'\n      },\n      danger: {\n        colorPalette: 'danger'\n      }\n    },\n    size: {\n      sm: {\n        minHeight: '400',\n        fontSize: 'sm',\n        px: '200',\n        py: '075'\n      },\n      md: {\n        minHeight: '500',\n        fontSize: 'md',\n        px: '200',\n        py: '100'\n      },\n      lg: {\n        minHeight: '600',\n        fontSize: 'lg',\n        px: '300',\n        py: '150'\n      }\n    }\n  },\n  defaultVariants: {\n    emphasis: 'default',\n    colorPalette: 'neutral',\n    size: 'md'\n  }\n})\n\nexport function Button({\n  children,\n  emphasis = 'default',\n  size = 'md',\n  colorPalette = 'neutral',\n  isDisabled = false,\n  onPress,\n  className,\n  ...props\n}: ButtonProps) {\n  return (\n    <AriaButton\n      onPress={onPress}\n      isDisabled={isDisabled}\n      className={cx(buttonRecipe({ emphasis, size, colorPalette }), className)}\n      {...props}\n    >\n      {children}\n    </AriaButton>\n  )\n}\n"]}

package/dist/index.d.ts

@@ -1,171 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps as ButtonProps$1 } from 'react-aria-components';
-import React, { ElementType } from 'react';
-import { HTMLStyledProps } from '@oztix/roadie-core/jsx';
-import { JsxStyleProps } from '@oztix/roadie-core/types';
-
-/**
- * Button appearance variants
- */
-type ButtonAppearance = 'solid' | 'outline' | 'ghost';
-/**
- * Button size variants
- */
-type ButtonSize = 'sm' | 'md' | 'lg';
-/**
- * Button color variants
- */
-type Emphasis = 'subtle' | 'accent' | 'inverse' | 'success' | 'warning' | 'danger';
-/**
- * Props for the Button component
- */
-interface ButtonProps extends Omit<ButtonProps$1, 'className'> {
-    /** The visual style of the button */
-    appearance?: ButtonAppearance;
-    /** The size of the button */
-    size?: ButtonSize;
-    /** The color of the button */
-    emphasis?: Emphasis;
-    /** Additional class names to be applied to the button */
-    className?: string;
-}
-declare function Button({ children, appearance, size, emphasis, isDisabled, onPress, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-/**
- * A code component that inherits from Text and renders as a code element
- */
-interface CodeProps extends HTMLStyledProps<'code'>, JsxStyleProps {
-    /**
-     * The appearance of the code block
-     * @default 'outline'
-     */
-    appearance?: 'outline' | 'ghost';
-}
-declare const Code: React.ForwardRefExoticComponent<CodeProps>;
-
-type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-/**
- * A heading component that uses display styles for titles and section headers
- */
-interface HeadingProps extends HTMLStyledProps<'h2'>, JsxStyleProps {
-    /**
-     * The heading level to render
-     * @default 'h2'
-     */
-    as?: HeadingLevel;
-    /**
-     * The text style to use for the heading
-     * @default 'display.ui'
-     */
-    textStyle?: Extract<JsxStyleProps['textStyle'], 'display' | `display${string}`>;
-}
-declare const Heading: React.ForwardRefExoticComponent<HeadingProps>;
-
-type AsProp$1<C extends ElementType> = {
-    as?: C;
-};
-type PropsToOmit$1<C extends ElementType, P> = keyof (AsProp$1<C> & P);
-/**
- * A foundational text component that is responsive and customizable.
- */
-interface TextProps<C extends ElementType = 'span'> {
-    /**
-     * The HTML element or React component to render the Text as
-     * @default 'span'
-     */
-    as?: C;
-    /**
-     * Controls the font family, line height, and letter spacing of the text.
-     * @default 'ui'
-     */
-    textStyle?: JsxStyleProps['textStyle'];
-    /**
-     * The color of the text
-     * @default 'fg'
-     */
-    color?: Extract<JsxStyleProps['color'], `fg${string}` | 'fg'>;
-    /**
-     * The line clamp of the text. Useful for limiting the number of lines of text in a component.
-     * @default 'none'
-     */
-    lineClamp?: JsxStyleProps['lineClamp'];
-}
-type PolymorphicTextProps<C extends ElementType> = TextProps<C> & Omit<React.ComponentPropsWithRef<C>, PropsToOmit$1<C, TextProps>> & JsxStyleProps;
-type TextComponent = {
-    <C extends ElementType = 'span'>(props: PolymorphicTextProps<C>): React.ReactElement | null;
-    displayName?: string;
-};
-declare const Text: TextComponent;
-
-type AsProp<C extends ElementType> = {
-    as?: C;
-};
-type PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P);
-/**
- * A foundational layout component that provides a flexible container with sensible defaults.
- */
-interface ViewProps<C extends ElementType = 'div'> {
-    /**
-     * The HTML element or React component to render the View as
-     * @default 'div'
-     */
-    as?: C;
-    /**
-     * The display property of the View
-     * @default 'flex'
-     */
-    display?: JsxStyleProps['display'];
-    /**
-     * The position property of the View
-     * @default 'relative'
-     */
-    position?: JsxStyleProps['position'];
-    /**
-     * The flex direction property of the View
-     * @default 'column'
-     */
-    flexDirection?: JsxStyleProps['flexDirection'];
-    /**
-     * The flex wrap property of the View
-     * @default 'nowrap'
-     */
-    flexWrap?: JsxStyleProps['flexWrap'];
-    /**
-     * The align items property of the View
-     * @default 'stretch'
-     */
-    alignItems?: JsxStyleProps['alignItems'];
-    /**
-     * The align self property of the View
-     * @default 'flex-start'
-     */
-    alignSelf?: JsxStyleProps['alignSelf'];
-    /**
-     * The align content property of the View
-     * @default 'flex-start'
-     */
-    alignContent?: JsxStyleProps['alignContent'];
-    /**
-     * The justify content property of the View
-     * @default 'flex-start'
-     */
-    justifyContent?: JsxStyleProps['justifyContent'];
-    /**
-     * The min height property of the View
-     * @default '0'
-     */
-    minHeight?: JsxStyleProps['minHeight'];
-    /**
-     * The min width property of the View
-     * @default '0'
-     */
-    minWidth?: JsxStyleProps['minWidth'];
-}
-type PolymorphicViewProps<C extends ElementType> = ViewProps<C> & Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, ViewProps>> & JsxStyleProps;
-type ViewComponent = {
-    <C extends ElementType = 'div'>(props: PolymorphicViewProps<C>): React.ReactElement | null;
-    displayName?: string;
-};
-declare const View: ViewComponent;
-
-export { Button, type ButtonProps, Code, type CodeProps, Heading, type HeadingProps, type PolymorphicTextProps, type PolymorphicViewProps, Text, type TextProps, View, type ViewProps };
+export { Button, ButtonProps, buttonRecipe } from './Button.js';
+export { Code, CodeProps } from './Code.js';
+export { Heading, HeadingProps } from './Heading.js';
+export { PolymorphicTextProps, Text, TextProps } from './Text.js';
+export { PolymorphicViewProps, View, ViewProps } from './View.js';
+import 'react/jsx-runtime';
+import 'packages/core/dist/types';
+import 'react-aria-components';
+import 'react';
+import '@oztix/roadie-core/jsx';
+import '@oztix/roadie-core/types';

package/dist/index.js

@@ -1,463 +1,7 @@
-"use client";
-
-// src/components/Button/index.tsx
-import { Button as AriaButton } from "react-aria-components";
-import { cva, cx } from "@oztix/roadie-core/css";
-import { jsx } from "react/jsx-runtime";
-var button = cva({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-    borderRadius: "050",
-    fontWeight: "semibold",
-    fontFamily: "ui",
-    cursor: "pointer",
-    border: "1px solid",
-    transition: "all 0.2s",
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      backgroundColor: "bg.disabled",
-      color: "fg.disabled"
-    },
-    _focus: {
-      outline: "none"
-    },
-    _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "border.focused"
-    }
-  },
-  variants: {
-    appearance: {
-      solid: {
-        backgroundColor: "bg.subtle",
-        borderColor: "border.subtle",
-        color: "fg.subtle",
-        _hover: {
-          backgroundColor: "bg.subtle.hovered"
-        },
-        _active: {
-          backgroundColor: "bg.subtle.pressed"
-        }
-      },
-      outline: {
-        border: "1px solid",
-        borderColor: "border.subtle",
-        color: "fg.subtle",
-        _hover: {
-          color: "fg",
-          borderColor: "border.hovered",
-          backgroundColor: "bg.hovered"
-        },
-        _active: {
-          color: "fg",
-          borderColor: "border.pressed",
-          backgroundColor: "bg.pressed"
-        }
-      },
-      ghost: {
-        color: "fg.subtle",
-        borderColor: "transparent",
-        _hover: {
-          color: "fg",
-          backgroundColor: "bg.hovered"
-        },
-        _active: {
-          color: "fg",
-          backgroundColor: "bg.pressed"
-        }
-      }
-    },
-    size: {
-      sm: {
-        minHeight: "400",
-        fontSize: "sm",
-        px: "200",
-        py: "075"
-      },
-      md: {
-        minHeight: "500",
-        fontSize: "md",
-        px: "200",
-        py: "100"
-      },
-      lg: {
-        minHeight: "600",
-        fontSize: "lg",
-        px: "300",
-        py: "150"
-      }
-    },
-    emphasis: {
-      subtle: {
-        color: "fg.subtle"
-      },
-      accent: {
-        color: "fg.accent"
-      },
-      inverse: {
-        color: "fg.inverse"
-      },
-      success: {
-        color: "fg.success"
-      },
-      warning: {
-        color: "fg.warning"
-      },
-      danger: {
-        color: "fg.danger"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      appearance: "solid",
-      emphasis: "subtle",
-      css: {
-        color: "fg.subtle",
-        _hover: {
-          color: "fg"
-        },
-        _active: {
-          color: "fg.subtle"
-        }
-      }
-    },
-    {
-      appearance: "solid",
-      emphasis: "accent",
-      css: {
-        backgroundColor: "bg.accent.bold",
-        color: "fg.accent.inverse",
-        borderColor: "border.accent",
-        _hover: {
-          color: "fg.inverse",
-          backgroundColor: "bg.accent.bold.hovered"
-        },
-        _active: {
-          backgroundColor: "bg.accent.bold.pressed"
-        }
-      }
-    },
-    {
-      appearance: "solid",
-      emphasis: "inverse",
-      css: {
-        backgroundColor: "bg.inverse",
-        color: "fg.inverse",
-        _hover: {
-          backgroundColor: "bg.inverse.hovered"
-        },
-        _active: {
-          backgroundColor: "bg.inverse.pressed"
-        }
-      }
-    },
-    {
-      appearance: "solid",
-      emphasis: "success",
-      css: {
-        backgroundColor: "bg.success.bold",
-        color: "fg.success.inverse",
-        borderColor: "border.success",
-        _hover: {
-          backgroundColor: "bg.success.bold.hovered"
-        },
-        _active: {
-          backgroundColor: "bg.success.bold.pressed"
-        }
-      }
-    },
-    {
-      appearance: "solid",
-      emphasis: "warning",
-      css: {
-        backgroundColor: "bg.warning.bold",
-        color: "fg.warning.inverse",
-        borderColor: "border.warning",
-        _hover: {
-          backgroundColor: "bg.warning.bold.hovered"
-        },
-        _active: {
-          backgroundColor: "bg.warning.bold.pressed"
-        }
-      }
-    },
-    {
-      appearance: "solid",
-      emphasis: "danger",
-      css: {
-        backgroundColor: "bg.danger.bold",
-        color: "fg.danger.inverse",
-        borderColor: "border.danger",
-        _hover: {
-          backgroundColor: "bg.danger.bold.hovered"
-        },
-        _active: {
-          backgroundColor: "bg.danger.bold.pressed"
-        }
-      }
-    },
-    {
-      appearance: "outline",
-      emphasis: "accent",
-      css: {
-        borderColor: "border.accent",
-        _hover: {
-          color: "fg.accent.hovered",
-          borderColor: "border.accent.hovered",
-          backgroundColor: "bg.accent.hovered"
-        },
-        _active: {
-          color: "fg.accent.pressed",
-          borderColor: "border.accent.pressed",
-          backgroundColor: "bg.accent.pressed"
-        }
-      }
-    },
-    {
-      appearance: "outline",
-      emphasis: "inverse",
-      css: {
-        borderColor: "border.bold",
-        color: "fg",
-        _hover: {
-          color: "fg.inverse.hovered",
-          borderColor: "border.bold.hovered",
-          backgroundColor: "bg.hovered"
-        },
-        _active: {
-          color: "fg.inverse.pressed",
-          borderColor: "border.bold.pressed",
-          backgroundColor: "bg.pressed"
-        }
-      }
-    },
-    {
-      appearance: "outline",
-      emphasis: "success",
-      css: {
-        borderColor: "border.success",
-        _hover: {
-          color: "fg.success.hovered",
-          borderColor: "border.success.hovered",
-          backgroundColor: "bg.success.hovered"
-        },
-        _active: {
-          color: "fg.success.pressed",
-          borderColor: "border.success.pressed",
-          backgroundColor: "bg.success.pressed"
-        }
-      }
-    },
-    {
-      appearance: "outline",
-      emphasis: "warning",
-      css: {
-        borderColor: "border.warning",
-        _hover: {
-          color: "fg.warning.hovered",
-          borderColor: "border.warning.hovered",
-          backgroundColor: "bg.warning.hovered"
-        },
-        _active: {
-          color: "fg.warning.pressed",
-          borderColor: "border.warning.pressed",
-          backgroundColor: "bg.warning.pressed"
-        }
-      }
-    },
-    {
-      appearance: "outline",
-      emphasis: "danger",
-      css: {
-        borderColor: "border.danger",
-        _hover: {
-          color: "fg.danger.hovered",
-          borderColor: "border.danger.hovered",
-          backgroundColor: "bg.danger.hovered"
-        },
-        _active: {
-          color: "fg.danger.pressed",
-          borderColor: "border.danger.pressed",
-          backgroundColor: "bg.danger.pressed"
-        }
-      }
-    },
-    {
-      appearance: "ghost",
-      emphasis: "accent",
-      css: {
-        _hover: {
-          color: "fg.accent.hovered",
-          backgroundColor: "bg.accent.hovered"
-        },
-        _active: {
-          color: "fg.accent.pressed",
-          backgroundColor: "bg.accent.pressed"
-        }
-      }
-    },
-    {
-      appearance: "ghost",
-      emphasis: "inverse",
-      css: {
-        color: "fg",
-        _hover: {
-          color: "fg.inverse.hovered",
-          backgroundColor: "bg.hovered"
-        },
-        _active: {
-          color: "fg.inverse.pressed",
-          backgroundColor: "bg.pressed"
-        }
-      }
-    },
-    {
-      appearance: "ghost",
-      emphasis: "success",
-      css: {
-        _hover: {
-          color: "fg.success.hovered",
-          backgroundColor: "bg.success.hovered"
-        },
-        _active: {
-          color: "fg.success.pressed",
-          backgroundColor: "bg.success.pressed"
-        }
-      }
-    },
-    {
-      appearance: "ghost",
-      emphasis: "warning",
-      css: {
-        _hover: {
-          color: "fg.warning.hovered",
-          backgroundColor: "bg.warning.hovered"
-        },
-        _active: {
-          color: "fg.warning.pressed",
-          backgroundColor: "bg.warning.pressed"
-        }
-      }
-    },
-    {
-      appearance: "ghost",
-      emphasis: "danger",
-      css: {
-        _hover: {
-          color: "fg.danger.hovered",
-          backgroundColor: "bg.danger.hovered"
-        },
-        _active: {
-          color: "fg.danger.pressed",
-          backgroundColor: "bg.danger.pressed"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    appearance: "solid",
-    size: "md",
-    emphasis: "subtle"
-  }
-});
-function Button({
-  children,
-  appearance = "solid",
-  size = "md",
-  emphasis = "subtle",
-  isDisabled = false,
-  onPress,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AriaButton,
-    {
-      onPress,
-      isDisabled,
-      className: cx(button({ appearance, size, emphasis }), className),
-      ...props,
-      children
-    }
-  );
-}
-
-// src/components/Code/index.tsx
-import "react";
-import { styled } from "@oztix/roadie-core/jsx";
-var Code = styled("code", {
-  base: {
-    backgroundColor: "bg.subtle",
-    textStyle: "code",
-    px: "050",
-    borderRadius: "050",
-    border: "1px solid"
-  },
-  variants: {
-    appearance: {
-      outline: {
-        borderColor: "border.subtlest"
-      },
-      ghost: {
-        borderColor: "transparent"
-      }
-    }
-  },
-  defaultVariants: {
-    appearance: "outline"
-  }
-});
-Code.displayName = "Code";
-
-// src/components/Heading/index.tsx
-import "react";
-import { styled as styled2 } from "@oztix/roadie-core/jsx";
-var Heading = styled2("h2", {
-  base: {
-    textStyle: "display.ui"
-  }
-});
-Heading.displayName = "Heading";
-
-// src/components/Text/index.tsx
-import "react";
-import { styled as styled3 } from "@oztix/roadie-core/jsx";
-var StyledText = styled3("span", {
-  base: {
-    textStyle: "ui"
-  }
-});
-var Text = StyledText;
-Text.displayName = "Text";
-
-// src/components/View/index.tsx
-import "react";
-import { styled as styled4 } from "@oztix/roadie-core/jsx";
-var StyledView = styled4("div", {
-  base: {
-    display: "flex",
-    position: "relative",
-    flexDirection: "column",
-    flexWrap: "nowrap",
-    alignItems: "stretch",
-    alignContent: "flex-start",
-    justifyContent: "flex-start",
-    minHeight: 0,
-    minWidth: 0
-  }
-});
-var View = StyledView;
-View.displayName = "View";
-export {
-  Button,
-  Code,
-  Heading,
-  Text,
-  View
-};
+export { b as Button, a as buttonRecipe } from './_chunks/chunk-JDVDZGUN.js';
+export { a as Code } from './_chunks/chunk-76TTGNAE.js';
+export { a as Heading } from './_chunks/chunk-5EABNA3A.js';
+export { a as Text } from './_chunks/chunk-CNVMCX74.js';
+export { a as View } from './_chunks/chunk-72747LP3.js';
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/index.tsx","../src/components/Code/index.tsx","../src/components/Heading/index.tsx","../src/components/Text/index.tsx","../src/components/View/index.tsx"],"sourcesContent":["import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\n\nimport { cva, cx } from '@oztix/roadie-core/css'\n\n/**\n * Button appearance variants\n */\ntype ButtonAppearance = 'solid' | 'outline' | 'ghost'\n\n/**\n * Button size variants\n */\ntype ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Button color variants\n */\ntype Emphasis = 'subtle' | 'accent' | 'inverse' | 'success' | 'warning' | 'danger'\n\n/**\n * Props for the Button component\n */\nexport interface ButtonProps extends Omit<AriaButtonProps, 'className'> {\n  /** The visual style of the button */\n  appearance?: ButtonAppearance\n  /** The size of the button */\n  size?: ButtonSize\n  /** The color of the button */\n  emphasis?: Emphasis\n  /** Additional class names to be applied to the button */\n  className?: string\n}\n\nconst button = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: 'transparent',\n    borderRadius: '050',\n    fontWeight: 'semibold',\n    fontFamily: 'ui',\n    cursor: 'pointer',\n    border: '1px solid',\n    transition: 'all 0.2s',\n    _disabled: {\n      opacity: 0.4,\n      cursor: 'not-allowed',\n      backgroundColor: 'bg.disabled',\n      color: 'fg.disabled'\n    },\n    _focus: {\n      outline: 'none'\n    },\n    _focusVisible: {\n      outline: '2px solid',\n      outlineColor: 'border.focused'\n    }\n  },\n  variants: {\n    appearance: {\n      solid: {\n        backgroundColor: 'bg.subtle',\n        borderColor: 'border.subtle',\n        color: 'fg.subtle',\n        _hover: {\n          backgroundColor: 'bg.subtle.hovered'\n        },\n        _active: {\n          backgroundColor: 'bg.subtle.pressed'\n        }\n      },\n      outline: {\n        border: '1px solid',\n        borderColor: 'border.subtle',\n        color: 'fg.subtle',\n        _hover: {\n          color: 'fg',\n          borderColor: 'border.hovered',\n          backgroundColor: 'bg.hovered'\n        },\n        _active: {\n          color: 'fg',\n          borderColor: 'border.pressed',\n          backgroundColor: 'bg.pressed'\n        }\n      },\n      ghost: {\n        color: 'fg.subtle',\n        borderColor: 'transparent',\n        _hover: {\n          color: 'fg',\n          backgroundColor: 'bg.hovered'\n        },\n        _active: {\n          color: 'fg',\n          backgroundColor: 'bg.pressed'\n        }\n      }\n    },\n    size: {\n      sm: {\n        minHeight: '400',\n        fontSize: 'sm',\n        px: '200',\n        py: '075'\n      },\n      md: {\n        minHeight: '500',\n        fontSize: 'md',\n        px: '200',\n        py: '100'\n      },\n      lg: {\n        minHeight: '600',\n        fontSize: 'lg',\n        px: '300',\n        py: '150'\n      }\n    },\n    emphasis: {\n      subtle: {\n        color: 'fg.subtle'\n      },\n      accent: {\n        color: 'fg.accent'\n      },\n      inverse: {\n        color: 'fg.inverse'\n      },\n      success: {\n        color: 'fg.success'\n      },\n      warning: {\n        color: 'fg.warning'\n      },\n      danger: {\n        color: 'fg.danger'\n      }\n    }\n  },\n  compoundVariants: [\n    {\n      appearance: 'solid',\n      emphasis: 'subtle',\n      css: {\n        color: 'fg.subtle',\n        _hover: {\n          color: 'fg'\n        },\n        _active: {\n          color: 'fg.subtle'\n        }\n      }\n    },\n    {\n      appearance: 'solid',\n      emphasis: 'accent',\n      css: {\n        backgroundColor: 'bg.accent.bold',\n        color: 'fg.accent.inverse',\n        borderColor: 'border.accent',\n        _hover: {\n          color: 'fg.inverse',\n          backgroundColor: 'bg.accent.bold.hovered'\n        },\n        _active: {\n          backgroundColor: 'bg.accent.bold.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'solid',\n      emphasis: 'inverse',\n      css: {\n        backgroundColor: 'bg.inverse',\n        color: 'fg.inverse',\n        _hover: {\n          backgroundColor: 'bg.inverse.hovered'\n        },\n        _active: {\n          backgroundColor: 'bg.inverse.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'solid',\n      emphasis: 'success',\n      css: {\n        backgroundColor: 'bg.success.bold',\n        color: 'fg.success.inverse',\n        borderColor: 'border.success',\n        _hover: {\n          backgroundColor: 'bg.success.bold.hovered'\n        },\n        _active: {\n          backgroundColor: 'bg.success.bold.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'solid',\n      emphasis: 'warning',\n      css: {\n        backgroundColor: 'bg.warning.bold',\n        color: 'fg.warning.inverse',\n        borderColor: 'border.warning',\n        _hover: {\n          backgroundColor: 'bg.warning.bold.hovered'\n        },\n        _active: {\n          backgroundColor: 'bg.warning.bold.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'solid',\n      emphasis: 'danger',\n      css: {\n        backgroundColor: 'bg.danger.bold',\n        color: 'fg.danger.inverse',\n        borderColor: 'border.danger',\n        _hover: {\n          backgroundColor: 'bg.danger.bold.hovered'\n        },\n        _active: {\n          backgroundColor: 'bg.danger.bold.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'outline',\n      emphasis: 'accent',\n      css: {\n        borderColor: 'border.accent',\n        _hover: {\n          color: 'fg.accent.hovered',\n          borderColor: 'border.accent.hovered',\n          backgroundColor: 'bg.accent.hovered'\n        },\n        _active: {\n          color: 'fg.accent.pressed',\n          borderColor: 'border.accent.pressed',\n          backgroundColor: 'bg.accent.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'outline',\n      emphasis: 'inverse',\n      css: {\n        borderColor: 'border.bold',\n        color: 'fg',\n        _hover: {\n          color: 'fg.inverse.hovered',\n          borderColor: 'border.bold.hovered',\n          backgroundColor: 'bg.hovered'\n        },\n        _active: {\n          color: 'fg.inverse.pressed',\n          borderColor: 'border.bold.pressed',\n          backgroundColor: 'bg.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'outline',\n      emphasis: 'success',\n      css: {\n        borderColor: 'border.success',\n        _hover: {\n          color: 'fg.success.hovered',\n          borderColor: 'border.success.hovered',\n          backgroundColor: 'bg.success.hovered'\n        },\n        _active: {\n          color: 'fg.success.pressed',\n          borderColor: 'border.success.pressed',\n          backgroundColor: 'bg.success.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'outline',\n      emphasis: 'warning',\n      css: {\n        borderColor: 'border.warning',\n        _hover: {\n          color: 'fg.warning.hovered',\n          borderColor: 'border.warning.hovered',\n          backgroundColor: 'bg.warning.hovered'\n        },\n        _active: {\n          color: 'fg.warning.pressed',\n          borderColor: 'border.warning.pressed',\n          backgroundColor: 'bg.warning.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'outline',\n      emphasis: 'danger',\n      css: {\n        borderColor: 'border.danger',\n        _hover: {\n          color: 'fg.danger.hovered',\n          borderColor: 'border.danger.hovered',\n          backgroundColor: 'bg.danger.hovered'\n        },\n        _active: {\n          color: 'fg.danger.pressed',\n          borderColor: 'border.danger.pressed',\n          backgroundColor: 'bg.danger.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'ghost',\n      emphasis: 'accent',\n      css: {\n        _hover: {\n          color: 'fg.accent.hovered',\n          backgroundColor: 'bg.accent.hovered'\n        },\n        _active: {\n          color: 'fg.accent.pressed',\n          backgroundColor: 'bg.accent.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'ghost',\n      emphasis: 'inverse',\n      css: {\n        color: 'fg',\n        _hover: {\n          color: 'fg.inverse.hovered',\n          backgroundColor: 'bg.hovered'\n        },\n        _active: {\n          color: 'fg.inverse.pressed',\n          backgroundColor: 'bg.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'ghost',\n      emphasis: 'success',\n      css: {\n        _hover: {\n          color: 'fg.success.hovered',\n          backgroundColor: 'bg.success.hovered'\n        },\n        _active: {\n          color: 'fg.success.pressed',\n          backgroundColor: 'bg.success.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'ghost',\n      emphasis: 'warning',\n      css: {\n        _hover: {\n          color: 'fg.warning.hovered',\n          backgroundColor: 'bg.warning.hovered'\n        },\n        _active: {\n          color: 'fg.warning.pressed',\n          backgroundColor: 'bg.warning.pressed'\n        }\n      }\n    },\n    {\n      appearance: 'ghost',\n      emphasis: 'danger',\n      css: {\n        _hover: {\n          color: 'fg.danger.hovered',\n          backgroundColor: 'bg.danger.hovered'\n        },\n        _active: {\n          color: 'fg.danger.pressed',\n          backgroundColor: 'bg.danger.pressed'\n        }\n      }\n    }\n  ],\n  defaultVariants: {\n    appearance: 'solid',\n    size: 'md',\n    emphasis: 'subtle'\n  }\n})\n\nexport function Button({\n  children,\n  appearance = 'solid',\n  size = 'md',\n  emphasis = 'subtle',\n  isDisabled = false,\n  onPress,\n  className,\n  ...props\n}: ButtonProps) {\n  return (\n    <AriaButton\n      onPress={onPress}\n      isDisabled={isDisabled}\n      className={cx(button({ appearance, size, emphasis }), className)}\n      {...props}\n    >\n      {children}\n    </AriaButton>\n  )\n}\n","import React from 'react'\n\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\n/**\n * A code component that inherits from Text and renders as a code element\n */\nexport interface CodeProps extends HTMLStyledProps<'code'>, JsxStyleProps {\n  /**\n   * The appearance of the code block\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'ghost'\n}\n\nexport const Code = styled('code', {\n  base: {\n    backgroundColor: 'bg.subtle',\n    textStyle: 'code',\n    px: '050',\n    borderRadius: '050',\n    border: '1px solid'\n  },\n  variants: {\n    appearance: {\n      outline: {\n        borderColor: 'border.subtlest'\n      },\n      ghost: {\n        borderColor: 'transparent'\n      }\n    }\n  },\n  defaultVariants: {\n    appearance: 'outline'\n  }\n}) as React.ForwardRefExoticComponent<CodeProps>\n\nCode.displayName = 'Code'\n","import React from 'react'\n\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * A heading component that uses display styles for titles and section headers\n */\nexport interface HeadingProps extends HTMLStyledProps<'h2'>, JsxStyleProps {\n  /**\n   * The heading level to render\n   * @default 'h2'\n   */\n  as?: HeadingLevel\n  /**\n   * The text style to use for the heading\n   * @default 'display.ui'\n   */\n  textStyle?: Extract<JsxStyleProps['textStyle'], 'display' | `display${string}`>\n}\n\nexport const Heading = styled('h2', {\n  base: {\n    textStyle: 'display.ui'\n  }\n}) as React.ForwardRefExoticComponent<HeadingProps>\n\nHeading.displayName = 'Heading'\n","import type { ElementType } from 'react'\nimport React from 'react'\n\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype AsProp<C extends ElementType> = {\n  as?: C\n}\n\ntype PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P)\n\n/**\n * A foundational text component that is responsive and customizable.\n */\nexport interface TextProps<C extends ElementType = 'span'> {\n  /**\n   * The HTML element or React component to render the Text as\n   * @default 'span'\n   */\n  as?: C\n  /**\n   * Controls the font family, line height, and letter spacing of the text.\n   * @default 'ui'\n   */\n  textStyle?: JsxStyleProps['textStyle']\n  /**\n   * The color of the text\n   * @default 'fg'\n   */\n  color?: Extract<JsxStyleProps['color'], `fg${string}` | 'fg'>\n  /**\n   * The line clamp of the text. Useful for limiting the number of lines of text in a component.\n   * @default 'none'\n   */\n  lineClamp?: JsxStyleProps['lineClamp']\n}\n\nexport type PolymorphicTextProps<C extends ElementType> = TextProps<C> &\n  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, TextProps>> &\n  JsxStyleProps\n\ntype TextComponent = {\n  <C extends ElementType = 'span'>(props: PolymorphicTextProps<C>): React.ReactElement | null\n  displayName?: string\n}\n\nconst StyledText = styled('span', {\n  base: {\n    textStyle: 'ui'\n  }\n})\n\nexport const Text = StyledText as TextComponent\n\nText.displayName = 'Text'\n","import type { ElementType } from 'react'\nimport React from 'react'\n\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype AsProp<C extends ElementType> = {\n  as?: C\n}\n\ntype PropsToOmit<C extends ElementType, P> = keyof (AsProp<C> & P)\n\n/**\n * A foundational layout component that provides a flexible container with sensible defaults.\n */\nexport interface ViewProps<C extends ElementType = 'div'> {\n  /**\n   * The HTML element or React component to render the View as\n   * @default 'div'\n   */\n  as?: C\n  /**\n   * The display property of the View\n   * @default 'flex'\n   */\n  display?: JsxStyleProps['display']\n  /**\n   * The position property of the View\n   * @default 'relative'\n   */\n  position?: JsxStyleProps['position']\n  /**\n   * The flex direction property of the View\n   * @default 'column'\n   */\n  flexDirection?: JsxStyleProps['flexDirection']\n  /**\n   * The flex wrap property of the View\n   * @default 'nowrap'\n   */\n  flexWrap?: JsxStyleProps['flexWrap']\n  /**\n   * The align items property of the View\n   * @default 'stretch'\n   */\n  alignItems?: JsxStyleProps['alignItems']\n  /**\n   * The align self property of the View\n   * @default 'flex-start'\n   */\n  alignSelf?: JsxStyleProps['alignSelf']\n  /**\n   * The align content property of the View\n   * @default 'flex-start'\n   */\n  alignContent?: JsxStyleProps['alignContent']\n  /**\n   * The justify content property of the View\n   * @default 'flex-start'\n   */\n  justifyContent?: JsxStyleProps['justifyContent']\n  /**\n   * The min height property of the View\n   * @default '0'\n   */\n  minHeight?: JsxStyleProps['minHeight']\n  /**\n   * The min width property of the View\n   * @default '0'\n   */\n  minWidth?: JsxStyleProps['minWidth']\n}\n\nexport type PolymorphicViewProps<C extends ElementType> = ViewProps<C> &\n  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, ViewProps>> &\n  JsxStyleProps\n\ntype ViewComponent = {\n  <C extends ElementType = 'div'>(props: PolymorphicViewProps<C>): React.ReactElement | null\n  displayName?: string\n}\n\nconst StyledView = styled('div', {\n  base: {\n    display: 'flex',\n    position: 'relative',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    alignItems: 'stretch',\n    alignContent: 'flex-start',\n    justifyContent: 'flex-start',\n    minHeight: 0,\n    minWidth: 0\n  }\n})\n\nexport const View = StyledView as ViewComponent\n\nView.displayName = 'View'\n"],"mappings":"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","names":["styled","styled","styled"]}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The components for Roadie Design System at Oztix",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -18,7 +25,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@oztix/roadie-core": "^0.1.0",
+    "@oztix/roadie-core": "^0.2.0",
     "react-aria-components": "1.0.0"
   },
   "devDependencies": {