@oztix/roadie-components 0.2.1 → 1.1.0

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,121 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Text } from './index'
+
+describe('Text', () => {
+  it('renders with default props', () => {
+    const { getByText } = render(<Text>Hello World</Text>)
+    const text = getByText('Hello World')
+    expect(text).toBeInTheDocument()
+    expect(text.tagName.toLowerCase()).toBe('span')
+    expect(text).toHaveClass('text', 'text--emphasis_default')
+  })
+
+  it('applies textStyle prop', () => {
+    const { getByText } = render(<Text textStyle='heading.1'>Large Text</Text>)
+    const text = getByText('Large Text')
+    expect(text).toHaveClass('textStyle_heading.1')
+  })
+
+  it('renders with custom element type', () => {
+    const { getByText } = render(<Text as='p'>Paragraph Text</Text>)
+    const element = getByText('Paragraph Text')
+    expect(element.tagName.toLowerCase()).toBe('p')
+  })
+
+  it('renders with different emphasis', () => {
+    const { rerender, getByText } = render(
+      <Text emphasis='strong'>Strong Text</Text>
+    )
+    let text = getByText('Strong Text')
+    expect(text).toHaveClass('text--emphasis_strong')
+
+    rerender(<Text emphasis='subtle'>Subtle Text</Text>)
+    text = getByText('Subtle Text')
+    expect(text).toHaveClass('text--emphasis_subtle')
+
+    rerender(<Text emphasis='subtler'>subtler Text</Text>)
+    text = getByText('subtler Text')
+    expect(text).toHaveClass('text--emphasis_subtler')
+
+    rerender(<Text emphasis='default'>Default Text</Text>)
+    text = getByText('Default Text')
+    expect(text).toHaveClass('text--emphasis_default')
+  })
+
+  it('renders with different color palettes', () => {
+    const { rerender, getByText } = render(
+      <Text colorPalette='accent'>Accent Text</Text>
+    )
+    let text = getByText('Accent Text')
+    expect(text).toHaveClass('color-palette_accent')
+
+    rerender(<Text colorPalette='brand'>Brand Text</Text>)
+    text = getByText('Brand Text')
+    expect(text).toHaveClass('color-palette_brand')
+
+    rerender(<Text colorPalette='success'>Success Text</Text>)
+    text = getByText('Success Text')
+    expect(text).toHaveClass('color-palette_success')
+
+    rerender(<Text colorPalette='warning'>Warning Text</Text>)
+    text = getByText('Warning Text')
+    expect(text).toHaveClass('color-palette_warning')
+
+    rerender(<Text colorPalette='danger'>Danger Text</Text>)
+    text = getByText('Danger Text')
+    expect(text).toHaveClass('color-palette_danger')
+  })
+
+  it('applies interactive styles', () => {
+    const { getByText } = render(<Text interactive>Interactive Text</Text>)
+    const text = getByText('Interactive Text')
+    expect(text).toHaveClass('text--interactive_true')
+  })
+
+  it('applies line clamp prop', () => {
+    const { getByText } = render(
+      <Text lineClamp={2}>Multi-line text that should be clamped</Text>
+    )
+    const text = getByText('Multi-line text that should be clamped')
+    expect(text).toHaveClass('lc_2')
+  })
+
+  it('forwards additional HTML attributes', () => {
+    const { getByTestId } = render(
+      <Text data-testid='text' title='tooltip' aria-label='Accessible text'>
+        Text with attributes
+      </Text>
+    )
+    const text = getByTestId('text')
+    expect(text).toHaveClass('text')
+    expect(text).toHaveAttribute('title', 'tooltip')
+    expect(text).toHaveAttribute('aria-label', 'Accessible text')
+  })
+
+  it('combines multiple props', () => {
+    const { getByText } = render(
+      <Text
+        textStyle='heading.2'
+        emphasis='strong'
+        colorPalette='accent'
+        interactive
+        lineClamp={2}
+        className='custom-class'
+      >
+        Styled Text
+      </Text>
+    )
+    const text = getByText('Styled Text')
+    expect(text).toHaveClass(
+      'text',
+      'text--emphasis_strong',
+      'text--interactive_true',
+      'textStyle_heading.2',
+      'color-palette_accent',
+      'lc_2',
+      'custom-class'
+    )
+  })
+})

package/src/components/Text/index.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react'
+
+import { ark } from '@ark-ui/react/factory'
+
+import type { ColorPalette } from '@oztix/roadie-core'
+import { styled } from '@oztix/roadie-core/jsx'
+import type { HTMLStyledProps } from '@oztix/roadie-core/jsx'
+import { type TextVariantProps, text } from '@oztix/roadie-core/recipes'
+
+/**
+ * Text component for displaying content with various styling options
+ */
+export interface TextProps extends HTMLStyledProps<'span'> {
+  /**
+   * The visual emphasis of the text
+   * @default 'default'
+   */
+  emphasis?: TextVariantProps['emphasis']
+
+  /**
+   * Whether the text is interactive
+   * @default false
+   */
+  interactive?: TextVariantProps['interactive']
+
+  /**
+   * The HTML element to render the text as
+   * @default 'span'
+   */
+  as?: HTMLStyledProps<'span'>['as']
+
+  /**
+   * The color palette to use for the text
+   * @default 'neutral'
+   */
+  colorPalette?: ColorPalette
+
+  /**
+   * When true, the component will pass props to its child component
+   */
+  asChild?: boolean
+
+  /**
+   * The content to display
+   */
+  children?: ReactNode
+}
+
+export const Text = styled(
+  ark.span,
+  text
+) as React.ForwardRefExoticComponent<TextProps>
+
+Text.displayName = 'Text'

package/src/components/View/View.test.tsx

@@ -0,0 +1,161 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { View } from './index'
+
+describe('View', () => {
+  it('renders with default props', () => {
+    const { getByTestId } = render(<View data-testid='view'>Content</View>)
+    const view = getByTestId('view')
+    expect(view).toBeInTheDocument()
+    expect(view.tagName.toLowerCase()).toBe('div')
+    expect(view).toHaveClass(
+      'd_flex',
+      'pos_relative',
+      'flex-d_column',
+      'flex-wrap_nowrap',
+      'ai_stretch',
+      'ac_flex-start',
+      'jc_flex-start',
+      'min-h_0',
+      'min-w_0'
+    )
+  })
+
+  it('renders with different HTML elements', () => {
+    const elements: Array<'section' | 'article' | 'aside' | 'main'> = [
+      'section',
+      'article',
+      'aside',
+      'main'
+    ]
+
+    elements.forEach((element) => {
+      const { rerender, getByTestId } = render(
+        <View as={element} data-testid='view'>
+          {element} content
+        </View>
+      )
+      const view = getByTestId('view')
+      expect(view.tagName.toLowerCase()).toBe(element)
+      expect(view).toHaveClass(
+        'd_flex',
+        'pos_relative',
+        'flex-d_column',
+        'flex-wrap_nowrap',
+        'ai_stretch',
+        'ac_flex-start',
+        'jc_flex-start',
+        'min-h_0',
+        'min-w_0'
+      )
+      rerender(<></>)
+    })
+  })
+
+  it('applies layout properties', () => {
+    const { getByTestId } = render(
+      <View
+        data-testid='view'
+        display='inline-flex'
+        position='absolute'
+        flexDirection='row'
+        flexWrap='wrap'
+        alignItems='center'
+        alignContent='center'
+        justifyContent='center'
+      >
+        Styled View
+      </View>
+    )
+    const view = getByTestId('view')
+    expect(view).toHaveClass(
+      'd_inline-flex',
+      'pos_absolute',
+      'flex-d_row',
+      'flex-wrap_wrap',
+      'ai_center',
+      'ac_center',
+      'jc_center',
+      'min-h_0',
+      'min-w_0'
+    )
+  })
+
+  it('applies custom styles and attributes', () => {
+    const { getByTestId } = render(
+      <View
+        data-testid='view'
+        backgroundColor='neutral.bg.subtle'
+        padding='200'
+        title='tooltip'
+        aria-label='Accessible view'
+      >
+        Custom View
+      </View>
+    )
+    const view = getByTestId('view')
+    expect(view).toHaveClass('bg-c_neutral.bg.subtle', 'p_200')
+    expect(view).toHaveAttribute('title', 'tooltip')
+    expect(view).toHaveAttribute('aria-label', 'Accessible view')
+  })
+
+  it('renders nested views', () => {
+    const { getByTestId } = render(
+      <View data-testid='parent'>
+        <View data-testid='child'>Nested Content</View>
+      </View>
+    )
+    const parent = getByTestId('parent')
+    const child = getByTestId('child')
+    expect(parent).toContainElement(child)
+    expect(child).toHaveTextContent('Nested Content')
+    expect(parent).toHaveClass(
+      'd_flex',
+      'pos_relative',
+      'flex-d_column',
+      'flex-wrap_nowrap',
+      'ai_stretch',
+      'ac_flex-start',
+      'jc_flex-start',
+      'min-h_0',
+      'min-w_0'
+    )
+    expect(child).toHaveClass(
+      'd_flex',
+      'pos_relative',
+      'flex-d_column',
+      'flex-wrap_nowrap',
+      'ai_stretch',
+      'ac_flex-start',
+      'jc_flex-start',
+      'min-h_0',
+      'min-w_0'
+    )
+  })
+
+  it('combines multiple props', () => {
+    const { getByTestId } = render(
+      <View
+        as='section'
+        display='grid'
+        gap='200'
+        padding='400'
+        backgroundColor='neutral.bg.subtle'
+        className='custom-class'
+        data-testid='view'
+      >
+        Combined styles
+      </View>
+    )
+    const view = getByTestId('view')
+    expect(view.tagName.toLowerCase()).toBe('section')
+    expect(view).toHaveClass(
+      'd_grid',
+      'gap_200',
+      'p_400',
+      'bg-c_neutral.bg.subtle',
+      'custom-class'
+    )
+  })
+})

package/src/components/View/index.tsx

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

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export { Button } from './Button'
+export type { ButtonProps } from './Button'
+
+export { Code } from './Code'
+export type { CodeProps } from './Code'
+
+export { Heading } from './Heading'
+export type { HeadingProps } from './Heading'
+
+export { Text } from './Text'
+export type { TextProps } from './Text'
+
+export { View } from './View'
+export type { ViewProps } from './View'

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useColorMode'

package/src/hooks/useColorMode.ts

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from 'react'
+
+import {
+  type ColorMode,
+  getColorMode,
+  subscribeToColorMode
+} from '@oztix/roadie-core'
+
+/**
+ * React hook that subscribes to color mode changes.
+ * Listens to both localStorage changes and custom colormodechange events.
+ *
+ * @returns The current color mode ('light' or 'dark')
+ *
+ * @example
+ * ```tsx
+ * import { useColorMode } from '@oztix/roadie-components'
+ * import { toggleColorMode } from '@oztix/roadie-core'
+ *
+ * function ColorModeToggle() {
+ *   const colorMode = useColorMode()
+ *
+ *   return (
+ *     <button onClick={() => toggleColorMode()}>
+ *       Current mode: {colorMode}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useColorMode(): ColorMode {
+  return useSyncExternalStore(
+    subscribeToColorMode,
+    getColorMode,
+    () => 'light' // Server snapshot
+  )
+}

package/src/index.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom/vitest'
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Button, Code, Heading, Text, View } from './index'
+
+describe('Component exports', () => {
+  it('exports Button component', () => {
+    expect(Button).toBeDefined()
+    const { container } = render(<Button>Test</Button>)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('exports Code component', () => {
+    expect(Code).toBeDefined()
+    const { container } = render(<Code>Test</Code>)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('exports Heading component', () => {
+    expect(Heading).toBeDefined()
+    const { container } = render(<Heading>Test</Heading>)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('exports Text component', () => {
+    expect(Text).toBeDefined()
+    const { container } = render(<Text>Test</Text>)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('exports View component', () => {
+    expect(View).toBeDefined()
+    const { container } = render(<View>Test</View>)
+    expect(container).toBeInTheDocument()
+  })
+})

package/src/index.tsx

@@ -0,0 +1,5 @@
+export * from './components/Button'
+export * from './components/Code'
+export * from './components/Heading'
+export * from './components/Text'
+export * from './components/View'

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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,9 +0,0 @@
-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

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