@pickle-ui/react 0.0.0-stage → 1.0.0-beta.4

package/README.md

@@ -1,3 +1,491 @@
-# Temporary Holding Version
+# Pickle UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React component library built with Base UI and Tailwind CSS v4.
+
+Browse every component in the [Storybook](https://ugogo.github.io/pickle-ui/).
+
+## Use Pickle UI
+
+Install Pickle with its peer dependencies. React Hook Form is only used by
+the `Form` components, but it is declared as a peer so your package manager
+expects it:
+
+```bash
+pnpm add @pickle-ui/react tailwindcss react-hook-form
+```
+
+Pickle requires Tailwind CSS v4 and React 18 or 19.
+
+To match Pickle's Storybook typography, install Geist and JetBrains Mono:
+
+```bash
+pnpm add @fontsource-variable/geist @fontsource/jetbrains-mono
+```
+
+Then load the fonts and your application stylesheet from the application entry
+point:
+
+```tsx
+import '@fontsource-variable/geist/wght.css';
+import '@fontsource/jetbrains-mono/latin-400.css';
+import './app.css';
+```
+
+Create `app.css`:
+
+```css
+@import 'tailwindcss';
+@import '@pickle-ui/react/styles.css';
+
+@theme {
+  --font-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-sans);
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    @apply font-sans antialiased;
+  }
+}
+```
+
+The font packages are optional. Omit their imports and the `@theme` block to
+use Tailwind's system font stacks.
+
+You do not need to add Pickle to your Tailwind `@source` list: the stylesheet
+declares its own component sources, so every class Pickle uses is generated
+alongside yours.
+
+Import components from `@pickle-ui/react`:
+
+```tsx
+import { Button } from '@pickle-ui/react';
+
+export function App() {
+  return <Button>Click me</Button>;
+}
+```
+
+For smaller bundles, import only the components you need via subpath exports:
+
+```tsx
+import { Button } from '@pickle-ui/react/button';
+import { Form } from '@pickle-ui/react/form';
+```
+
+Subpaths use the same named exports as the root entry (for example `Button` from
+`@pickle-ui/react/button`, not a default export).
+
+| Subpath                                                | Exports                                                                                                |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `@pickle-ui/react/alert`                               | `Alert` with `Icon`, `Title`, `Description`, `Action`                                                  |
+| `@pickle-ui/react/alert-dialog`                        | `AlertDialog` with `Trigger`, `Content`, `Header`, `Title`, `Description`, `Footer`, `Close`           |
+| `@pickle-ui/react/avatar`                              | `Avatar` with `Image`, `Fallback`, `Group`                                                             |
+| `@pickle-ui/react/badge`                               | `Badge`, `badgeVariants`                                                                               |
+| `@pickle-ui/react/button`                              | `Button`, `buttonVariants`                                                                             |
+| `@pickle-ui/react/card`                                | `Card` with `Header`, `Title`, `Description`, `Action`, `Content`, `Footer`                            |
+| `@pickle-ui/react/checkbox`                            | `Checkbox` with `Label`                                                                                |
+| `@pickle-ui/react/color-picker`                        | `ColorPicker` with `Trigger`, `Content`, `Area`, `HueSlider`, `AlphaSlider`, `Swatch`, `Input`, …      |
+| `@pickle-ui/react/combobox`                            | `Combobox` with `Input`, `Content`, `List`, `Item`, `Chips`, …                                         |
+| `@pickle-ui/react/dialog`                              | `Dialog` with `Trigger`, `Content`, `Header`, `Title`, `Description`, `Footer`, `Close`                |
+| `@pickle-ui/react/flex`, `@pickle-ui/react/grid`       | `Flex`, `Grid` layout primitives                                                                       |
+| `@pickle-ui/react/x-stack`, `@pickle-ui/react/y-stack` | `XStack`, `YStack` row and column shorthands                                                           |
+| `@pickle-ui/react/form`                                | `Form` with `Field`, `Label`, `Description`, `Error`, `Button` and every React Hook Form-bound control |
+| `@pickle-ui/react/group`                               | `Group` with `Separator`, `Text`, for attached button and input groups                                 |
+| `@pickle-ui/react/input`                               | `Input`                                                                                                |
+| `@pickle-ui/react/input-group`                         | `InputGroup` with `Input`, `Addon`, `Button`, `Text`                                                   |
+| `@pickle-ui/react/menu`                                | `Menu` with `Trigger`, `Content`, `Item`, `CheckboxItem`, `RadioGroup`, `Sub`, `Shortcut`, …           |
+| `@pickle-ui/react/popover`                             | `Popover` with `Trigger`, `Content`, `Header`, `Title`, `Description`, `Anchor`                        |
+| `@pickle-ui/react/progress`                            | `Progress` with `Label`, `Value`, `Track`, `Indicator`                                                 |
+| `@pickle-ui/react/radio-group`                         | `RadioGroup` with `Item`                                                                               |
+| `@pickle-ui/react/scroll-area`                         | `ScrollArea` with `Viewport`, `Scrollbar`, `Thumb`, `Corner`                                           |
+| `@pickle-ui/react/select`                              | `Select` with `Trigger`, `Value`, `Content`, `Item`, `Group`, …                                        |
+| `@pickle-ui/react/separator`                           | `Separator`                                                                                            |
+| `@pickle-ui/react/sidebar`                             | `Sidebar` with `Header`, `Content`, `Footer`, `Group`, `Menu`, …                                       |
+| `@pickle-ui/react/slider`                              | `Slider` with `Label`, `Value`, `Marks`                                                                |
+| `@pickle-ui/react/spinner`                             | `Spinner`                                                                                              |
+| `@pickle-ui/react/switch`                              | `Switch` with `Label`                                                                                  |
+| `@pickle-ui/react/table`                               | `Table` with `Header`, `Body`, `Footer`, `Row`, `Head`, `Cell`, `Caption`                              |
+| `@pickle-ui/react/text`                                | `Text`, `textVariants` for headings and body copy                                                      |
+| `@pickle-ui/react/textarea`                            | `Textarea`, growing with its content                                                                   |
+| `@pickle-ui/react/toast`                               | `Toast` with `Provider`, `useToast` and the `manager` for toasts outside React                         |
+| `@pickle-ui/react/tooltip`                             | `Tooltip` with `Trigger`, `Content`, `Provider`                                                        |
+| `@pickle-ui/react/cn`                                  | `cn` class helper, `SlotClassNames` type                                                               |
+| `@pickle-ui/react/theme`                               | `createTheme`, `themeToCss`                                                                            |
+
+Interactive components and their parts take Base UI's `render` prop to swap
+the element they render, for example
+`<Button render={<a href="/docs" />}>Docs</Button>` or
+`<Popover.Trigger render={<Button variant="outline" />}>Edit</Popover.Trigger>`.
+`Text` and the layout primitives take `as` to change their tag. Parts are
+reached through their component (`Popover.Title`), never imported under their
+own names.
+Icons are plain SVG children: any icon library works, and buttons, badges and
+input addons size and space the SVG for you.
+
+Pickle supplies its component styles, light theme, and `.dark` theme. Add the
+`dark` class to an ancestor to enable dark mode:
+
+```tsx
+<div className="dark">
+  <App />
+</div>
+```
+
+Pickle only reacts to that class, never to `prefers-color-scheme` on its own,
+so you decide how the scheme is chosen. To follow the system preference, mirror
+the media query onto the root element:
+
+```ts
+const media = window.matchMedia('(prefers-color-scheme: dark)');
+const sync = () =>
+  document.documentElement.classList.toggle('dark', media.matches);
+sync();
+media.addEventListener('change', sync);
+```
+
+Use `Form` as a React Hook Form-only compound API. Pass the return value from
+`useForm` to the `form` prop; form-aware controls read that provider and either
+inherit the nearest `Form.Field` name or accept their own `name` prop.
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { Form } from '@pickle-ui/react/form';
+
+type SignUpValues = {
+  email: string;
+  role: string;
+};
+
+export function SignUpForm() {
+  const form = useForm<SignUpValues>({
+    defaultValues: { email: '', role: 'designer' },
+  });
+
+  return (
+    <Form form={form} onSubmit={(values) => console.log(values)}>
+      <Form.Field label="Email" name="email">
+        <Form.Input autoComplete="email" />
+      </Form.Field>
+
+      <Form.Field label="Role" name="role">
+        <Form.Select>
+          <Form.Select.Trigger>
+            <Form.Select.Value placeholder="Select a role" />
+          </Form.Select.Trigger>
+          <Form.Select.Content>
+            <Form.Select.Item value="designer">Designer</Form.Select.Item>
+            <Form.Select.Item value="engineer">Engineer</Form.Select.Item>
+          </Form.Select.Content>
+        </Form.Select>
+      </Form.Field>
+
+      <Form.Button type="submit">Save</Form.Button>
+    </Form>
+  );
+}
+```
+
+## Theming
+
+Pickle is styled with Tailwind utilities that resolve to a small set of CSS
+variables. There are four ways to customize components, from the broadest to
+the most targeted.
+
+### 1. Override the design tokens
+
+Every color, radius, and font in Pickle reads from a variable declared in
+`@pickle-ui/react/styles.css`. Redefine the ones you need after the import; the
+cascade does the rest, and `.dark` overrides work the same way:
+
+```css
+@import 'tailwindcss';
+@import '@pickle-ui/react/styles.css';
+
+:root {
+  --primary: oklch(0.55 0.18 145);
+  --primary-foreground: white;
+  --radius: 0.75rem;
+}
+
+.dark {
+  --primary: oklch(0.8 0.16 145);
+  --primary-foreground: oklch(0.2 0.05 145);
+}
+```
+
+Each token is also exposed as a Tailwind color (`bg-primary`,
+`text-muted-foreground`, `border-sidebar-border`, …) so your own markup can
+share Pickle's palette.
+
+`@pickle-ui/react/styles.css` is the sum of two files you can also import on their
+own:
+
+- `@pickle-ui/react/theme.css` holds the tokens only: the Tailwind theme mapping and
+  the light and dark values. Import it to share Pickle's palette in a project
+  that does not use the components.
+- `@pickle-ui/react/base.css` holds everything else: animation and variant plugins,
+  the `.dark` variant, the `Text` type scale, shared utilities, and element
+  resets. Import it with a token set of your own instead of `theme.css`.
+
+Tokens follow one naming rule: `--x` is a fill and `--x-foreground` is the text
+placed on that fill. Status colors (`destructive`, `info`, `success`,
+`warning`) add a `-subtle` pair for tinted surfaces such as badges and
+alerts: `--x-subtle` is the tint and `--x-subtle-foreground` is the readable
+text on it, which also works as colored text on a neutral surface.
+
+| Token                                               | Used for                                                                                   |
+| --------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `--background`, `--foreground`                      | Page background and default text.                                                          |
+| `--card`, `--card-foreground`                       | `Card` surface and text.                                                                   |
+| `--popover`, `--popover-foreground`                 | Floating surfaces: `Popover`, `Select`, `Combobox`, outline buttons.                       |
+| `--primary`, `--primary-foreground`                 | Solid primary actions and the text on them.                                                |
+| `--secondary`, `--secondary-foreground`             | Secondary buttons and badges.                                                              |
+| `--muted`, `--muted-foreground`                     | Subdued backgrounds and secondary text.                                                    |
+| `--accent`, `--accent-foreground`                   | Hover and highlighted rows (menu items, ghost buttons).                                    |
+| `--destructive`, `--info`, `--success`, `--warning` | Solid status fills, borders, and rings. Each has a `-foreground` for the text on the fill. |
+| `--destructive-subtle`, `--info-subtle`, …          | Tinted status surfaces. Each has a `-subtle-foreground` for the text on the tint.          |
+| `--border`, `--input`, `--ring`                     | Default borders, form control borders, focus rings.                                        |
+| `--sidebar-*`                                       | The `Sidebar` surface, text, borders, and accents.                                         |
+| `--chart-1` … `--chart-5`                           | Categorical chart colors.                                                                  |
+| `--radius`                                          | Base radius. `rounded-sm` through `rounded-2xl` derive from it.                            |
+| `--text-h1` … `--text-code`                         | `Text` sizes (`h1`–`h4`, `lead`, `body`, `small`, `code`), each with a `--line-height`.    |
+| `--font-sans`, `--font-heading`, `--font-mono`      | Font stacks. Declare them in your `@theme` block.                                          |
+
+Pickle avoids raw Tailwind palette colors on themed surfaces, so changing
+a token updates every component that depends on it.
+
+The `--text-*` sizes are Tailwind theme variables, so you can set them from
+`:root` or from your own `@theme` block. Their line heights are ratios, so
+`--text-h1: 2.25rem` scales the line height with it. `--text-body` also sizes
+`Dialog` and `AlertDialog` descriptions; the compact copy in `Alert`, `Toast`
+and `Card.Description` keeps `text-sm`.
+
+### 1b. Generate a theme from a brand color
+
+`createTheme` derives the brand-dependent tokens (`--primary`,
+`--primary-foreground`, `--ring`, and their sidebar counterparts) for both
+schemes from one color, picking a readable foreground automatically. Radius
+and fonts pass through. Everything else keeps the defaults from `theme.css`.
+
+```ts
+import { createTheme, themeToCss } from '@pickle-ui/react/theme';
+
+const theme = createTheme({
+  fonts: { sans: 'Inter, sans-serif' },
+  primary: '#16a34a',
+  primaryDark: '#4ade80', // optional, defaults to a lighter primary
+  radius: '0.5rem',
+});
+
+themeToCss(theme);
+// :root { --primary: oklch(…); --primary-foreground: oklch(1 0 0); … }
+// .dark { … }
+```
+
+Write that string to a stylesheet at build time, or apply a scheme at runtime
+by spreading its variables as inline styles:
+
+```tsx
+<div className="dark" style={theme.dark}>
+  <App />
+</div>
+```
+
+### 2. Pass `className`
+
+Every component accepts `className`, merged with `tailwind-merge` so your
+utilities win over Pickle's defaults without specificity tricks:
+
+```tsx
+<Button className="rounded-full px-6">Get started</Button>
+<Card.Title className="text-2xl">Overview</Card.Title>
+```
+
+The same `cn` helper Pickle uses internally is exported, so you can compose
+conditional classes the same way:
+
+```tsx
+import { cn } from '@pickle-ui/react/cn';
+
+<Badge className={cn('uppercase', isNew && 'animate-pulse')}>New</Badge>;
+```
+
+Components that render several parts from one props object also take a
+`classNames` object keyed by slot, so you can reach an inner part without
+global CSS. Keys match the suffix of the part's `data-slot` attribute:
+
+```tsx
+<Checkbox
+  classNames={{ indicator: 'bg-success', label: 'text-muted-foreground' }}
+  label="Remember me"
+/>
+
+<Slider classNames={{ thumb: 'size-6', track: 'h-2' }} defaultValue={40} />
+
+<Input className="w-64" classNames={{ input: 'font-mono' }} />
+```
+
+| Component         | Slots                                    |
+| ----------------- | ---------------------------------------- |
+| `Button`          | `loadingIndicator`                       |
+| `Checkbox`        | `field`, `indicator`, `label`            |
+| `Combobox.Chip`   | `remove`                                 |
+| `Combobox.Item`   | `indicator`                              |
+| `Input`           | `input` (`className` styles the wrapper) |
+| `RadioGroup.Item` | `indicator`, `label`                     |
+| `Select.Item`     | `indicator`                              |
+| `Select.Trigger`  | `icon`                                   |
+| `Slider`          | `control`, `indicator`, `thumb`, `track` |
+| `Switch`          | `field`, `label`, `thumb`                |
+
+The `SlotClassNames<'a' | 'b'>` type is exported for wrappers that forward
+these props.
+
+### 3. Reuse the variant functions
+
+Components built on variants export their `class-variance-authority` function
+(`buttonVariants`, `badgeVariants`, `textVariants`, `groupVariants`,
+`inputGroupAddonVariants`). Apply Pickle's styling to any element, or extend a
+variant without wrapping the component:
+
+```tsx
+import { buttonVariants } from '@pickle-ui/react/button';
+import { cn } from '@pickle-ui/react/cn';
+
+<a className={buttonVariants({ variant: 'outline', size: 'sm' })} href="/docs">
+  Docs
+</a>;
+
+<button
+  className={cn(
+    buttonVariants({ variant: 'ghost' }),
+    'text-info-subtle-foreground',
+  )}
+>
+  Info
+</button>;
+```
+
+Merge them with `@pickle-ui/react/cn`. A stock `tailwind-merge` reads `text-h1` …
+`text-code` from `textVariants` as colors and drops them next to one, so a
+`cn` of your own must declare them as font sizes:
+
+```ts
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ['body', 'code', 'h1', 'h2', 'h3', 'h4', 'lead', 'small'],
+    },
+  },
+});
+```
+
+### 4. Target `data-slot` in CSS
+
+Every rendered part carries a stable `data-slot` attribute (`button`, `card`,
+`card-title`, `select-item`, `checkbox-indicator`, …). Use it for global rules
+or to reach parts that do not take their own `className`.
+
+Parts with visual variants also expose the resolved value as a data
+attribute, defaults included, so a rule can target one variant or size. The
+attribute sits on the slot listed here:
+
+| Component                               | `data-slot`                                    | Attributes                                                                   |
+| --------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------- |
+| `Button`, `Badge`                       | `button`, `badge`                              | `data-variant`, `data-size`                                                  |
+| `Alert`, `Menu.Item`                    | `alert`, `menu-item`                           | `data-variant`                                                               |
+| `Text`                                  | `text`                                         | `data-variant`, plus `data-tone`, `data-weight` and `data-truncate` when set |
+| `Dialog.Content`, `AlertDialog.Content` | `dialog-content`, `alert-dialog-content`       | `data-size`                                                                  |
+| `Input`, `Textarea`                     | `input-control`, `textarea-control` (wrappers) | `data-size`                                                                  |
+| `Checkbox`                              | `checkbox`                                     | `data-size`                                                                  |
+| `RadioGroup.Item`                       | `radio`                                        | `data-size`                                                                  |
+| `Group`                                 | `group`                                        | `data-orientation`                                                           |
+| `InputGroup.Addon`                      | `input-group-addon`                            | `data-align`                                                                 |
+| `Toast.Provider`                        | `toast-viewport`                               | `data-position`                                                              |
+
+Write these rules in `@layer utilities`. Pickle styles parts with utility
+classes, and Tailwind orders its layers `theme, base, components, utilities`,
+so a rule in `@layer components` loses to them:
+
+```css
+@layer utilities {
+  [data-slot='card'] {
+    @apply shadow-lg;
+  }
+
+  [data-slot='button'][data-size='md'] {
+    @apply h-9;
+  }
+
+  [data-slot='button'][data-variant='default'] {
+    @apply border-indigo-600 bg-indigo-600 hover:bg-indigo-600/90;
+  }
+
+  [data-slot='checkbox-indicator'] svg {
+    stroke-width: 3;
+  }
+}
+```
+
+A global rule like these wins over a `className` on a single instance too; mark
+the one-off utility important (`className="shadow-none!"`) to beat it.
+
+`data-slot` names and these data attribute values are part of the public API
+and follow the component and prop names in kebab-case, so renaming one is a
+breaking change.
+
+## Upgrading from 0.x
+
+The next major release renames a few styling APIs. Search your code for these
+and update them:
+
+- **Package name.** `pickle-ui` is now published as `@pickle-ui/react`.
+  Replace the dependency and every import, stylesheets included:
+  `pickle-ui/button` becomes `@pickle-ui/react/button` and
+  `pickle-ui/styles.css` becomes `@pickle-ui/react/styles.css`.
+- **Status tokens.** `--destructive-foreground`, `--info-foreground`,
+  `--success-foreground` and `--warning-foreground` now hold the text color for
+  a solid fill (white, or amber-950 for warning). Tinted text such as
+  `text-destructive-foreground` on a badge becomes
+  `text-destructive-subtle-foreground`, and tinted backgrounds like
+  `bg-destructive/8` become `bg-destructive-subtle`, which already adapts to
+  dark mode.
+- **Chart palette.** The light `--chart-1` … `--chart-5` values changed to
+  match the dark hues (blue, emerald, amber, purple, rose). Override them if
+  your charts relied on the previous colors.
+- **Slot class props.** `labelClassName` on `Checkbox`, `Switch` and
+  `RadioGroup.Item` becomes `classNames={{ label }}`; `thumbClassName` and
+  `trackClassName` on `Slider` become `classNames={{ thumb, track }}`.
+- **Stylesheet.** `@pickle-ui/react/styles.css` is unchanged as the entry point. It is
+  now split into `@pickle-ui/react/theme.css` and `@pickle-ui/react/base.css`, and no longer
+  depends on the `shadcn` package.
+
+## Development
+
+This package lives in the `packages/react` folder of the Pickle UI monorepo.
+Run these from the repository root:
+
+```bash
+pnpm install
+pnpm run dev        # Storybook on http://localhost:6006, theme toggle in the toolbar
+pnpm run build
+pnpm run typecheck
+pnpm run test
+pnpm run lint
+```
+
+## Releasing
+
+Run the manually dispatched `Release` GitHub Actions workflow and choose a
+patch, minor, or major bump. The workflow publishes the npm package, version
+commit, tag, and GitHub Release.
+
+## License
+
+MIT

package/dist/components/Alert.d.ts

@@ -0,0 +1,38 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { type TextProps } from './Text.js';
+declare const alertVariants: (props?: ({
+    variant?: "destructive" | "default" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AlertActionProps = React.ComponentProps<'div'>;
+type AlertDescriptionProps = Omit<TextProps, 'as' | 'tone' | 'variant'>;
+type AlertIconProps = React.ComponentProps<'div'>;
+type AlertProps = React.ComponentProps<'div'> & VariantProps<typeof alertVariants>;
+type AlertTitleProps = Omit<TextProps, 'as' | 'tone' | 'variant'>;
+declare function AlertAction({ className, ...props }: AlertActionProps): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: AlertDescriptionProps): React.JSX.Element;
+/**
+ * Leading icon slot. Pass an SVG as children; it is sized and tinted to match
+ * the alert's `variant`. The wrapper is hidden from assistive technology by
+ * default since the title carries the meaning.
+ */
+declare function AlertIcon({ className, ...props }: AlertIconProps): React.JSX.Element;
+/**
+ * An inline message that draws attention to contextual information.
+ *
+ * The alert has no live-region role by default, so static notices are not
+ * announced on page load. When the alert appears in response to a user action,
+ * pass `role="alert"` for urgent messages (failures) or `role="status"` for
+ * polite ones (confirmations, info).
+ */
+declare function AlertRoot({ className, variant, ...props }: AlertProps): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: AlertTitleProps): React.JSX.Element;
+declare const Alert: typeof AlertRoot & {
+    Action: typeof AlertAction;
+    Description: typeof AlertDescription;
+    Icon: typeof AlertIcon;
+    Title: typeof AlertTitle;
+};
+export { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle };
+export type { AlertActionProps, AlertDescriptionProps, AlertIconProps, AlertProps, AlertTitleProps, };
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,QAAA,MAAM,aAAa;;8EAoBlB,CAAC;AAEF,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACpD,KAAK,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AACxE,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC3C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AACrC,KAAK,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAElE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAW7D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAcvE;AAED;;;;GAIG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAYzD;AAED;;;;;;;GAOG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAS1E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAa3D;AAED,QAAA,MAAM,KAAK;;;;;CAKT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AACvE,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACV,eAAe,GAChB,CAAC"}

package/dist/components/Alert.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/utils.js';
+import { Text } from './Text.js';
+const alertVariants = cva('relative grid w-full grid-cols-[1fr] items-start gap-x-3 gap-y-0.5 rounded-xl border px-3.5 py-3 text-sm has-[>[data-slot=alert-action]]:grid-cols-[1fr_auto] has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr] has-[>[data-slot=alert-icon]]:has-[>[data-slot=alert-action]]:grid-cols-[auto_1fr_auto]', {
+    defaultVariants: {
+        variant: 'default',
+    },
+    variants: {
+        variant: {
+            default: 'bg-card text-card-foreground *:data-[slot=alert-icon]:text-muted-foreground',
+            destructive: 'border-destructive/32 bg-destructive-subtle text-foreground *:data-[slot=alert-icon]:text-destructive',
+            info: 'border-info/32 bg-info-subtle text-foreground *:data-[slot=alert-icon]:text-info',
+            success: 'border-success/32 bg-success-subtle text-foreground *:data-[slot=alert-icon]:text-success',
+            warning: 'border-warning/32 bg-warning-subtle text-foreground *:data-[slot=alert-icon]:text-warning',
+        },
+    },
+});
+function AlertAction({ className, ...props }) {
+    return (_jsx("div", { className: cn('col-start-2 row-span-2 row-start-1 flex items-center gap-1.5 self-center [[data-slot=alert-icon]~&]:col-start-3', className), "data-slot": "alert-action", ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx(Text, { as: "div", className: cn('col-start-1 flex flex-col gap-2 text-sm [[data-slot=alert-icon]~&]:col-start-2', className), "data-slot": "alert-description", tone: "muted", variant: "body", ...props }));
+}
+/**
+ * Leading icon slot. Pass an SVG as children; it is sized and tinted to match
+ * the alert's `variant`. The wrapper is hidden from assistive technology by
+ * default since the title carries the meaning.
+ */
+function AlertIcon({ className, ...props }) {
+    return (_jsx("div", { "aria-hidden": true, className: cn("col-start-1 row-start-1 flex h-5 items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), "data-slot": "alert-icon", ...props }));
+}
+/**
+ * An inline message that draws attention to contextual information.
+ *
+ * The alert has no live-region role by default, so static notices are not
+ * announced on page load. When the alert appears in response to a user action,
+ * pass `role="alert"` for urgent messages (failures) or `role="status"` for
+ * polite ones (confirmations, info).
+ */
+function AlertRoot({ className, variant = 'default', ...props }) {
+    return (_jsx("div", { className: cn(alertVariants({ variant }), className), "data-slot": "alert", "data-variant": variant, ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx(Text, { as: "div", className: cn('col-start-1 text-sm leading-5 font-medium [[data-slot=alert-icon]~&]:col-start-2', className), "data-slot": "alert-title", variant: "body", ...props }));
+}
+const Alert = Object.assign(AlertRoot, {
+    Action: AlertAction,
+    Description: AlertDescription,
+    Icon: AlertIcon,
+    Title: AlertTitle,
+});
+export { Alert, AlertAction, AlertDescription, AlertIcon, AlertTitle };
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAE9C,MAAM,aAAa,GAAG,GAAG,CACvB,0SAA0S,EAC1S;IACE,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,6EAA6E;YAC/E,WAAW,EACT,uGAAuG;YACzG,IAAI,EAAE,kFAAkF;YACxF,OAAO,EACL,2FAA2F;YAC7F,OAAO,EACL,2FAA2F;SAC9F;KACF;CACF,CACF,CAAC;AASF,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB;IAC5D,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,iHAAiH,EACjH,SAAS,CACV,eACS,cAAc,KACpB,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB;IACtE,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CACX,gFAAgF,EAChF,SAAS,CACV,eACS,mBAAmB,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,KACV,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACxD,OAAO,CACL,mCAEE,SAAS,EAAE,EAAE,CACX,iIAAiI,EACjI,SAAS,CACV,eACS,YAAY,KAClB,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAc;IACzE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,eAC1C,OAAO,kBACH,OAAO,KACjB,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB;IAC1D,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CACX,kFAAkF,EAClF,SAAS,CACV,eACS,aAAa,EACvB,OAAO,EAAC,MAAM,KACV,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACrC,MAAM,EAAE,WAAW;IACnB,WAAW,EAAE,gBAAgB;IAC7B,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;CAClB,CAAC,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/AlertDialog.d.ts

@@ -0,0 +1,41 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import * as React from 'react';
+import { type DialogSize } from './_internal/dialog-styles.js';
+type AlertDialogCloseProps = React.ComponentProps<typeof AlertDialogPrimitive.Close>;
+type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Popup> & {
+    /** Maximum width of the dialog. Defaults to `md`. */
+    size?: DialogSize;
+};
+type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>;
+type AlertDialogFooterProps = React.ComponentProps<'div'>;
+type AlertDialogHeaderProps = React.ComponentProps<'div'>;
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {
+    /**
+     * Keeps the dialog open when the backdrop is clicked, so it only closes
+     * through `AlertDialog.Close` or Escape. Defaults to `false`: a backdrop
+     * click closes the dialog.
+     */
+    disablePointerDismissal?: boolean;
+};
+type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>;
+type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+declare function AlertDialogClose({ ...props }: AlertDialogCloseProps): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialogContentProps): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element;
+declare function AlertDialogRoot({ disablePointerDismissal, ...props }: AlertDialogProps): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): React.JSX.Element;
+declare const AlertDialog: typeof AlertDialogRoot & {
+    Close: typeof AlertDialogClose;
+    Content: typeof AlertDialogContent;
+    Description: typeof AlertDialogDescription;
+    Footer: typeof AlertDialogFooter;
+    Header: typeof AlertDialogHeader;
+    Title: typeof AlertDialogTitle;
+    Trigger: typeof AlertDialogTrigger;
+};
+export { AlertDialog };
+export type { AlertDialogCloseProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogHeaderProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps, };
+//# sourceMappingURL=AlertDialog.d.ts.map

package/dist/components/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/components/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAElF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAML,KAAK,UAAU,EAGhB,MAAM,2BAA2B,CAAC;AAEnC,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAC/C,OAAO,oBAAoB,CAAC,KAAK,CAClC,CAAC;AACF,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CACjD,OAAO,oBAAoB,CAAC,KAAK,CAClC,GAAG;IACF,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AACF,KAAK,2BAA2B,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,oBAAoB,CAAC,WAAW,CACxC,CAAC;AACF,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1D,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAC1C,OAAO,oBAAoB,CAAC,IAAI,CACjC,GAAG;IACF;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AACF,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAC/C,OAAO,oBAAoB,CAAC,KAAK,CAClC,CAAC;AACF,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CACjD,OAAO,oBAAoB,CAAC,OAAO,CACpC,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAI5D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAmBzB;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,qBAQ7B;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,qBAQzE;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,qBAQzE;AAED,iBAAS,eAAe,CAAC,EACvB,uBAA+B,EAC/B,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAUlB;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,qBAQvE;AAED,iBAAS,kBAAkB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,qBAIhE;AAED,QAAA,MAAM,WAAW;;;;;;;;CAQf,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EACV,qBAAqB,EACrB,uBAAuB,EACvB,2BAA2B,EAC3B,sBAAsB,EACtB,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GACxB,CAAC"}