@florianke/components 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +396 -0
  2. package/dist/alert-dialog.d.mts +42 -0
  3. package/dist/alert-dialog.d.mts.map +1 -0
  4. package/dist/alert-dialog.mjs +57 -0
  5. package/dist/alert-dialog.mjs.map +1 -0
  6. package/dist/avatar.mjs +1 -1
  7. package/dist/button.d.mts +1 -1
  8. package/dist/button.d.mts.map +1 -1
  9. package/dist/button.mjs +3 -2
  10. package/dist/button.mjs.map +1 -1
  11. package/dist/field.d.mts +11 -0
  12. package/dist/field.d.mts.map +1 -0
  13. package/dist/field.mjs +14 -0
  14. package/dist/field.mjs.map +1 -0
  15. package/dist/heading.d.mts +17 -0
  16. package/dist/heading.d.mts.map +1 -0
  17. package/dist/heading.mjs +20 -0
  18. package/dist/heading.mjs.map +1 -0
  19. package/dist/hint.d.mts +17 -0
  20. package/dist/hint.d.mts.map +1 -0
  21. package/dist/hint.mjs +22 -0
  22. package/dist/hint.mjs.map +1 -0
  23. package/dist/hooks/use-confirm.d.mts +23 -0
  24. package/dist/hooks/use-confirm.d.mts.map +1 -0
  25. package/dist/hooks/use-confirm.mjs +97 -0
  26. package/dist/hooks/use-confirm.mjs.map +1 -0
  27. package/dist/index.d.mts +11 -1
  28. package/dist/index.mjs +12 -2
  29. package/dist/input.d.mts +1 -0
  30. package/dist/input.d.mts.map +1 -1
  31. package/dist/input.mjs +73 -6
  32. package/dist/input.mjs.map +1 -1
  33. package/dist/label.d.mts +20 -0
  34. package/dist/label.d.mts.map +1 -0
  35. package/dist/label.mjs +19 -0
  36. package/dist/label.mjs.map +1 -0
  37. package/dist/providers.d.mts +12 -0
  38. package/dist/providers.d.mts.map +1 -0
  39. package/dist/providers.mjs +14 -0
  40. package/dist/providers.mjs.map +1 -0
  41. package/dist/text.d.mts +30 -0
  42. package/dist/text.d.mts.map +1 -0
  43. package/dist/text.mjs +37 -0
  44. package/dist/text.mjs.map +1 -0
  45. package/dist/toast.d.mts +56 -0
  46. package/dist/toast.d.mts.map +1 -0
  47. package/dist/toast.mjs +166 -0
  48. package/dist/toast.mjs.map +1 -0
  49. package/dist/tooltip.d.mts +35 -0
  50. package/dist/tooltip.d.mts.map +1 -0
  51. package/dist/tooltip.mjs +45 -0
  52. package/dist/tooltip.mjs.map +1 -0
  53. package/package.json +1 -1
  54. package/src/styles.css +13 -1
package/README.md ADDED
@@ -0,0 +1,396 @@
1
+ # @florianke/components
2
+
3
+ A small, opinionated React component library built on top of [Base UI](https://base-ui.com) primitives and [Tailwind CSS v4](https://tailwindcss.com). Every component is styled with CSS custom properties so your app's light and dark themes stay consistent across the whole kit.
4
+
5
+ - **Headless-first** — behavior, accessibility, and keyboard interaction are handled by Base UI; this library only adds opinionated styling and a few ergonomic defaults.
6
+ - **Themeable** — all colors are CSS variables (`--background`, `--foreground`, `--ring`, ...), so you can restyle the whole library by overriding a handful of custom properties.
7
+ - **Tree-shakeable** — every component ships as its own entry point, so bundlers only include what you actually import.
8
+ - **Client-ready** — every interactive component is already marked with `"use client"`, so it works out of the box inside a Next.js App Router Server Component tree.
9
+
10
+ ## Table of Contents
11
+
12
+ - [Requirements](#requirements)
13
+ - [Installation](#installation)
14
+ - [Setup](#setup)
15
+ - [Quick Start](#quick-start)
16
+ - [Theming](#theming)
17
+ - [Components](#components)
18
+ - [Avatar](#avatar)
19
+ - [Button](#button)
20
+ - [Card](#card)
21
+ - [DropdownMenu](#dropdownmenu)
22
+ - [Input](#input)
23
+ - [Select](#select)
24
+ - [Hooks](#hooks)
25
+ - [useInitials](#useinitials)
26
+ - [Package Exports](#package-exports)
27
+ - [License](#license)
28
+
29
+ ## Requirements
30
+
31
+ - React 19+ and React DOM 19+ (peer dependencies)
32
+ - Tailwind CSS v4 configured in your own project (this library ships raw Tailwind utility classes — your app's Tailwind build is what turns them into actual CSS)
33
+
34
+ ## Installation
35
+
36
+ ```bash
37
+ npm install @florianke/components
38
+ # or
39
+ pnpm add @florianke/components
40
+ # or
41
+ yarn add @florianke/components
42
+ ```
43
+
44
+ `react` and `react-dom` are peer dependencies — make sure your project already has them installed (any modern React 19 app does).
45
+
46
+ ## Setup
47
+
48
+ ### 1. Import the base styles
49
+
50
+ The package ships a single stylesheet with the design tokens (light/dark color variables) and the `@import "tailwindcss"` bootstrap. Import it once, at the root of your app:
51
+
52
+ ```ts
53
+ // e.g. src/app/globals.css, or your root layout/entry file
54
+ import "@florianke/components/styles.css";
55
+ ```
56
+
57
+ Or, if you're importing it from a CSS file instead of a JS/TS entry point:
58
+
59
+ ```css
60
+ @import "tailwindcss";
61
+ @import "@florianke/components/styles.css";
62
+ ```
63
+
64
+ ### 2. Point Tailwind at the package
65
+
66
+ Because the components' class names live inside the published JavaScript, your Tailwind build needs to scan the package's compiled output so it actually generates the corresponding CSS. Add a `@source` directive next to your other Tailwind directives:
67
+
68
+ ```css
69
+ @import "tailwindcss";
70
+ @import "@florianke/components/styles.css";
71
+ @source "../node_modules/@florianke/components/dist";
72
+ ```
73
+
74
+ (Adjust the relative path so it points at your `node_modules/@florianke/components/dist` folder from wherever your CSS file lives.)
75
+
76
+ ### 3. Dark mode
77
+
78
+ Dark mode is automatic via `prefers-color-scheme`, and can be forced by toggling a `.dark` (or `.light`, to force light) class anywhere up the DOM tree — typically on `<html>`:
79
+
80
+ ```tsx
81
+ <html className="dark">
82
+ ```
83
+
84
+ ## Quick Start
85
+
86
+ ```tsx
87
+ "use client";
88
+
89
+ import { Avatar, Button, Card, Input } from "@florianke/components";
90
+
91
+ export default function Example() {
92
+ return (
93
+ <Card className="flex w-80 flex-col gap-4 p-6">
94
+ <div className="flex items-center gap-3">
95
+ <Avatar name="Ada Lovelace" />
96
+ <span className="text-[14px] font-medium text-(--foreground)">
97
+ Ada Lovelace
98
+ </span>
99
+ </div>
100
+ <Input placeholder="Type something..." />
101
+ <Button>Continue</Button>
102
+ </Card>
103
+ );
104
+ }
105
+ ```
106
+
107
+ ## Theming
108
+
109
+ Every component reads its colors from CSS custom properties, defined once in `styles.css` and re-defined inside `.dark`:
110
+
111
+ | Token | Used for |
112
+ | ----------------------- | ------------------------------------------------------ |
113
+ | `--background` | Page background |
114
+ | `--foreground` | Primary text |
115
+ | `--card` / `--card-foreground` | `Card` surface and its text |
116
+ | `--popover` / `--popover-foreground` | Floating surfaces (`DropdownMenu`, `Select` popups) |
117
+ | `--border` | Hairline borders and dividers |
118
+ | `--input` / `--input-border` | Form control backgrounds and borders |
119
+ | `--muted` / `--muted-foreground` | Recessed surfaces and secondary text |
120
+ | `--accent` / `--accent-foreground` | Hover/highlighted state on menu and select items |
121
+ | `--ring` | Focus rings |
122
+
123
+ Override any of these in your own CSS (after importing the package's stylesheet) to reskin the whole library:
124
+
125
+ ```css
126
+ :root {
127
+ --ring: oklch(0.6 0.2 25); /* e.g. switch the focus color to red */
128
+ }
129
+ ```
130
+
131
+ ## Components
132
+
133
+ ### Avatar
134
+
135
+ Renders an image, and automatically falls back to the person's initials — shown immediately, with the image swapping in as soon as it finishes loading (no flash, no artificial delay).
136
+
137
+ ```tsx
138
+ import { Avatar } from "@florianke/components";
139
+
140
+ <Avatar name="Ada Lovelace" src="/ada.jpg" />
141
+ <Avatar name="Ada Lovelace" /> {/* no src → shows "AL" immediately */}
142
+ <Avatar name="Ada Lovelace" size="small" variant="squared" />
143
+ ```
144
+
145
+ | Prop | Type | Default | Description |
146
+ | ----------- | --------------------------------- | ----------- | ---------------------------------------------------------------------------- |
147
+ | `name` | `string` | —（required） | Full name. Used for the `alt` text and to derive the fallback initials via [`useInitials`](#useinitials). |
148
+ | `src` | `string` | `undefined` | Image URL. When omitted, the initials fallback is shown. |
149
+ | `variant` | `"rounded" \| "squared"` | `"rounded"` | Shape of the avatar. |
150
+ | `size` | `"small" \| "base" \| "large"` | `"base"` | Size of the avatar. |
151
+ | `className` | `string` | `undefined` | Extra classes, merged with the defaults. |
152
+
153
+ Also accepts every other prop of Base UI's `Avatar.Root` (e.g. `id`, `ref`, ...).
154
+
155
+ ### Button
156
+
157
+ ```tsx
158
+ import { Button } from "@florianke/components";
159
+
160
+ <Button>Primary</Button>
161
+ <Button variant="secondary">Secondary</Button>
162
+ <Button variant="outline">Outline</Button>
163
+ <Button variant="ghost">Ghost</Button>
164
+ <Button variant="link">Link</Button>
165
+
166
+ <Button size="sm">Small</Button>
167
+ <Button size="md">Medium</Button>
168
+
169
+ <Button disabled>Disabled</Button>
170
+
171
+ {/* With an icon */}
172
+ <Button>
173
+ <svg className="size-4" /* ... */ />
174
+ Continue
175
+ </Button>
176
+ ```
177
+
178
+ | Prop | Type | Default | Description |
179
+ | ----------- | -------------------------------------------------------------------- | ----------- | ---------------------------------------------------------- |
180
+ | `variant` | `"primary" \| "secondary" \| "outline" \| "ghost" \| "link"` | `"primary"` | Visual style. |
181
+ | `size` | `"sm" \| "md"` | `"md"` | Height/padding/type scale. Ignored when `variant="link"`. |
182
+ | `disabled` | `boolean` | `false` | Disables the button (via the native `disabled` attribute). |
183
+ | `className` | `string` | `undefined` | Extra classes, merged with the defaults. |
184
+
185
+ Also accepts every other native `<button>` prop (`onClick`, `type`, `ref`, ...), since it's built on Base UI's `Button`.
186
+
187
+ ### Card
188
+
189
+ A simple, styled container — a `<div>` with a border, background, and rounded corners tied to the theme tokens. Compose it freely with your own layout classes.
190
+
191
+ ```tsx
192
+ import { Card } from "@florianke/components";
193
+
194
+ <Card className="w-72 p-4">
195
+ <p className="text-[14px] text-(--card-foreground)">
196
+ Card content goes here.
197
+ </p>
198
+ </Card>
199
+ ```
200
+
201
+ | Prop | Type | Default | Description |
202
+ | ----------- | ----------- | ----------- | --------------------------------------------- |
203
+ | `className` | `string` | `undefined` | Extra classes, merged with the defaults. |
204
+
205
+ Accepts every other standard `<div>` prop.
206
+
207
+ ### DropdownMenu
208
+
209
+ A floating action menu (e.g. "Sort by", context actions), built on Base UI's `Menu`. Currently exposes `Trigger`, `Content`, and plain `Item` — no submenus, checkboxes, or radio groups yet.
210
+
211
+ ```tsx
212
+ import { Button, DropdownMenu } from "@florianke/components";
213
+
214
+ <DropdownMenu>
215
+ <DropdownMenu.Trigger render={<Button variant="outline" size="sm" />}>
216
+ Sort by
217
+ </DropdownMenu.Trigger>
218
+ <DropdownMenu.Content>
219
+ <DropdownMenu.Item>Name</DropdownMenu.Item>
220
+ <DropdownMenu.Item>Date modified</DropdownMenu.Item>
221
+ <DropdownMenu.Item disabled>Size</DropdownMenu.Item>
222
+ </DropdownMenu.Content>
223
+ </DropdownMenu>
224
+ ```
225
+
226
+ Use the `render` prop (from Base UI) to render the trigger as any element you like — here it renders as our own `Button` instead of a plain `<button>`.
227
+
228
+ #### `DropdownMenu` (root)
229
+
230
+ Forwards all props to Base UI's `Menu.Root` — e.g. `open`, `defaultOpen`, `onOpenChange`, `modal`.
231
+
232
+ #### `DropdownMenu.Trigger`
233
+
234
+ Forwards all props to Base UI's `Menu.Trigger` — most commonly `render` (to swap the rendered element/component) and `disabled`.
235
+
236
+ #### `DropdownMenu.Content`
237
+
238
+ | Prop | Type | Default | Description |
239
+ | ------------- | --------------------------------------------------- | --------- | ---------------------------------------------------- |
240
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | `undefined` (Base UI default: `"bottom"`) | Preferred side relative to the trigger. |
241
+ | `align` | `"start" \| "center" \| "end"` | `"start"` | Alignment along that side. |
242
+ | `sideOffset` | `number` | `6` | Gap (px) between the trigger and the menu. |
243
+ | `alignOffset` | `number` | `undefined` | Extra offset along the alignment axis. |
244
+
245
+ #### `DropdownMenu.Item`
246
+
247
+ Forwards all props to Base UI's `Menu.Item` — most commonly `disabled` and `onClick`.
248
+
249
+ ### Input
250
+
251
+ ```tsx
252
+ import { Input } from "@florianke/components";
253
+
254
+ <Input placeholder="e.g. Ada Lovelace" />
255
+ <Input size="sm" placeholder="Small" />
256
+ <Input disabled placeholder="Can't edit this" />
257
+ <Input defaultValue="1920" />
258
+ ```
259
+
260
+ | Prop | Type | Default | Description |
261
+ | ----------- | ------------------- | ------- | --------------------------------------------- |
262
+ | `size` | `"sm" \| "md"` | `"md"` | Height/padding/type scale. |
263
+ | `disabled` | `boolean` | `false` | Disables the input. |
264
+ | `className` | `string` | `undefined` | Extra classes, merged with the defaults. |
265
+
266
+ Also accepts every other native `<input>` prop (`value`, `onChange`, `placeholder`, `ref`, ...), except `size` which is overridden by the prop above.
267
+
268
+ ### Select
269
+
270
+ A native-select replacement built on Base UI's `Select`, styled to always drop down below the trigger (never flips above it) and to show the selected item's **label** in the trigger — not its raw `value`.
271
+
272
+ ```tsx
273
+ import { Select } from "@florianke/components";
274
+
275
+ <Select>
276
+ <Select.Trigger placeholder="Choose a fruit" />
277
+ <Select.Content>
278
+ <Select.Item value="apple">Apple</Select.Item>
279
+ <Select.Item value="banana">Banana</Select.Item>
280
+ <Select.Separator />
281
+ <Select.Item value="orange">Orange</Select.Item>
282
+ </Select.Content>
283
+ </Select>
284
+
285
+ {/* Uncontrolled default value */}
286
+ <Select defaultValue="banana">
287
+ <Select.Trigger placeholder="Choose a fruit" />
288
+ <Select.Content>
289
+ <Select.Item value="apple">Apple</Select.Item>
290
+ <Select.Item value="banana">Banana</Select.Item>
291
+ </Select.Content>
292
+ </Select>
293
+
294
+ {/* Disabled item / disabled select */}
295
+ <Select>
296
+ <Select.Trigger placeholder="Choose a fruit" />
297
+ <Select.Content>
298
+ <Select.Item value="apple">Apple</Select.Item>
299
+ <Select.Item value="banana" disabled>Banana</Select.Item>
300
+ </Select.Content>
301
+ </Select>
302
+
303
+ <Select disabled>
304
+ <Select.Trigger placeholder="Choose a fruit" />
305
+ <Select.Content>
306
+ <Select.Item value="apple">Apple</Select.Item>
307
+ </Select.Content>
308
+ </Select>
309
+ ```
310
+
311
+ You never need to pass a separate `items` map — `Select` walks its own children at render time, collects every `Select.Item`'s `value`/label pair, and wires that up to Base UI automatically so the trigger displays "Banana" instead of `banana`.
312
+
313
+ #### `Select` (root)
314
+
315
+ Forwards all props to Base UI's `Select.Root` — e.g. `defaultValue`, `value`, `onValueChange`, `disabled`, `multiple`, `name`. Pass your own `items` map explicitly if you ever need to override the auto-derived one.
316
+
317
+ #### `Select.Trigger`
318
+
319
+ | Prop | Type | Default | Description |
320
+ | ------------- | ----------- | ------------ | --------------------------------------------- |
321
+ | `placeholder` | `string` | `undefined` | Shown (muted) when nothing is selected yet. |
322
+
323
+ Also accepts every other Base UI `Select.Trigger` prop (`disabled`, `ref`, ...).
324
+
325
+ #### `Select.Content`
326
+
327
+ | Prop | Type | Default | Description |
328
+ | ------------- | ------------ | ----------- | ------------------------------------------------------------------------ |
329
+ | `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Defaults to opening below the trigger. Collision-based flipping is disabled, so the popup keeps its `side` even if it would overflow the viewport. |
330
+ | `align` | `"start" \| "center" \| "end"` | `"start"` | Alignment along that side. |
331
+ | `sideOffset` | `number` | `6` | Gap (px) between the trigger and the popup. |
332
+ | `alignOffset` | `number` | `undefined` | Extra offset along the alignment axis. |
333
+
334
+ #### `Select.Item`
335
+
336
+ | Prop | Type | Default | Description |
337
+ | ----------- | ------------ | ------------ | --------------------------------------- |
338
+ | `value` | `any` | —（required） | The value submitted/selected. |
339
+ | `disabled` | `boolean` | `false` | Disables this option. |
340
+
341
+ `children` is used both as the visible label and (automatically) as the text shown in the trigger once selected.
342
+
343
+ #### `Select.Separator`
344
+
345
+ A thin horizontal divider between groups of items. No special props beyond standard `<div>` props.
346
+
347
+ ```tsx
348
+ <Select.Item value="apple">Apple</Select.Item>
349
+ <Select.Separator />
350
+ <Select.Item value="orange">Orange</Select.Item>
351
+ ```
352
+
353
+ ## Hooks
354
+
355
+ ### useInitials
356
+
357
+ Derives up to two initials from a full name — the first letter of the first word and the first letter of the last word (falls back to a single letter for one-word names). This is what powers `Avatar`'s fallback, and is exported standalone in case you need initials somewhere else in your app (e.g. a table row, a comment list).
358
+
359
+ ```tsx
360
+ import { useInitials } from "@florianke/components";
361
+
362
+ function Example({ name }: { name: string }) {
363
+ const initials = useInitials(name);
364
+ return <span>{initials}</span>;
365
+ }
366
+
367
+ useInitials("Ada Lovelace"); // "AL"
368
+ useInitials("Cher"); // "C"
369
+ useInitials("Max Peter Mustermann"); // "MM" (first + last word)
370
+ ```
371
+
372
+ `useInitials(name: string): string` — must be called from within a Client Component, like any other React hook.
373
+
374
+ ## Package Exports
375
+
376
+ Every component (and the `useInitials` hook) is available from the main entry point, and also as its own subpath for more granular imports/bundling:
377
+
378
+ ```tsx
379
+ // Everything, from the main entry
380
+ import { Avatar, Button, Card, DropdownMenu, Input, Select, useInitials } from "@florianke/components";
381
+
382
+ // Or, individually
383
+ import { Avatar } from "@florianke/components/avatar";
384
+ import { Button } from "@florianke/components/button";
385
+ import { Card } from "@florianke/components/card";
386
+ import { DropdownMenu } from "@florianke/components/dropdown-menu";
387
+ import { Input } from "@florianke/components/input";
388
+ import { Select } from "@florianke/components/select";
389
+ import { useInitials } from "@florianke/components/hooks/use-initials";
390
+
391
+ import "@florianke/components/styles.css";
392
+ ```
393
+
394
+ ## License
395
+
396
+ MIT
package/dist/alert-dialog.d.mts ADDED
@@ -0,0 +1,42 @@
1
+ import * as React from "react";
2
+ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
3
+
4
+ //#region src/components/alert-dialog/alert-dialog.d.ts
5
+ type AlertDialogRootProps = React.ComponentPropsWithoutRef<typeof AlertDialog$1.Root>;
6
+ declare function AlertDialogRoot(props: AlertDialogRootProps): React.JSX.Element;
7
+ type AlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof AlertDialog$1.Trigger>;
8
+ declare function AlertDialogTrigger({
9
+ className,
10
+ ...props
11
+ }: AlertDialogTriggerProps): React.JSX.Element;
12
+ type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialog$1.Popup>;
13
+ declare function AlertDialogContent({
14
+ className,
15
+ children,
16
+ ...props
17
+ }: AlertDialogContentProps): React.JSX.Element;
18
+ type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialog$1.Title>;
19
+ declare function AlertDialogTitle({
20
+ className,
21
+ ...props
22
+ }: AlertDialogTitleProps): React.JSX.Element;
23
+ type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialog$1.Description>;
24
+ declare function AlertDialogDescription({
25
+ className,
26
+ ...props
27
+ }: AlertDialogDescriptionProps): React.JSX.Element;
28
+ type AlertDialogCloseProps = React.ComponentPropsWithoutRef<typeof AlertDialog$1.Close>;
29
+ declare function AlertDialogClose({
30
+ render,
31
+ ...props
32
+ }: AlertDialogCloseProps): React.JSX.Element;
33
+ declare const AlertDialog: typeof AlertDialogRoot & {
34
+ Trigger: typeof AlertDialogTrigger;
35
+ Content: typeof AlertDialogContent;
36
+ Title: typeof AlertDialogTitle;
37
+ Description: typeof AlertDialogDescription;
38
+ Close: typeof AlertDialogClose;
39
+ };
40
+ //#endregion
41
+ export { AlertDialog };
42
+ //# sourceMappingURL=alert-dialog.d.mts.map
package/dist/alert-dialog.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alert-dialog.d.mts","names":[],"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"mappings":";;;;KAQK,oBAAA,GAAuB,KAAA,CAAM,wBAAA,QACzB,aAAA,CAAgB,IAAA;AAAA,iBAGhB,eAAA,CAAgB,KAAA,EAAO,oBAAA,GAAoB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAI/C,uBAAA,GAA0B,KAAA,CAAM,wBAAA,QAC5B,aAAA,CAAgB,OAAA;AAAA,iBAGhB,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,uBAAA,GAAuB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAYvE,uBAAA,GAA0B,KAAA,CAAM,wBAAA,QAC5B,aAAA,CAAgB,KAAA;AAAA,iBAGhB,kBAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KA0BrB,qBAAA,GAAwB,KAAA,CAAM,wBAAA,QAC1B,aAAA,CAAgB,KAAA;AAAA,iBAGhB,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,qBAAA,GAAqB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KASnE,2BAAA,GAA8B,KAAA,CAAM,wBAAA,QAChC,aAAA,CAAgB,WAAA;AAAA,iBAGhB,sBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,2BAAA,GAA2B,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAUzB,qBAAA,GAAwB,KAAA,CAAM,wBAAA,QAC1B,aAAA,CAAgB,KAAA;AAAA,iBAGhB,gBAAA,CAAA;EAAmB,MAAA;EAAA,GAAW;AAAA,GAAS,qBAAA,GAAqB,KAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cASxD,WAAA,SAAW,eAAA"}
package/dist/alert-dialog.mjs ADDED
@@ -0,0 +1,57 @@
1
+ "use client";
2
+ import { t as cn } from "./cn-BpvCVwZv.mjs";
3
+ import { Button } from "./button.mjs";
4
+ import { Text } from "./text.mjs";
5
+ import "react";
6
+ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+ //#region src/components/alert-dialog/alert-dialog.tsx
9
+ function AlertDialogRoot(props) {
10
+ return /* @__PURE__ */ jsx(AlertDialog$1.Root, { ...props });
11
+ }
12
+ function AlertDialogTrigger({ className, ...props }) {
13
+ return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
14
+ className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30", className),
15
+ ...props
16
+ });
17
+ }
18
+ function AlertDialogContent({ className, children, ...props }) {
19
+ return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, { className: cn("fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 dark:bg-black/50", "data-starting-style:opacity-0 data-ending-style:opacity-0", "supports-[-webkit-touch-callout:none]:absolute") }), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
20
+ className: cn("fixed top-1/2 left-1/2 z-50 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-(--border) bg-(--popover) p-4 text-(--popover-foreground) shadow-lg outline-none", "transition-[transform,opacity] duration-150 ease-out", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
21
+ ...props,
22
+ children
23
+ })] });
24
+ }
25
+ function AlertDialogTitle({ className, ...props }) {
26
+ return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
27
+ className: cn("text-base font-semibold", className),
28
+ ...props
29
+ });
30
+ }
31
+ function AlertDialogDescription({ className, ...props }) {
32
+ return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
33
+ render: /* @__PURE__ */ jsx(Text, {
34
+ as: "p",
35
+ size: "base"
36
+ }),
37
+ className: cn("text-(--muted-foreground)", className),
38
+ ...props
39
+ });
40
+ }
41
+ function AlertDialogClose({ render, ...props }) {
42
+ return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
43
+ render: render ?? /* @__PURE__ */ jsx(Button, { variant: "outline" }),
44
+ ...props
45
+ });
46
+ }
47
+ const AlertDialog = Object.assign(AlertDialogRoot, {
48
+ Trigger: AlertDialogTrigger,
49
+ Content: AlertDialogContent,
50
+ Title: AlertDialogTitle,
51
+ Description: AlertDialogDescription,
52
+ Close: AlertDialogClose
53
+ });
54
+ //#endregion
55
+ export { AlertDialog };
56
+
57
+ //# sourceMappingURL=alert-dialog.mjs.map
package/dist/alert-dialog.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"alert-dialog.mjs","names":["BaseAlertDialog"],"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"../button/button\";\nimport { Text } from \"../text/text\";\n\ntype AlertDialogRootProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Root\n>;\n\nfunction AlertDialogRoot(props: AlertDialogRootProps) {\n return <BaseAlertDialog.Root {...props} />;\n}\n\ntype AlertDialogTriggerProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Trigger\n>;\n\nfunction AlertDialogTrigger({ className, ...props }: AlertDialogTriggerProps) {\n return (\n <BaseAlertDialog.Trigger\n className={cn(\n \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype AlertDialogContentProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Popup\n>;\n\nfunction AlertDialogContent({\n className,\n children,\n ...props\n}: AlertDialogContentProps) {\n return (\n <BaseAlertDialog.Portal>\n <BaseAlertDialog.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/20 transition-opacity duration-150 dark:bg-black/50\",\n \"data-starting-style:opacity-0 data-ending-style:opacity-0\",\n \"supports-[-webkit-touch-callout:none]:absolute\",\n )}\n />\n <BaseAlertDialog.Popup\n className={cn(\n \"fixed top-1/2 left-1/2 z-50 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-(--border) bg-(--popover) p-4 text-(--popover-foreground) shadow-lg outline-none\",\n \"transition-[transform,opacity] duration-150 ease-out\",\n \"data-starting-style:scale-95 data-starting-style:opacity-0\",\n \"data-ending-style:scale-95 data-ending-style:opacity-0\",\n className,\n )}\n {...props}\n >\n {children}\n </BaseAlertDialog.Popup>\n </BaseAlertDialog.Portal>\n );\n}\n\ntype AlertDialogTitleProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Title\n>;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n return (\n <BaseAlertDialog.Title\n className={cn(\"text-base font-semibold\", className)}\n {...props}\n />\n );\n}\n\ntype AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Description\n>;\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: AlertDialogDescriptionProps) {\n return (\n <BaseAlertDialog.Description\n render={<Text as=\"p\" size=\"base\" />}\n className={cn(\"text-(--muted-foreground)\", className)}\n {...props}\n />\n );\n}\n\ntype AlertDialogCloseProps = React.ComponentPropsWithoutRef<\n typeof BaseAlertDialog.Close\n>;\n\nfunction AlertDialogClose({ render, ...props }: AlertDialogCloseProps) {\n return (\n <BaseAlertDialog.Close\n render={render ?? <Button variant=\"outline\" />}\n {...props}\n />\n );\n}\n\nexport const AlertDialog = Object.assign(AlertDialogRoot, {\n Trigger: AlertDialogTrigger,\n Content: AlertDialogContent,\n Title: AlertDialogTitle,\n Description: AlertDialogDescription,\n Close: AlertDialogClose,\n});\n"],"mappings":";;;;;;;;AAYA,SAAS,gBAAgB,OAA6B;AACpD,QAAO,oBAACA,cAAgB,MAAjB,EAAsB,GAAI,OAAS,CAAA;;AAO5C,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAACA,cAAgB,SAAjB;EACE,WAAW,GACT,+EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,mBAAmB,EAC1B,WACA,UACA,GAAG,SACuB;AAC1B,QACE,qBAACA,cAAgB,QAAjB,EAAA,UAAA,CACE,oBAACA,cAAgB,UAAjB,EACE,WAAW,GACT,mFACA,6DACA,iDACD,EACD,CAAA,EACF,oBAACA,cAAgB,OAAjB;EACE,WAAW,GACT,6NACA,wDACA,8DACA,0DACA,UACD;EACD,GAAI;EAEH;EACqB,CAAA,CACD,EAAA,CAAA;;AAQ7B,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,QACE,oBAACA,cAAgB,OAAjB;EACE,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAQN,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC2B;AAC9B,QACE,oBAACA,cAAgB,aAAjB;EACE,QAAQ,oBAAC,MAAD;GAAM,IAAG;GAAI,MAAK;GAAS,CAAA;EACnC,WAAW,GAAG,6BAA6B,UAAU;EACrD,GAAI;EACJ,CAAA;;AAQN,SAAS,iBAAiB,EAAE,QAAQ,GAAG,SAAgC;AACrE,QACE,oBAACA,cAAgB,OAAjB;EACE,QAAQ,UAAU,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;EAC9C,GAAI;EACJ,CAAA;;AAIN,MAAa,cAAc,OAAO,OAAO,iBAAiB;CACxD,SAAS;CACT,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACR,CAAC"}
package/dist/avatar.mjs CHANGED
@@ -2,8 +2,8 @@
2
2
  import { t as cn } from "./cn-BpvCVwZv.mjs";
3
3
  import { useInitials } from "./hooks/use-initials.mjs";
4
4
  import "react";
5
- import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
6
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
7
7
  //#region src/components/avatar/avatar.tsx
8
8
  const rootSizes = {
9
9
  small: "size-7",
package/dist/button.d.mts CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { Button as Button$1 } from "@base-ui/react/button";
3
3
 
4
4
  //#region src/components/button/button.d.ts
5
- type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "link";
5
+ type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "link" | "destructive";
6
6
  type ButtonSize = "sm" | "md";
7
7
  type ButtonProps = React.ComponentPropsWithoutRef<typeof Button$1> & {
8
8
  variant?: ButtonVariant;
package/dist/button.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.mts","names":[],"sources":["../src/components/button/button.tsx"],"mappings":";;;;KAIK,aAAA;AAAA,KACA,UAAA;AAAA,KAEA,WAAA,GAAc,KAAA,CAAM,wBAAA,QAAgC,QAAA;EACvD,OAAA,GAAU,aAAA;EACV,IAAA,GAAO,UAAA;AAAA;AAAA,iBAqBO,MAAA,CAAA;EACd,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,KAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"button.d.mts","names":[],"sources":["../src/components/button/button.tsx"],"mappings":";;;;KAIK,aAAA;AAAA,KAOA,UAAA;AAAA,KAEA,WAAA,GAAc,KAAA,CAAM,wBAAA,QAAgC,QAAA;EACvD,OAAA,GAAU,aAAA;EACV,IAAA,GAAO,UAAA;AAAA;AAAA,iBAuBO,MAAA,CAAA;EACd,SAAA;EACA,OAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,KAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/button.mjs CHANGED
@@ -1,14 +1,15 @@
1
1
  import { t as cn } from "./cn-BpvCVwZv.mjs";
2
2
  import "react";
3
- import { jsx } from "react/jsx-runtime";
4
3
  import { Button as Button$1 } from "@base-ui/react/button";
4
+ import { jsx } from "react/jsx-runtime";
5
5
  //#region src/components/button/button.tsx
6
6
  const variants = {
7
7
  primary: "bg-(--foreground) text-(--background) hover:bg-(--foreground)/85 active:bg-(--foreground)/75",
8
8
  secondary: "bg-(--border) text-(--foreground) hover:bg-(--input-border) active:bg-(--input-border)",
9
9
  outline: "border border-(--border) bg-transparent text-(--foreground) hover:bg-(--muted) active:bg-(--border)",
10
10
  ghost: "text-(--foreground) hover:bg-(--muted) active:bg-(--border)",
11
- link: "h-auto p-0 text-(--foreground) underline-offset-4 hover:underline"
11
+ link: "h-auto p-0 text-(--foreground) underline-offset-4 hover:underline",
12
+ destructive: "bg-(--destructive) text-white hover:bg-(--destructive)/90 active:bg-(--destructive)/80 dark:bg-(--destructive)/60"
12
13
  };
13
14
  const sizes = {
14
15
  sm: "h-7 rounded-md px-3 gap-1.5 text-[12px] [&_svg]:size-3.5 [&_svg]:shrink-0",
package/dist/button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.mjs","names":["BaseButton"],"sources":["../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/cn\";\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"link\";\ntype ButtonSize = \"sm\" | \"md\";\n\ntype ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {\n variant?: ButtonVariant;\n size?: ButtonSize;\n};\n\nconst variants: Record<ButtonVariant, string> = {\n primary:\n \"bg-(--foreground) text-(--background) hover:bg-(--foreground)/85 active:bg-(--foreground)/75\",\n secondary:\n \"bg-(--border) text-(--foreground) hover:bg-(--input-border) active:bg-(--input-border)\",\n outline:\n \"border border-(--border) bg-transparent text-(--foreground) hover:bg-(--muted) active:bg-(--border)\",\n ghost:\n \"text-(--foreground) hover:bg-(--muted) active:bg-(--border)\",\n link:\n \"h-auto p-0 text-(--foreground) underline-offset-4 hover:underline\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n sm: \"h-7 rounded-md px-3 gap-1.5 text-[12px] [&_svg]:size-3.5 [&_svg]:shrink-0\",\n md: \"h-8 rounded-md px-4 gap-2 text-[14px] [&_svg]:size-4 [&_svg]:shrink-0\",\n};\n\nexport function Button({\n className,\n variant = \"primary\",\n size = \"md\",\n ...props\n}: ButtonProps) {\n return (\n <BaseButton\n className={cn(\n \"inline-flex items-center justify-center font-medium transition-colors\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30\",\n variants[variant],\n variant !== \"link\" && sizes[size],\n className,\n )}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;AAYA,MAAM,WAA0C;CAC9C,SACE;CACF,WACE;CACF,SACE;CACF,OACE;CACF,MACE;CACH;AAED,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,SACW;AACd,QACE,oBAACA,UAAD;EACE,WAAW,GACT,yEACA,oDACA,kFACA,SAAS,UACT,YAAY,UAAU,MAAM,OAC5B,UACD;EACD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"button.mjs","names":["BaseButton"],"sources":["../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/cn\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"outline\"\n | \"ghost\"\n | \"link\"\n | \"destructive\";\ntype ButtonSize = \"sm\" | \"md\";\n\ntype ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {\n variant?: ButtonVariant;\n size?: ButtonSize;\n};\n\nconst variants: Record<ButtonVariant, string> = {\n primary:\n \"bg-(--foreground) text-(--background) hover:bg-(--foreground)/85 active:bg-(--foreground)/75\",\n secondary:\n \"bg-(--border) text-(--foreground) hover:bg-(--input-border) active:bg-(--input-border)\",\n outline:\n \"border border-(--border) bg-transparent text-(--foreground) hover:bg-(--muted) active:bg-(--border)\",\n ghost:\n \"text-(--foreground) hover:bg-(--muted) active:bg-(--border)\",\n link:\n \"h-auto p-0 text-(--foreground) underline-offset-4 hover:underline\",\n destructive:\n \"bg-(--destructive) text-white hover:bg-(--destructive)/90 active:bg-(--destructive)/80 dark:bg-(--destructive)/60\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n sm: \"h-7 rounded-md px-3 gap-1.5 text-[12px] [&_svg]:size-3.5 [&_svg]:shrink-0\",\n md: \"h-8 rounded-md px-4 gap-2 text-[14px] [&_svg]:size-4 [&_svg]:shrink-0\",\n};\n\nexport function Button({\n className,\n variant = \"primary\",\n size = \"md\",\n ...props\n}: ButtonProps) {\n return (\n <BaseButton\n className={cn(\n \"inline-flex items-center justify-center font-medium transition-colors\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring)/30\",\n variants[variant],\n variant !== \"link\" && sizes[size],\n className,\n )}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;AAkBA,MAAM,WAA0C;CAC9C,SACE;CACF,WACE;CACF,SACE;CACF,OACE;CACF,MACE;CACF,aACE;CACH;AAED,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,OAAO,MACP,GAAG,SACW;AACd,QACE,oBAACA,UAAD;EACE,WAAW,GACT,yEACA,oDACA,kFACA,SAAS,UACT,YAAY,UAAU,MAAM,OAC5B,UACD;EACD,GAAI;EACJ,CAAA"}
package/dist/field.d.mts ADDED
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+
3
+ //#region src/components/field/field.d.ts
4
+ type FieldProps = React.HTMLAttributes<HTMLDivElement>;
5
+ declare function Field({
6
+ className,
7
+ ...props
8
+ }: FieldProps): React.JSX.Element;
9
+ //#endregion
10
+ export { Field };
11
+ //# sourceMappingURL=field.d.mts.map
package/dist/field.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field.d.mts","names":[],"sources":["../src/components/field/field.tsx"],"mappings":";;;KAGK,UAAA,GAAa,KAAA,CAAM,cAAA,CAAe,cAAA;AAAA,iBAEvB,KAAA,CAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,KAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/field.mjs ADDED
@@ -0,0 +1,14 @@
1
+ import { t as cn } from "./cn-BpvCVwZv.mjs";
2
+ import "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/field/field.tsx
5
+ function Field({ className, ...props }) {
6
+ return /* @__PURE__ */ jsx("div", {
7
+ className: cn("flex flex-col gap-y-1.5", className),
8
+ ...props
9
+ });
10
+ }
11
+ //#endregion
12
+ export { Field };
13
+
14
+ //# sourceMappingURL=field.mjs.map
package/dist/field.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field.mjs","names":[],"sources":["../src/components/field/field.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ntype FieldProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function Field({ className, ...props }: FieldProps) {\n return (\n <div className={cn(\"flex flex-col gap-y-1.5\", className)} {...props} />\n );\n}\n"],"mappings":";;;;AAKA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B,UAAU;EAAE,GAAI;EAAS,CAAA"}
package/dist/heading.d.mts ADDED
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+
3
+ //#region src/components/heading/heading.d.ts
4
+ type HeadingLevel = "h1" | "h2" | "h3";
5
+ type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
6
+ level?: HeadingLevel;
7
+ ref?: React.Ref<HTMLHeadingElement>;
8
+ };
9
+ declare function Heading({
10
+ level,
11
+ className,
12
+ ref,
13
+ ...props
14
+ }: HeadingProps): React.JSX.Element;
15
+ //#endregion
16
+ export { Heading };
17
+ //# sourceMappingURL=heading.d.mts.map
package/dist/heading.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"heading.d.mts","names":[],"sources":["../src/components/heading/heading.tsx"],"mappings":";;;KAGK,YAAA;AAAA,KAQA,YAAA,GAAe,KAAA,CAAM,cAAA,CAAe,kBAAA;EACvC,KAAA,GAAQ,YAAA;EACR,GAAA,GAAM,KAAA,CAAM,GAAA,CAAI,kBAAA;AAAA;AAAA,iBAGF,OAAA,CAAA;EAAU,KAAA;EAAc,SAAA;EAAW,GAAA;EAAA,GAAQ;AAAA,GAAS,YAAA,GAAY,KAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/heading.mjs ADDED
@@ -0,0 +1,20 @@
1
+ import { t as cn } from "./cn-BpvCVwZv.mjs";
2
+ import "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/heading/heading.tsx
5
+ const levels = {
6
+ h1: "text-3xl leading-tight tracking-tight",
7
+ h2: "text-xl leading-snug",
8
+ h3: "text-sm leading-5"
9
+ };
10
+ function Heading({ level = "h1", className, ref, ...props }) {
11
+ return /* @__PURE__ */ jsx(level, {
12
+ ref,
13
+ className: cn("font-sans font-medium text-(--foreground)", levels[level], className),
14
+ ...props
15
+ });
16
+ }
17
+ //#endregion
18
+ export { Heading };
19
+
20
+ //# sourceMappingURL=heading.mjs.map
package/dist/heading.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"heading.mjs","names":["Component"],"sources":["../src/components/heading/heading.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ntype HeadingLevel = \"h1\" | \"h2\" | \"h3\";\n\nconst levels: Record<HeadingLevel, string> = {\n h1: \"text-3xl leading-tight tracking-tight\",\n h2: \"text-xl leading-snug\",\n h3: \"text-sm leading-5\",\n};\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n level?: HeadingLevel;\n ref?: React.Ref<HTMLHeadingElement>;\n};\n\nexport function Heading({ level = \"h1\", className, ref, ...props }: HeadingProps) {\n const Component = level;\n\n return (\n <Component\n ref={ref}\n className={cn(\n \"font-sans font-medium text-(--foreground)\",\n levels[level],\n className,\n )}\n {...props}\n />\n );\n}\n"],"mappings":";;;;AAKA,MAAM,SAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAOD,SAAgB,QAAQ,EAAE,QAAQ,MAAM,WAAW,KAAK,GAAG,SAAuB;AAGhF,QACE,oBAACA,OAAD;EACO;EACL,WAAW,GACT,6CACA,OAAO,QACP,UACD;EACD,GAAI;EACJ,CAAA"}