@oztix/roadie-components 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,9 +1,9 @@
-"use client";
+import { Button as Button$1 } from 'react-aria-components';
+import { cva, cx } from '@oztix/roadie-core/css';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { styled } from '@oztix/roadie-core/jsx';
 
-// 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",
@@ -376,7 +376,7 @@ function Button({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    AriaButton,
+    Button$1,
     {
       onPress,
       isDisabled,
@@ -386,10 +386,6 @@ function Button({
     }
   );
 }
-
-// src/components/Code/index.tsx
-import "react";
-import { styled } from "@oztix/roadie-core/jsx";
 var Code = styled("code", {
   base: {
     backgroundColor: "bg.subtle",
@@ -413,32 +409,20 @@ var Code = styled("code", {
   }
 });
 Code.displayName = "Code";
-
-// src/components/Heading/index.tsx
-import "react";
-import { styled as styled2 } from "@oztix/roadie-core/jsx";
-var Heading = styled2("h2", {
+var Heading = styled("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", {
+var StyledText = styled("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", {
+var StyledView = styled("div", {
   base: {
     display: "flex",
     position: "relative",
@@ -453,11 +437,7 @@ var StyledView = styled4("div", {
 });
 var View = StyledView;
 View.displayName = "View";
-export {
-  Button,
-  Code,
-  Heading,
-  Text,
-  View
-};
+
+export { Button, Code, Heading, Text, View };
+//# 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":["../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"],"names":["styled"],"mappings":"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","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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The components for Roadie Design System at Oztix",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,6 +52,12 @@
       ]
     }
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
     "build": "tsup",
     "clean": "rm -rf node_modules dist",