@usetrip/react-ui 0.1.0 → 0.2.1

package/README.md

@@ -0,0 +1,347 @@
+# @usetrip/react-ui
+
+> Shared React component library for the UseTrip platform — built with TypeScript, Tailwind CSS v4, and Radix UI.
+
+Used across `use-trip-web` and future UseTrip projects to keep the design system consistent and maintainable in a single place.
+
+---
+
+## Installation
+
+```bash
+npm install @usetrip/react-ui
+```
+
+Then import the library's CSS in your app's entry stylesheet (required for `CustomEditor` toolbar styles):
+
+```css
+@import "@usetrip/react-ui/dist/react-ui.css";
+```
+
+And add the Tailwind `@source` directive so the library's class names are included in your CSS bundle:
+
+```css
+@source "../node_modules/@usetrip/react-ui/dist";
+```
+
+---
+
+## Usage
+
+### Per-component imports (recommended — best tree shaking)
+
+```tsx
+import Button from '@usetrip/react-ui/Button'
+import Typography from '@usetrip/react-ui/Typography'
+import TextField from '@usetrip/react-ui/TextField'
+```
+
+### Barrel import (convenient for multiple components)
+
+```tsx
+import { Button, Typography, TextField } from '@usetrip/react-ui'
+```
+
+Both styles are fully supported. The library ships with `"sideEffects": false` so unused components are always tree-shaken by your bundler.
+
+---
+
+## Components
+
+### `Button`
+
+A versatile button component with multiple variants, sizes, loading state, and icon support.
+
+```tsx
+import Button from '@usetrip/react-ui/Button'
+
+<Button variant="primary" size="md">Save Trip</Button>
+<Button variant="destructive" isLoading>Deleting...</Button>
+<Button variant="outline" startIcon={<Plus />}>Add Location</Button>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `primary` \| `secondary` \| `destructive` \| `outline` \| `ghost` \| `link` | `primary` | Visual style |
+| `size` | `sm` \| `md` \| `lg` \| `full` \| `icon` | `md` | Button size |
+| `rounded` | `default` \| `full` \| `none` | `default` | Border radius |
+| `isLoading` | `boolean` | `false` | Shows spinner, disables interaction |
+| `startIcon` | `ReactNode` | — | Icon before label |
+| `endIcon` | `ReactNode` | — | Icon after label |
+| `asChild` | `boolean` | `false` | Renders as child element (Radix Slot) |
+
+---
+
+### `ButtonLink`
+
+Same variants as `Button`, but renders a `react-router-dom` `<Link>` for client-side navigation.
+
+```tsx
+import ButtonLink from '@usetrip/react-ui/ButtonLink'
+
+<ButtonLink to="/trips" variant="outline">View All Trips</ButtonLink>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `to` | `To` (react-router-dom) | Navigation target |
+| `variant` / `size` / `rounded` | same as Button | Visual props |
+
+---
+
+### `TextField`
+
+Controlled text input with label, hint text, validation states, and password toggle.
+
+```tsx
+import TextField from '@usetrip/react-ui/TextField'
+
+<TextField
+  label="Email"
+  type="email"
+  placeholder="you@example.com"
+  value={email}
+  onChange={setEmail}
+/>
+
+<TextField
+  label="Password"
+  type="password"
+  state="error"
+  hintText="Password must be at least 8 characters"
+  value={password}
+  onChange={setPassword}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Input label |
+| `type` | `text` \| `password` \| `email` \| `number` \| `date` | `text` | Input type |
+| `state` | `default` \| `warning` \| `error` | `default` | Validation state |
+| `hintText` | `string` | — | Helper or error message below input |
+| `value` | `string` | — | Controlled value |
+| `onChange` | `(value: string) => void` | — | Change handler |
+| `disabled` | `boolean` | `false` | Disables the input |
+
+---
+
+### `Typography`
+
+Semantic text component with consistent sizing, weight, and line-height tokens.
+
+```tsx
+import Typography from '@usetrip/react-ui/Typography'
+
+<Typography variant="h1">Plan your trip</Typography>
+<Typography variant="body2" className="text-gray-500">10 days in Japan</Typography>
+<Typography as="span" variant="caption">Last updated today</Typography>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `h1` \| `h2` \| `h3` \| `h4` \| `h5` \| `body1` \| `body2` \| `caption` \| `label` \| `button` | `body1` | Typography style |
+| `as` | `ElementType` | inferred from variant | HTML element to render |
+| `className` | `string` | — | Additional classes |
+
+---
+
+### `AlertBox`
+
+Inline feedback banners for success, error, warning, info, or default states.
+
+```tsx
+import AlertBox from '@usetrip/react-ui/AlertBox'
+
+<AlertBox type="success" message="Trip saved successfully!" />
+<AlertBox type="error" message="Something went wrong. Please try again." />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `default` \| `info` \| `warning` \| `error` \| `success` | Alert style |
+| `message` | `string` | Message text |
+
+---
+
+### `SearchInput`
+
+Search field with a built-in search icon, available in multiple sizes and variants.
+
+```tsx
+import SearchInput from '@usetrip/react-ui/SearchInput'
+
+<SearchInput
+  size="md"
+  placeholder="Search destinations..."
+  value={query}
+  onChange={(e) => setQuery(e.target.value)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `sm` \| `md` \| `lg` \| `full` | `md` | Controls width and height |
+| `variant` | `default` \| `compact` | `default` | Border radius style |
+| `placeholder` | `string` | `"Digite..."` | Placeholder text |
+
+---
+
+### `CalendarInput`
+
+Read-only date display field that triggers a calendar picker when clicked.
+
+```tsx
+import CalendarInput from '@usetrip/react-ui/CalendarInput'
+
+<CalendarInput
+  label="Check-in"
+  value={date ? format(date, 'dd/MM/yyyy') : ''}
+  onClick={() => setPickerOpen(true)}
+  state="error"
+  hintText="Required field"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Input label |
+| `value` | `string` | — | Formatted date string to display |
+| `placeholder` | `string` | `"Selecione uma data"` | Shown when no value |
+| `state` | `default` \| `warning` \| `error` | `default` | Validation state |
+| `hintText` | `string` | — | Helper or error message |
+| `compact` | `boolean` | `false` | Reduces spacing for dense layouts |
+| `onClick` | `() => void` | — | Opens the date picker |
+
+---
+
+### `InputCounter`
+
+Increment/decrement counter with label, hint text, and minimum value enforcement.
+
+```tsx
+import InputCounter from '@usetrip/react-ui/InputCounter'
+
+<InputCounter
+  label="Adults"
+  value={adults}
+  onIncrement={() => setAdults(adults + 1)}
+  onDecrement={() => setAdults(adults - 1)}
+  minValue={1}
+  hintText="Ages 18+"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Counter label |
+| `value` | `number` | — | Current count |
+| `onIncrement` | `() => void` | — | Called when + is pressed |
+| `onDecrement` | `() => void` | — | Called when − is pressed |
+| `minValue` | `number` | `0` | Disables decrement at this value |
+| `hintText` | `string` | — | Helper text below counter |
+| `compact` | `boolean` | `false` | Reduces padding for dense layouts |
+
+---
+
+### `RangeDatePicker`
+
+Modal date range picker with dual-month calendar, navigation, and confirm/cancel/reset actions.
+
+```tsx
+import RangeDatePicker from '@usetrip/react-ui/RangeDatePicker'
+import type { DateRange } from 'react-day-picker'
+
+const [range, setRange] = useState<DateRange | undefined>()
+
+<RangeDatePicker
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={(range) => { setRange(range); setIsOpen(false) }}
+  initialRange={range}
+  minDate={new Date()}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | `boolean` | Controls dialog visibility |
+| `onClose` | `() => void` | Called when dialog is closed |
+| `onSelect` | `(range: DateRange \| undefined) => void` | Called when selection is confirmed |
+| `initialRange` | `DateRange` | Pre-selected range |
+| `minDate` | `Date` | Disables dates before this date |
+
+---
+
+### `CustomEditor`
+
+WYSIWYG rich text editor with a fixed toolbar (bold, italic, underline, strikethrough, ordered list, bullet list). Value is stored as an HTML string.
+
+```tsx
+import CustomEditor from '@usetrip/react-ui/CustomEditor'
+import type { ContentEditableEvent } from 'react-simple-wysiwyg'
+
+<CustomEditor
+  value={content}
+  onChange={(e: ContentEditableEvent) => setContent(e.target.value)}
+  placeholder="Describe your trip..."
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | HTML string content |
+| `onChange` | `(e: ContentEditableEvent) => void` | Change handler |
+| `placeholder` | `string` | Placeholder when empty |
+| `containerProps` | `ComponentProps<"div">` | Props for the outer container |
+
+> **Security:** Always sanitize the HTML string with [DOMPurify](https://github.com/cure53/DOMPurify) before rendering it with `dangerouslySetInnerHTML`.
+
+---
+
+## Peer Dependencies
+
+The library does not bundle these — your project must have them installed:
+
+```bash
+npm install react react-dom react-router-dom
+npm install @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot
+npm install tailwindcss class-variance-authority clsx tailwind-merge
+npm install lucide-react react-icons
+npm install date-fns react-day-picker
+npm install react-simple-wysiwyg
+```
+
+---
+
+## Development
+
+Clone the repo and start the playground to develop and test components interactively:
+
+```bash
+git clone https://github.com/UseTrip/use-trip-web-ui.git
+cd use-trip-web-ui
+npm install
+npm run dev       # starts playground at localhost:5173
+npm run build     # bundles library to dist/
+```
+
+The playground (`src/playground/`) has a dedicated page for each component with live examples. Changes to component source are hot-reloaded instantly.
+
+---
+
+## Publishing
+
+```bash
+npm run build
+npm publish --access public
+```
+
+Bump the version in `package.json` before publishing (`0.x.0` for new features, `0.0.x` for patches).
+
+---
+
+## Repository
+
+- **npm**: [@usetrip/react-ui](https://www.npmjs.com/package/@usetrip/react-ui)
+- **GitHub**: [UseTrip/use-trip-web-ui](https://github.com/UseTrip/use-trip-web-ui)

package/dist/AlertBox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/AlertBox-b6dgMZ5I.cjs");exports.AlertBox=e.AlertBox;exports.default=e.AlertBox;

package/dist/AlertBox.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare function AlertBox({ message, type, className }: Readonly<AlertBoxProps>): JSX.Element;
+export { AlertBox }
+export default AlertBox;
+
+declare type AlertBoxProps = {
+    message: string;
+    type?: AlertType;
+    className?: string;
+};
+
+declare type AlertType = 'default' | 'info' | 'warning' | 'error' | 'success';
+
+export { }

package/dist/AlertBox.js

@@ -0,0 +1,5 @@
+import { A as o, A as r } from "./chunks/AlertBox-TM5iLIH2.js";
+export {
+  o as AlertBox,
+  r as default
+};

package/dist/Button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./chunks/Button-DjizmSRN.cjs");exports.Button=t.Button;exports.buttonVariants=t.buttonVariants;exports.default=t.Button;

package/dist/Button.d.ts

@@ -0,0 +1,22 @@
+import { ClassProp } from 'class-variance-authority/types';
+import * as React_2 from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+export { Button }
+export default Button;
+
+export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    isLoading?: boolean;
+    startIcon?: React_2.ReactNode;
+    endIcon?: React_2.ReactNode;
+}
+
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "md" | "full" | "icon" | null | undefined;
+    rounded?: "default" | "none" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/Button.js

@@ -0,0 +1,6 @@
+import { B as o, b as s, B as n } from "./chunks/Button-C2ZQLgBk.js";
+export {
+  o as Button,
+  s as buttonVariants,
+  n as default
+};

package/dist/ButtonLink.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./chunks/ButtonLink-C1BjiV2m.cjs");exports.ButtonLink=t.ButtonLink;exports.buttonLinkVariants=t.buttonLinkVariants;exports.default=t.ButtonLink;

package/dist/ButtonLink.d.ts

@@ -0,0 +1,25 @@
+import { ClassProp } from 'class-variance-authority/types';
+import * as React_2 from 'react';
+import { To } from 'react-router-dom';
+import { VariantProps } from 'class-variance-authority';
+
+declare const ButtonLink: React_2.ForwardRefExoticComponent<ButtonLinkProps & React_2.RefAttributes<HTMLAnchorElement>>;
+export { ButtonLink }
+export default ButtonLink;
+
+export declare interface ButtonLinkProps extends Omit<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, VariantProps<typeof buttonLinkVariants> {
+    asChild?: boolean;
+    isLoading?: boolean;
+    startIcon?: React_2.ReactNode;
+    endIcon?: React_2.ReactNode;
+    to: To;
+    external?: boolean;
+}
+
+export declare const buttonLinkVariants: (props?: ({
+    variant?: "primary" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "md" | "full" | "icon" | null | undefined;
+    rounded?: "default" | "none" | "full" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/ButtonLink.js

@@ -0,0 +1,6 @@
+import { B as n, b as o, B as s } from "./chunks/ButtonLink-CG6S2pym.js";
+export {
+  n as ButtonLink,
+  o as buttonLinkVariants,
+  s as default
+};

package/dist/CalendarInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/CalendarInput-CPV0f1Gl.cjs");exports.CalendarInput=e.CalendarInput;exports.default=e.CalendarInput;

package/dist/CalendarInput.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare function CalendarInput({ label, value, placeholder, onClick, onFocus, className, state, hintText, compact, }: CalendarInputProps): JSX.Element;
+export { CalendarInput }
+export default CalendarInput;
+
+declare interface CalendarInputProps {
+    label: string;
+    value: string;
+    placeholder?: string;
+    onClick?: () => void;
+    onFocus?: () => void;
+    className?: string;
+    state?: 'warning' | 'error' | 'default';
+    hintText?: string;
+    compact?: boolean;
+}
+
+export { }

package/dist/CalendarInput.js

@@ -0,0 +1,5 @@
+import { C as r, C as t } from "./chunks/CalendarInput-CxvAV7hK.js";
+export {
+  r as CalendarInput,
+  t as default
+};

package/dist/CustomEditor.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./chunks/CustomEditor-BW_Mgv0y.cjs");exports.CustomEditor=t.CustomEditor;exports.default=t.CustomEditor;

package/dist/CustomEditor.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { ContentEditableEvent } from 'react-simple-wysiwyg';
+import { JSX } from 'react/jsx-runtime';
+
+declare function CustomEditor({ value, onChange, placeholder, containerProps }: CustomEditorProps): JSX.Element;
+export { CustomEditor }
+export default CustomEditor;
+
+declare type CustomEditorProps = Readonly<{
+    value: string;
+    onChange: (e: ContentEditableEvent) => void;
+    placeholder?: string;
+    containerProps?: ComponentProps<'div'>;
+}>;
+
+export { }

package/dist/CustomEditor.js

@@ -0,0 +1,5 @@
+import { C as a, C as r } from "./chunks/CustomEditor-q2MqCUUF.js";
+export {
+  a as CustomEditor,
+  r as default
+};

package/dist/InputCounter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/InputCounter-srYivV6j.cjs");exports.InputCounter=e.InputCounter;exports.default=e.InputCounter;

package/dist/InputCounter.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare function InputCounter({ label, value, onIncrement, onDecrement, minValue, className, hintText, compact, }: InputCounterProps): JSX.Element;
+export { InputCounter }
+export default InputCounter;
+
+declare interface InputCounterProps {
+    label: string;
+    value: number;
+    onIncrement: () => void;
+    onDecrement: () => void;
+    minValue?: number;
+    className?: string;
+    hintText?: string;
+    compact?: boolean;
+}
+
+export { }

package/dist/InputCounter.js

@@ -0,0 +1,5 @@
+import { I as e, I as o } from "./chunks/InputCounter-6ZYoaiaX.js";
+export {
+  e as InputCounter,
+  o as default
+};

package/dist/RangeDatePicker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/RangeDatePicker-CoEU93mq.cjs");exports.RangeDatePicker=e.RangeDatePicker;exports.default=e.RangeDatePicker;

package/dist/RangeDatePicker.d.ts

@@ -0,0 +1,17 @@
+import { DateRange } from 'react-day-picker';
+import { JSX } from 'react/jsx-runtime';
+
+declare function RangeDatePicker({ isOpen, onClose, onSelect, initialRange, focusedField, minDate, }: RangeDatePickerProps): JSX.Element;
+export { RangeDatePicker }
+export default RangeDatePicker;
+
+declare interface RangeDatePickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect: (range: DateRange | undefined) => void;
+    initialRange?: DateRange;
+    focusedField?: 'start' | 'end' | null;
+    minDate?: Date;
+}
+
+export { }

package/dist/RangeDatePicker.js

@@ -0,0 +1,5 @@
+import { R as r, R as t } from "./chunks/RangeDatePicker-DwccOp_Y.js";
+export {
+  r as RangeDatePicker,
+  t as default
+};

package/dist/SearchInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/SearchInput-Dp1Q72Co.cjs");exports.SearchInput=e.SearchInput;exports.default=e.SearchInput;

package/dist/SearchInput.d.ts

@@ -0,0 +1,15 @@
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+declare const SearchInput: ForwardRefExoticComponent<SearchInputProps & RefAttributes<HTMLInputElement>>;
+export { SearchInput }
+export default SearchInput;
+
+declare interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    placeholder?: string;
+    variant?: 'default' | 'compact';
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    className?: string;
+}
+
+export { }

package/dist/SearchInput.js

@@ -0,0 +1,5 @@
+import { S as r, S as t } from "./chunks/SearchInput-5J5H9Yfv.js";
+export {
+  r as SearchInput,
+  t as default
+};

package/dist/TextField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/TextField-Dr3vhUtA.cjs");exports.TextField=e.TextField;exports.default=e.TextField;

package/dist/TextField.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare type AutoCompleteTypes = 'off' | 'on' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'url' | 'photo';
+
+declare function TextField({ label, placeholder, type, state, hintText, value, onChange, required, disabled, id, className, size, autoComplete, autoCapitalize, compact, }: TextFieldProps): JSX.Element;
+export { TextField }
+export default TextField;
+
+declare type TextFieldProps = {
+    label?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'date';
+    state?: 'warning' | 'error' | 'default';
+    hintText?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    autoComplete?: AutoCompleteTypes | string;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    compact?: boolean;
+};
+
+export { }

package/dist/TextField.js

@@ -0,0 +1,5 @@
+import { T as t, T } from "./chunks/TextField-DX6eZufy.js";
+export {
+  t as TextField,
+  T as default
+};

package/dist/Typography.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./chunks/Typography-CTDehHO_.cjs");exports.Typography=e.Typography;exports.default=e.Typography;

package/dist/Typography.d.ts

@@ -0,0 +1,25 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+
+export declare type ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';
+
+declare const Typography: ({ className, variant, color, align, transform, weight, size, as, ...props }: TypographyProps) => JSX.Element;
+export { Typography }
+export default Typography;
+
+export declare interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof typographyVariantStyles> {
+    as?: ElementType;
+}
+
+declare const typographyVariantStyles: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "body1" | "body2" | "caption" | "label" | "button" | null | undefined;
+    color?: "default" | "muted" | "white" | "primary" | "success" | "warning" | "danger" | null | undefined;
+    align?: "left" | "center" | "right" | "justify" | null | undefined;
+    transform?: "uppercase" | "lowercase" | "capitalize" | "normal" | null | undefined;
+    weight?: "normal" | "light" | "medium" | "semibold" | "bold" | "extrabold" | null | undefined;
+    size?: "4xl" | "3xl" | "2xl" | "xs" | "sm" | "base" | "lg" | "xl" | "5xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export { }

package/dist/Typography.js

@@ -0,0 +1,5 @@
+import { T as p, T as r } from "./chunks/Typography-B892BQsd.js";
+export {
+  p as Typography,
+  r as default
+};