@oztix/roadie-components 0.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2024 Ticket Solutions Pty Ltd
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+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 };

package/dist/index.js

@@ -0,0 +1,463 @@
+"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
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@oztix/roadie-components",
+  "version": "0.1.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",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@oztix/roadie-core": "^0.1.0",
+    "react-aria-components": "1.0.0"
+  },
+  "devDependencies": {
+    "@pandacss/dev": "0.48.1",
+    "@testing-library/jest-dom": "6.1.6",
+    "@testing-library/react": "15.0.0",
+    "@testing-library/user-event": "14.5.1",
+    "@types/node": "22.10.2",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-v8": "1.6.0",
+    "@vitest/ui": "1.6.0",
+    "jsdom": "24.1.3",
+    "tsup": "8.0.0",
+    "typescript": "5.7.2",
+    "vitest": "1.6.0"
+  },
+  "author": {
+    "name": "Luke Brooker",
+    "email": "mail@lukebrooker.com"
+  },
+  "license": "ISC",
+  "turbo": {
+    "build": {
+      "dependsOn": [
+        "^build"
+      ],
+      "outputs": [
+        "dist/**"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf node_modules dist",
+    "dev": "tsup --watch",
+    "pretest": "panda codegen",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "format": "prettier --ignore-path ../../.prettierignore --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --ignore-path ../../.prettierignore --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "lint": "eslint --ignore-path ../../.eslintignore . --ext .ts,.tsx",
+    "lint:fix": "eslint --ignore-path ../../.eslintignore . --ext .ts,.tsx --fix",
+    "typecheck": "tsc --noEmit"
+  }
+}