npm - @bloomkit/react - Versions diffs - 0.2.12 → 0.2.15 - Mend

@bloomkit/react 0.2.12 → 0.2.15

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 (7) hide show

package/README.md CHANGED Viewed

@@ -9,298 +9,42 @@ Soft shapes. Breathing motion. Living color.
 ## Install
 ```bash
-npm install @bloomkit/react
+pnpm add @bloomkit/react
 ```
 ## Setup
-Add the stylesheet to your CSS entry file:
+Import the stylesheet in your CSS entry file:
 ```css
-/* index.css or globals.css */
 @import "@bloomkit/react/styles.css";
 ```
-Add the Google Fonts to your HTML `<head>`:
+Add the fonts to your HTML `<head>`:
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,500&display=swap" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,500&display=swap"
+  rel="stylesheet"
+/>
 ```
 ## Customization
-All components accept a `className` prop for customization with Tailwind utility classes:
+All components accept a `className` prop. Tailwind utility classes merge cleanly with bloom's defaults — your classes always win.
 ```tsx
 <Button variant="primary" className="rounded-full px-8">
   Custom Button
 </Button>
-<Card className="bg-white shadow-xl max-w-md">
+<Card className="max-w-md">
   <CardContent>Custom styled card</CardContent>
 </Card>
-<Input className="border-blue-300 focus:border-blue-500" placeholder="Custom input" />
-<Badge variant="sage" className="text-sm uppercase tracking-wider">
-  Custom Badge
-</Badge>
-```
-Tailwind classes merge cleanly with bloom's defaults — your classes always win.
-## Components
-### Button
-```tsx
-import { Button } from "@bloomkit/react";
-<Button variant="primary">Save</Button>
-<Button variant="secondary">Cancel</Button>
-<Button variant="ghost">Skip</Button>
-<Button variant="accent">Upgrade</Button>
-<Button variant="success">Confirm</Button>
-<Button variant="warning">Careful</Button>
-<Button variant="danger">Delete</Button>
-```
-Variants: `primary` | `secondary` | `ghost` | `accent` | `success` | `warning` | `danger`
-### Card
-```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@bloomkit/react";
-<Card variant="interactive">
-  <CardHeader>
-    <CardTitle>Morning Reflection</CardTitle>
-    <CardDescription>How are you feeling today?</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card body content</p>
-  </CardContent>
-  <CardFooter>
-    <Button variant="ghost">Continue</Button>
-  </CardFooter>
-</Card>
-```
-Variants: `default` | `interactive` | `featured`
-### Input & Textarea
-```tsx
-import { Input, Textarea } from "@bloomkit/react";
-<Input placeholder="Your name" />
-<Input type="email" placeholder="your@email.com" />
-<Textarea placeholder="Write something beautiful..." />
-```
-### Toggle
-```tsx
-import { Toggle } from "@bloomkit/react";
-<Toggle label="Ambient motion" defaultChecked />
-<Toggle label="Dark mode" />
-```
-### Badge
-```tsx
-import { Badge } from "@bloomkit/react";
-<Badge variant="sage" dot>Active</Badge>
-<Badge variant="sand">Pending</Badge>
-<Badge variant="lavender">Draft</Badge>
-<Badge variant="rose">Archived</Badge>
-```
-Variants: `sage` | `sand` | `lavender` | `rose`
-### Alert
-```tsx
-import { Alert, AlertTitle, AlertDescription } from "@bloomkit/react";
-<Alert variant="success">
-  <AlertTitle>Saved</AlertTitle>
-  <AlertDescription>Your changes have been saved.</AlertDescription>
-</Alert>
-```
-Variants: `info` | `success` | `warning` | `error`
-### Avatar
-```tsx
-import { Avatar, AvatarGroup } from "@bloomkit/react";
-<Avatar initials="JD" size="md" />
-<Avatar src="/photo.jpg" alt="Jane Doe" />
-<AvatarGroup>
-  <Avatar initials="A" />
-  <Avatar initials="B" />
-  <Avatar initials="C" />
-</AvatarGroup>
-```
-Sizes: `sm` | `md` | `lg`
-### Checkbox
-```tsx
-import { Checkbox } from "@bloomkit/react";
-<Checkbox label="Accept terms" />
-<Checkbox label="Subscribe to updates" defaultChecked />
-<Checkbox />
-```
-### Radio Group
-```tsx
-import { RadioGroup, RadioGroupItem } from "@bloomkit/react";
-<RadioGroup defaultValue="calm">
-  <RadioGroupItem value="calm" label="Calm" />
-  <RadioGroupItem value="focused" label="Focused" />
-  <RadioGroupItem value="energized" label="Energized" />
-</RadioGroup>
 ```
-### Select
-```tsx
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@bloomkit/react";
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="Pick a mood" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="calm">Calm</SelectItem>
-    <SelectItem value="focused">Focused</SelectItem>
-    <SelectItem value="energized">Energized</SelectItem>
-  </SelectContent>
-</Select>
-```
-### Tooltip
-```tsx
-import { Tooltip, TooltipProvider } from "@bloomkit/react";
-<TooltipProvider>
-  <Tooltip content="Save your progress">
-    <Button>Save</Button>
-  </Tooltip>
-</TooltipProvider>
-```
-### Progress
-```tsx
-import { Progress, ProgressCircular } from "@bloomkit/react";
-<Progress value={60} />
-<ProgressCircular value={60} size={48} />
-```
-### Slider
-```tsx
-import { Slider } from "@bloomkit/react";
-<Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" />
-```
-### Modal
-```tsx
-import { Modal } from "@bloomkit/react";
-const [open, setOpen] = useState(false);
-<Button onClick={() => setOpen(true)}>Open</Button>
-<Modal open={open} onOpenChange={setOpen} title="Hello" description="A gentle modal.">
-  <p>Modal content here.</p>
-</Modal>
-```
-### Dropdown
-```tsx
-import { Dropdown, DropdownItem, DropdownSeparator } from "@bloomkit/react";
-<Dropdown trigger={<Button>Options</Button>}>
-  <DropdownItem>Edit</DropdownItem>
-  <DropdownItem>Duplicate</DropdownItem>
-  <DropdownSeparator />
-  <DropdownItem>Delete</DropdownItem>
-</Dropdown>
-```
-### Tabs
-```tsx
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@bloomkit/react";
-<Tabs defaultValue="overview">
-  <TabsList variant="pill">
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="activity">Activity</TabsTrigger>
-  </TabsList>
-  <TabsContent value="overview">Overview content</TabsContent>
-  <TabsContent value="activity">Activity content</TabsContent>
-</Tabs>
-```
-### Date Picker
-```tsx
-import { DatePicker } from "@bloomkit/react";
-const [date, setDate] = useState<Date>();
-<DatePicker value={date} onChange={setDate} placeholder="Pick a date" />
-```
-### Toast
-```tsx
-import { ToastProvider, useToast } from "@bloomkit/react";
-// Wrap your app
-<ToastProvider>
-  <App />
-</ToastProvider>
-// Inside a component
-const { toast } = useToast();
-toast({ title: "Saved!", variant: "success" });
-```
-Variants: `info` | `success` | `warning` | `error`
-### Skeleton
-```tsx
-import { Skeleton } from "@bloomkit/react";
-<Skeleton variant="text" />
-<Skeleton variant="card" />
-<Skeleton variant="avatar" />
-<Skeleton variant="custom" className="h-[100px] w-[200px] rounded-full" />
-```
-Variants: `text` | `card` | `avatar` | `custom`
 ## Hooks
 ### useReducedMotion
@@ -315,7 +59,7 @@ const reduced = useReducedMotion();
 ### useBreathing
-Returns a CSS animation style object with a randomized delay for the breathing animation.
+Returns an animation style with a randomized delay for the breathing effect.
 ```tsx
 import { useBreathing } from "@bloomkit/react";
@@ -331,12 +75,10 @@ Wrap your app with `ThemeProvider` and use the `useTheme` hook:
 ```tsx
 import { ThemeProvider, useTheme } from "@bloomkit/react";
-// Wrap your app — defaults to OS preference
 <ThemeProvider defaultColorMode="system">
   <App />
 </ThemeProvider>
-// Inside any component
 function ThemeToggle() {
   const { resolvedMode, toggleColorMode } = useTheme();
@@ -348,7 +90,7 @@ function ThemeToggle() {
 }
 ```
-### useTheme return values
+### useTheme
 | Property | Type | Description |
 |----------|------|-------------|
@@ -368,18 +110,17 @@ The provider manages the `.dark` / `.light` class on `<html>` automatically and
 ### Built-in Presets
-Bloom ships with 3 preset palettes you can use out of the box:
+Bloom ships with 3 preset palettes:
 ```tsx
 import { ThemeProvider, builtInPalettes } from "@bloomkit/react";
-// Pass all 3 presets — users can switch between bloom (default), midnight, desert, ocean
 <ThemeProvider palettes={builtInPalettes}>
   <App />
 </ThemeProvider>
 ```
-Or import individual palettes:
+Or import individually:
 ```tsx
 import { midnightGarden, desertRose, oceanMist } from "@bloomkit/react";
@@ -393,57 +134,36 @@ import { midnightGarden, desertRose, oceanMist } from "@bloomkit/react";
 ### Custom Palettes
-Define your own palettes and let users switch between them at runtime. Each palette can have its own light and dark mode colors, fonts, radius, and shadows.
+Define your own palettes and let users switch at runtime:
 ```tsx
 import { ThemeProvider, useTheme, type BloomPalette } from "@bloomkit/react";
-const myPalettes: BloomPalette[] = [
-  {
-    name: "ocean",
-    light: {
-      "--bloom-font": "'Nunito', sans-serif",
-      "--bloom-font-display": "'Space Grotesk', sans-serif",
-      "--bloom-bg": "#F4F8FA",
-      "--bloom-surface": "#E8F0F4",
-      "--bloom-surface2": "#D4E2EA",
-      "--bloom-text": "#1A2E3A",
-      "--bloom-text-secondary": "#5E7A8C",
-      "--bloom-accent1": "#6AB8C4",
-      "--bloom-accent1-deep": "#3A96A8",
-      "--bloom-accent2": "#E0A860",
-      "--bloom-accent2-deep": "#C08840",
-      "--bloom-accent3": "#7CA0D4",
-      "--bloom-accent3-deep": "#5A80B8",
-      "--bloom-accent4": "#D47A7A",
-      "--bloom-accent4-deep": "#B85A5A",
-    },
-    dark: {
-      "--bloom-font": "'Nunito', sans-serif",
-      "--bloom-font-display": "'Space Grotesk', sans-serif",
-      "--bloom-bg": "#0E1A20",
-      "--bloom-surface": "#162228",
-      "--bloom-surface2": "#1E2E36",
-      "--bloom-text": "#D8E8EE",
-      "--bloom-text-secondary": "#7A9AAC",
-      "--bloom-accent1": "#4A9AAC",
-      "--bloom-accent1-deep": "#2A7A8C",
-      "--bloom-accent2": "#C89048",
-      "--bloom-accent2-deep": "#A87030",
-      "--bloom-accent3": "#5A80B8",
-      "--bloom-accent3-deep": "#3A60A0",
-      "--bloom-accent4": "#B85A5A",
-      "--bloom-accent4-deep": "#983A3A",
-    },
+const myPalette: BloomPalette = {
+  name: "ocean",
+  light: {
+    "--bloom-font": "'Nunito', sans-serif",
+    "--bloom-font-display": "'Space Grotesk', sans-serif",
+    "--bloom-bg": "#F4F8FA",
+    "--bloom-surface": "#E8F0F4",
+    "--bloom-surface2": "#D4E2EA",
+    "--bloom-text": "#1A2E3A",
+    "--bloom-text-secondary": "#5E7A8C",
+    "--bloom-accent1": "#6AB8C4",
+    "--bloom-accent1-deep": "#3A96A8",
+    // ...
+  },
+  dark: {
+    "--bloom-bg": "#0E1A20",
+    "--bloom-surface": "#162228",
+    // ...
   },
-];
+};
-// Pass palettes to the provider
-<ThemeProvider palettes={myPalettes}>
+<ThemeProvider palettes={[myPalette]}>
   <App />
 </ThemeProvider>
-// Switch palettes from anywhere
 function PaletteSwitcher() {
   const { palette, setPalette, palettes } = useTheme();
@@ -457,9 +177,9 @@ function PaletteSwitcher() {
 }
 ```
-The `"bloom"` palette is always available as the default. Custom palettes override the default tokens — any token you don't specify falls back to Bloom's defaults. Both color mode and palette choice are persisted to `localStorage`.
+The `"bloom"` palette is always available as the default. Any value you don't specify falls back to Bloom's defaults.
-### Available tokens
+## Design Tokens
 | Token | What it controls |
 |-------|-----------------|
@@ -470,10 +190,10 @@ The `"bloom"` palette is always available as the default. Custom palettes overri
 | `--bloom-surface2` | Borders, dividers, hover states |
 | `--bloom-text` | Primary text color |
 | `--bloom-text-secondary` | Labels, descriptions, captions |
-| `--bloom-accent1` / `--bloom-accent1-deep` | Primary/success color (sage) |
-| `--bloom-accent2` / `--bloom-accent2-deep` | Warning color (sand) |
-| `--bloom-accent3` / `--bloom-accent3-deep` | Info/accent color (lavender) |
-| `--bloom-accent4` / `--bloom-accent4-deep` | Danger/error color (rose) |
+| `--bloom-accent1` / `--bloom-accent1-deep` | Primary/success color |
+| `--bloom-accent2` / `--bloom-accent2-deep` | Warning color |
+| `--bloom-accent3` / `--bloom-accent3-deep` | Info/accent color |
+| `--bloom-accent4` / `--bloom-accent4-deep` | Danger/error color |
 | `--bloom-shadow` / `--bloom-shadow-hover` | Elevation shadows |
 | `--bloom-radius-sm` / `--bloom-radius` / `--bloom-radius-lg` / `--bloom-radius-pill` | Border radius |
 | `--bloom-duration` / `--bloom-duration-slow` / `--bloom-duration-fast` | Animation timing |

package/dist/index.cjs CHANGED Viewed

@@ -1800,7 +1800,7 @@ var AccordionTrigger = _react.forwardRef.call(void 0,
             strokeWidth: "1.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            className: "shrink-0 transition-transform duration-[var(--bloom-duration-fast)]",
+            className: "shrink-0 transition-transform duration-[var(--bloom-duration-fast)] ease-[var(--bloom-ease)]",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M4 6l4 4 4-4" })
           }
         )
@@ -1817,8 +1817,8 @@ var AccordionContent = _react.forwardRef.call(void 0,
       className: cn(
         "overflow-hidden",
         "text-[length:var(--bloom-text-body)] font-[family-name:var(--bloom-font)] color-[var(--bloom-text-secondary)]",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        "data-[state=open]:animate-[bloom-accordion-open_var(--bloom-duration-fast)_var(--bloom-ease)]",
+        "data-[state=closed]:animate-[bloom-accordion-close_var(--bloom-duration-fast)_var(--bloom-ease)]",
         className
       ),
       ...props,