@customafk/lunas-ui 0.2.4 → 0.2.6

package/README.md

@@ -303,18 +303,48 @@ See [CHANGELOG.md](CHANGELOG.md) for version history and changes.
 
 ISC © [CustomAFK](https://github.com/QuangPhamvt)
 
-## 🤖 Component API Documentation for Developers and AI Assistants
+## 🤖 For Claude / AI Coding Assistants
 
-The following provides a simplified component reference for all components in the library. For detailed props documentation and usage examples, visit our documentation site.
+This package ships an `ai-docs.md` file at the package root, optimized for AI
+context windows. It covers import rules, the full component catalog with prop
+types, and copy-ready usage patterns.
 
-### Integration Patterns
+### Option A — Point Claude's project context at the file
 
-- Form components should be used within a `FormWrapper` component
-- Dialog components typically need `open` and `onOpenChange` props to be controlled
-- All components support `className` for custom styling with Tailwind
-- Many components have variants that can be accessed via the `variant` prop
-- Component styles are customizable through CSS variables in `:root`
-- All UI components are responsive and support various screen sizes
+Add this to your project's `.claude/CLAUDE.md` (or create one):
+
+```markdown
+## UI Library Context
+
+This project uses `@customafk/lunas-ui`. Read the library reference before writing components:
+
+@node_modules/@customafk/lunas-ui/ai-docs.md
+```
+
+Claude Code will attach the file automatically to every conversation in the project.
+
+### Option B — Add to your AI tooling's context source list
+
+For Cursor `.cursorrules`, Copilot `codeGeneration.instructions`, or an MCP RAG server, add:
+
+```
+node_modules/@customafk/lunas-ui/ai-docs.md
+```
+
+### Option C — One-shot reference in chat
+
+```
+I'm using @customafk/lunas-ui.
+Read node_modules/@customafk/lunas-ui/ai-docs.md for import paths and usage.
+```
+
+### Key rules the AI must follow
+
+1. **Named imports only** — `import { Button } from '@customafk/lunas-ui/ui/button'`
+2. **No default imports** — the library has no default exports
+3. **Use full category paths** — `…/ui/button`, not `…/button`
+4. **Import styles in root layout** — `styles/base` + `styles/theme` are required
+5. **Never import from `@radix-ui/*` directly** — use the lunas-ui wrappers
 
 ## 🙋‍♀️ Support
 

package/ai-docs.md

@@ -0,0 +1,419 @@
+# @customafk/lunas-ui — AI Reference Documentation
+
+> Optimized for AI agents (Claude, GitHub Copilot, Cursor, etc.).
+> Add a reference to this file in your project's CLAUDE.md or AI context config
+> so the assistant always has accurate import paths, prop types, and usage patterns.
+
+## Package Identity
+
+- **Package name:** `@customafk/lunas-ui`
+- **Framework:** React 19+ · TypeScript 5+
+- **Styling:** TailwindCSS v4 (CSS custom properties — stylesheet import is required)
+- **Radix UI:** primitives are wrapped — always import from `@customafk/lunas-ui/*`, never from `@radix-ui/*`
+
+---
+
+## CRITICAL: Required Stylesheet Imports
+
+Import these in your root layout **before** any component renders.
+Without them all color tokens and base styles will be absent.
+
+```tsx
+import '@customafk/lunas-ui/styles/base';
+import '@customafk/lunas-ui/styles/theme';
+// Optional: enhanced typographic defaults
+import '@customafk/lunas-ui/styles/typography';
+```
+
+---
+
+## Import Rules (STRICT)
+
+### Rule 1 — Named imports only; never default imports
+
+```tsx
+// ✅ CORRECT
+import { Button } from '@customafk/lunas-ui/ui/button';
+import type { ButtonProps } from '@customafk/lunas-ui/ui/button';
+
+// ❌ WRONG — no default export exists
+import Button from '@customafk/lunas-ui/ui/button';
+```
+
+### Rule 2 — Use the exact published export paths
+
+Each component has its own path that matches the `package.json` exports map exactly.
+
+```tsx
+// ✅ CORRECT
+import { Button } from '@customafk/lunas-ui/ui/button';
+import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';
+import { Flex } from '@customafk/lunas-ui/layouts/flex';
+import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';
+import { Description } from '@customafk/lunas-ui/features/descriptions';
+
+// ❌ WRONG — internal source path, not shipped
+import { Button } from '@customafk/lunas-ui/packages/components/ui/button';
+
+// ❌ WRONG — missing category prefix
+import { Button } from '@customafk/lunas-ui/button';
+```
+
+### Rule 3 — Never import Radix UI primitives directly
+
+```tsx
+// ❌ WRONG
+import { AlertDialog } from '@radix-ui/react-alert-dialog';
+
+// ✅ CORRECT — use the lunas-ui wrapper
+import { AlertDialog } from '@customafk/lunas-ui/ui/alert-dialog';
+```
+
+### Rule 4 — Separate type and value imports
+
+```tsx
+import { Statistic } from '@customafk/lunas-ui/data-display/statistic';
+import type { StatisticProps } from '@customafk/lunas-ui/data-display/statistic';
+```
+
+---
+
+## Component Catalog
+
+### UI Primitives — `@customafk/lunas-ui/ui/*`
+
+| Component(s) | Full import path | Key props |
+|---|---|---|
+| `Button` | `.../ui/button` | `variant`, `color`, `size`, `isLoading`, `asChild` |
+| `Input` | `.../ui/input` | All native `<input>` props |
+| `Textarea` | `.../ui/textarea` | All native `<textarea>` props |
+| `Label` | `.../ui/label` | `htmlFor` |
+| `Checkbox` | `.../ui/checkbox` | `checked`, `onCheckedChange` |
+| `Switch` | `.../ui/switch` | `checked`, `onCheckedChange` |
+| `RadioGroup` + `RadioGroupItem` | `.../ui/radio-group` | `value`, `onValueChange` |
+| `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` + `SelectValue` | `.../ui/select` | Radix composition |
+| `MultiSelect` | `.../ui/multi-select` | Multi-value select |
+| `Dialog` + sub-components | `.../ui/dialog` | `open`, `onOpenChange` |
+| `AlertDialog` + sub-components | `.../ui/alert-dialog` | `open`, `onOpenChange` |
+| `Sheet` + `SheetContent` | `.../ui/sheet` | `side`: `left`\|`right`\|`top`\|`bottom` |
+| `Drawer` + `DrawerContent` | `.../ui/drawer` | Mobile-first sheet |
+| `Popover` + `PopoverContent` + `PopoverTrigger` | `.../ui/popover` | `open`, `onOpenChange` |
+| `Tooltip` + `TooltipContent` + `TooltipTrigger` + `TooltipProvider` | `.../ui/tooltip` | Wrap app with `TooltipProvider` |
+| `Badge` | `.../ui/badge` | `variant`, `color` |
+| `Card` + `CardHeader` + `CardContent` + `CardFooter` + `CardTitle` + `CardDescription` + `CardAction` | `.../ui/card` | Composition |
+| `Avatar` + `AvatarImage` + `AvatarFallback` | `.../ui/avatar` | — |
+| `Tabs` + `TabsList` + `TabsTrigger` + `TabsContent` | `.../ui/tabs` | `defaultValue`, `value`, `onValueChange` |
+| `Table` + `TableHeader` + `TableBody` + `TableRow` + `TableHead` + `TableCell` | `.../ui/table` | Semantic HTML table |
+| `Calendar` | `.../ui/calendar` | `mode`, `selected`, `onSelect` |
+| `Command` + sub-components | `.../ui/command` | Command palette |
+| `Separator` | `.../ui/separator` | `orientation`: `horizontal`\|`vertical` |
+| `ScrollArea` | `.../ui/scroll-area` | `className` for fixed height |
+| `Skeleton` | `.../ui/skeleton` | `className` for shape |
+| `Spinner` | `.../ui/spinner` | `size`, `className` |
+| `Progress` | `.../ui/progress` | `value` (0–100) |
+| `Slider` | `.../ui/slider` | `value`, `min`, `max`, `step` |
+| `Sonner` | `.../ui/sonner` | Toast — use `toast()` from `sonner` package |
+| `Pagination` | `.../ui/pagination` | Page navigation |
+| `FileUploader` | `.../ui/file-uploader` | `onUpload`, `accept`, `maxSize` |
+| `ButtonGroup` | `.../ui/button-group` | Groups buttons |
+| `DropdownMenu` + sub-components | `.../ui/dropdown-menu` | — |
+| `ContextMenu` | `.../ui/context-menu` | Right-click menu |
+| `HoverCard` + sub-components | `.../ui/hover-card` | — |
+| `Collapsible` + sub-components | `.../ui/collapsible` | — |
+| `Breadcrumb` | `.../ui/breadcrumb` | — |
+| `Carousel` + sub-components | `.../ui/carousel` | — |
+| `Toggle` | `.../ui/toggle` | — |
+| `ToggleGroup` + `ToggleGroupItem` | `.../ui/toggle-group` | — |
+| `Resizable` + sub-components | `.../ui/resizable` | — |
+| `InputOTP` | `.../ui/input-otp` | OTP / PIN input |
+| `Sidebar` | `.../ui/sidebar` | App sidebar shell |
+
+#### Button — Complete Prop Reference
+
+```tsx
+interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {
+  variant?:        'default' | 'outline' | 'ghost' | 'link' | 'icon' | 'destructive'; // default: 'default'
+  color?:          'primary' | 'success' | 'danger' | 'warning' | 'muted';            // default: 'primary'
+  size?:           'sm' | 'default' | 'lg' | 'icon';                                  // default: 'default'
+  isLoading?:      boolean;    // Shows spinner + auto-disables. default: false
+  asChild?:        boolean;    // Renders child via Radix Slot.  default: false
+  innerClassName?: string;     // Classes on inner flex wrapper
+}
+```
+
+---
+
+### Specialized UI Buttons — `@customafk/lunas-ui/ui/buttons/*`
+
+| Component | Full import path | Purpose |
+|---|---|---|
+| `AddNewButton` | `.../ui/buttons/add-new` | Standard "+ Add new" CTA |
+| `EditButton` | `.../ui/buttons/edit` | Edit / pencil icon |
+| `RefreshButton` | `.../ui/buttons/refresh` | Reload action |
+| `TrashButton` | `.../ui/buttons/trash` | Delete action |
+| `UploadImageButton` | `.../ui/buttons/upload-image` | Image upload trigger |
+| `SearchInput` | `.../ui/inputs/search-input` | Search field with icon |
+
+---
+
+### Layout Components
+
+| Component | Full import path | Key Props |
+|---|---|---|
+| `Flex` | `.../layouts/flex` | `vertical`, `wrap`, `gap`, `justify`, `align`, `padding`, `margin`, `width` |
+| `Grid` | `.../layouts/grid` | Children grid container |
+| `CmsLayout` | `.../layouts/cms-layout` | App shell with sidebar + header |
+| `PaymentLayout` | `.../layouts/payment-layout` | Checkout page layout |
+
+#### Flex — Complete Prop Reference
+
+```tsx
+type FlexProps = {
+  vertical?: boolean;          // flex-col when true | flex-row when false (default: false)
+  wrap?:     boolean;          // flex-wrap vs flex-nowrap (default: true)
+  gap?:      'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';                          // default: 'xs'
+  justify?:  'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch'; // default: 'start'
+  align?:    'start' | 'center' | 'end' | 'baseline' | 'stretch';                 // default: 'center'
+  padding?:  'none' | 'sm' | 'md' | 'lg' | 'xl';                                 // default: 'sm'
+  margin?:   'none' | 'sm' | 'md' | 'lg' | 'xl';                                 // default: 'none'
+  width?:    'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | null;          // default: 'fit'
+  className?: string;
+};
+```
+
+---
+
+### Typography
+
+| Component | Full import path | Key Props |
+|---|---|---|
+| `Title` | `.../typography/title` | `level` (1–6) → `<h1>`–`<h6>` |
+| `Paragraph` | `.../typography/paragraph` | `variant`, all `<p>` attrs |
+
+---
+
+### Data Display — `@customafk/lunas-ui/data-display/*`
+
+Read-only components for formatted entity fields.
+
+| Component | Full import path | Key Props |
+|---|---|---|
+| `UserDataDisplay` | `.../data-display/user` | `uuid`, `username`, `email` |
+| `DateDisplay` | `.../data-display/date` | `date` (ISO string or `Date`), `format?`, `showTime?` |
+| `DateTooltip` | `.../data-display/date-tooltip` | `date` — relative label + full date on hover |
+| `NameDisplay` | `.../data-display/name` | `name` |
+| `PhoneNumberDisplay` | `.../data-display/phone-number` | `value` |
+| `CountryDisplay` | `.../data-display/country` | `country` (ISO 3166-1 alpha-2) |
+| `RoleBadge` | `.../data-display/role-badge` | `status` (role / status string) |
+| `Statistic` | `.../data-display/statistic` | `label`, `value`, `trend?` |
+| `EmptyDisplay` | `.../data-display/empty` | `label?` |
+| `DataList` + `DataListItem` | `.../data-display/data-list` | `DataListItem`: `label` + `value` |
+
+---
+
+### Dialogs — `@customafk/lunas-ui/dialogs/*`
+
+All dialogs are **controlled** — manage `open` state in the parent.
+
+| Component | Full import path | Key Props |
+|---|---|---|
+| `ConfirmDialog` | `.../dialogs/confirm-dialog` | `open`, `title`, `description`, `onConfirm`, `isLoading`, `submitText`, `cancelText` |
+| `LoadingDialog` | `.../dialogs/loading-dialog` | `open`, `onOpenChange` |
+| `ErrorDialog` | `.../dialogs/error-dialog` | `open`, `title`, `onOpenChange`, `children` |
+| `DetailDialog` | `.../dialogs/detail-dialog` | `open`, `title`, `isLoading?`, `createdAt?`, `sidebar?`, `onOpenChange` |
+
+#### ConfirmDialog — Complete Prop Reference
+
+```tsx
+type ConfirmDialogProps = {
+  open?:                 boolean;
+  isLoading?:            boolean;                    // default: false
+  title:                 string;                     // required
+  description:           string;                     // required
+  cancelText?:           string;                     // default: 'Cancel'
+  submitText?:           string;                     // default: 'Confirm'
+  descriptionClassName?: string;
+  onOpenChange?:         (open: boolean) => void;
+  onConfirm?:            () => Promise<void> | void; // async-safe
+};
+```
+
+---
+
+### Feature Components
+
+#### Descriptions — `@customafk/lunas-ui/features/descriptions`
+
+```tsx
+import {
+  Description,        // Outer container (border, shadow, rounded)
+  DescriptionHeader,  // title, description?, extra?, className?
+  DescriptionSection, // title? — labeled horizontal divider
+  DescriptionItem,    // label, labelColSpan? (default 3/12),
+                      // orientation? ('horizontal'|'vertical'), action?
+} from '@customafk/lunas-ui/features/descriptions';
+```
+
+Also exports typed value cells:
+`DescriptionBadge`, `DescriptionDate`, `DescriptionName`, `DescriptionEmpty`,
+`DescriptionStatistic`, `DescriptionNumberPhone`, `DescriptionImages`, `DescriptionLongtext`.
+
+#### Tables — `@customafk/lunas-ui/features/tables`
+
+TanStack React Table v8 wrapper with column helpers, filter components, and table context provider.
+
+#### TanStack Form — `@customafk/lunas-ui/features/tanstack-form`
+
+```tsx
+import {
+  useTanStackForm,        // Form factory hook — call once per form definition
+  withTanStackForm,       // HOC: connect a component to the form context
+  withTanStackFieldGroup, // HOC: wrap a group of related fields
+} from '@customafk/lunas-ui/features/tanstack-form';
+// Field components (TextField, ComboboxField, etc.) are registered in the
+// factory — use them via the form's .AppField slot, not as direct imports.
+```
+
+#### Search Modal — `@customafk/lunas-ui/features/search-modal`
+
+```tsx
+import { SearchModal } from '@customafk/lunas-ui/features/search-modal';
+// Self-contained command-palette dialog — no props required.
+```
+
+---
+
+### Cards
+
+| Component | Full import path | Key Props |
+|---|---|---|
+| `SimpleCard` | `.../cards/simple-card` | `title`, `description?`, `action?`, `footer?` |
+| `ProductCard` | `.../cards/product-card` | `id`, `name`, `thumbnail`, `price` |
+| `GridProductCard` | `.../cards/grid-product-card` | `id`, `name`, `thumbnail`, `price` |
+
+### Page Components
+
+| Component | Full import path | Purpose |
+|---|---|---|
+| `NotFound` | `.../pages/NotFound` | 404 page |
+| `NotAuthorized` | `.../pages/NotAuthorized` | 403 / access denied |
+| `FeatureDeveloping` | `.../pages/FeatureDeveloping` | Coming-soon placeholder |
+| `FeatureFixing` | `.../pages/FeatureFixing` | Maintenance-mode page |
+
+---
+
+## Usage Patterns (RAG Examples)
+
+### Pattern 1 — Confirm dialog before a destructive mutation
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@customafk/lunas-ui/ui/button';
+import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';
+
+export function DeleteUserButton({ userId, onDeleted }: {
+  userId: string;
+  onDeleted: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+
+  const handleConfirm = async () => {
+    setIsPending(true);
+    try {
+      await deleteUser(userId);
+      setOpen(false);
+      onDeleted();
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <>
+      <Button variant="outline" color="danger" onClick={() => setOpen(true)}>
+        Delete user
+      </Button>
+      <ConfirmDialog
+        open={open}
+        title="Delete user?"
+        description="This action is permanent and cannot be undone."
+        submitText="Yes, delete"
+        isLoading={isPending}
+        onOpenChange={setOpen}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+}
+```
+
+### Pattern 2 — Entity detail panel with Description + Data Display
+
+```tsx
+import {
+  Description,
+  DescriptionHeader,
+  DescriptionItem,
+  DescriptionSection,
+} from '@customafk/lunas-ui/features/descriptions';
+import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';
+import { DateDisplay } from '@customafk/lunas-ui/data-display/date';
+import { RoleBadge } from '@customafk/lunas-ui/data-display/role-badge';
+import { Statistic } from '@customafk/lunas-ui/data-display/statistic';
+
+export function OrderDetailPanel({ order }: { order: Order }) {
+  return (
+    <Description>
+      <DescriptionHeader title="Order Details" description={`#${order.id}`} />
+      <DescriptionSection title="Customer" />
+      <DescriptionItem label="Account">
+        <UserDataDisplay uuid={order.customer.id} username={order.customer.name} email={order.customer.email} />
+      </DescriptionItem>
+      <DescriptionItem label="Created at">
+        <DateDisplay date={order.createdAt} showTime />
+      </DescriptionItem>
+      <DescriptionSection title="Order" />
+      <DescriptionItem label="Status">
+        <RoleBadge status={order.status} />
+      </DescriptionItem>
+      <DescriptionItem label="Total">
+        <Statistic label="VND" value={order.total} />
+      </DescriptionItem>
+    </Description>
+  );
+}
+```
+
+---
+
+## Semantic Color Tokens (TailwindCSS)
+
+| Token | Usage |
+|---|---|
+| `text-text-positive` | Primary body text |
+| `text-text-positive-weak` | Secondary / muted text |
+| `text-text-positive-strong` | Emphasis / heading text |
+| `text-text-positive-muted` | Placeholder / disabled text |
+| `bg-primary` | Primary brand fill |
+| `bg-secondary-muted` | Light gray surface (table headers, label columns) |
+| `bg-card` | Card / panel background |
+| `border-border` | Default border |
+| `border-border-weak` | Subtle border / divider |
+| `text-success` | Positive / success value |
+| `text-danger` | Error / destructive value |
+| `text-warning` | Cautionary value |
+
+---
+
+## Anti-patterns to Avoid
+
+| ❌ Don't | ✅ Do instead |
+|---|---|
+| `import Button from '…/ui/button'` | `import { Button } from '…/ui/button'` |
+| `import { Button } from '…/button'` | Include category: `'…/ui/button'` |
+| Import from `@radix-ui/*` directly | Use the lunas-ui wrapper |
+| Skip stylesheet imports | Always import `styles/base` + `styles/theme` |
+| `window.confirm()` for destructive actions | Use `<ConfirmDialog>` |
+| `<div className="flex gap-2">` | Use `<Flex gap="sm">` |
+| Add `disabled` manually during loading | Use `isLoading` on `<Button>` |

package/dist/alert-5MxGtf3j.d.mts

@@ -0,0 +1,88 @@
+import * as react_jsx_runtime122 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types15 from "class-variance-authority/types";
+
+//#region packages/components/ui/alert-variants.d.ts
+/**
+ * Alert component variants for styling using class-variance-authority
+ */
+declare const alertVariants: (props?: ({
+  variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+} & class_variance_authority_types15.ClassProp) | undefined) => string;
+type AlertVariantProps = VariantProps<typeof alertVariants>;
+//#endregion
+//#region packages/components/ui/alert.d.ts
+/**
+ * Props for the Alert component.
+ */
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, Omit<AlertVariantProps, 'className'> {
+  /**
+   * Optional icon to display in the alert; defaults to a variant-appropriate icon when omitted.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Whether the alert can be dismissed by the user.
+   */
+  dismissible?: boolean;
+  /**
+   * Callback invoked when the dismiss button is clicked.
+   */
+  onDismiss?: () => void;
+}
+/**
+ * Displays a contextual feedback message with optional icon, title, description, and dismiss button.
+ *
+ * @example
+ * ```tsx
+ * import { Alert, AlertTitle, AlertDescription } from '@customafk/lunas-ui/ui/alert';
+ *
+ * <Alert variant="success" dismissible onDismiss={() => setOpen(false)}>
+ *   <AlertTitle>Saved successfully</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+declare function Alert({
+  className,
+  variant,
+  children,
+  icon,
+  dismissible,
+  onDismiss,
+  ...props
+}: AlertProps): react_jsx_runtime122.JSX.Element;
+/**
+ * Props for the AlertTitle component.
+ */
+interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Title text or elements to display.
+   */
+  children: React.ReactNode;
+}
+/**
+ * Renders the bold title line inside an Alert.
+ */
+declare function AlertTitle({
+  className,
+  ...props
+}: AlertTitleProps): react_jsx_runtime122.JSX.Element;
+/**
+ * Props for the AlertDescription component.
+ */
+interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Descriptive text or elements displayed below the title.
+   */
+  children: React.ReactNode;
+}
+/**
+ * Renders the supporting body text inside an Alert.
+ */
+declare function AlertDescription({
+  className,
+  ...props
+}: AlertDescriptionProps): react_jsx_runtime122.JSX.Element;
+//#endregion
+export { AlertTitle as a, AlertProps as i, AlertDescription as n, AlertTitleProps as o, AlertDescriptionProps as r, Alert as t };
+//# sourceMappingURL=alert-5MxGtf3j.d.mts.map

package/dist/alert-DIC1_ymv.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@customafk/react-toolkit/utils`),a=require(`class-variance-authority`);const o=(0,a.cva)([`relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm`,`grid-cols-[0_1fr]`,`has-[>svg]:grid-cols-[24px_1fr] has-[>svg]:gap-x-3`,`[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,`transition-colors duration-150`],{variants:{variant:{default:`bg-card text-text-positive-strong border-border`,destructive:`bg-danger-bg-subtle text-danger-intense border-danger-border-subtle [&>svg]:text-danger *:data-[slot=alert-description]:text-danger-strong`,warning:`bg-warning-bg-subtle text-warning-intense border-warning-border-subtle [&>svg]:text-warning *:data-[slot=alert-description]:text-warning-strong`,success:`bg-success-bg-subtle text-success-intense border-success-border-subtle [&>svg]:text-success *:data-[slot=alert-description]:text-success-strong`,info:`bg-info-bg-subtle text-info-intense border-info-border-subtle [&>svg]:text-info *:data-[slot=alert-description]:text-info-strong`}},defaultVariants:{variant:`default`}});function s({className:e,variant:a,children:s,icon:c,dismissible:l,onDismiss:u,...d}){let f=(0,n.useMemo)(()=>{if(!c)switch(a){case`destructive`:return(0,r.jsx)(t.AlertCircle,{});case`warning`:return(0,r.jsx)(t.AlertTriangle,{});case`success`:return(0,r.jsx)(t.CheckCircle,{});case`info`:return(0,r.jsx)(t.Info,{});default:return null}return c},[c,a]);return(0,r.jsxs)(`div`,{"data-slot":`alert`,role:`alert`,"data-variant":a,className:(0,i.cn)(o({variant:a}),e),...d,children:[f,s,l&&(0,r.jsx)(`button`,{type:`button`,onClick:u,"aria-label":`Close alert`,className:`absolute top-2 right-2 size-6 rounded-md p-1 opacity-70 transition-opacity duration-100 hover:opacity-100`,"data-slot":`alert-close`,children:(0,r.jsx)(t.X,{size:16})})]})}function c({className:e,...t}){return(0,r.jsx)(`div`,{"data-slot":`alert-title`,className:(0,i.cn)(`col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight`,e),...t})}function l({className:e,...t}){return(0,r.jsx)(`div`,{"data-slot":`alert-description`,className:(0,i.cn)(`text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed`,e),...t})}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
+//# sourceMappingURL=alert-DIC1_ymv.cjs.map

package/dist/alert-DIC1_ymv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-DIC1_ymv.cjs","names":["AlertCircle","AlertTriangle","CheckCircle","Info","X"],"sources":["../packages/components/ui/alert-variants.ts","../packages/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/**\n * Alert component variants for styling using class-variance-authority\n */\nexport const alertVariants = cva(\n  [\n    'relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm',\n    'grid-cols-[0_1fr]',\n    'has-[>svg]:grid-cols-[24px_1fr] has-[>svg]:gap-x-3',\n    '[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n    'transition-colors duration-150',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-text-positive-strong border-border',\n        destructive:\n          'bg-danger-bg-subtle text-danger-intense border-danger-border-subtle [&>svg]:text-danger *:data-[slot=alert-description]:text-danger-strong',\n        warning:\n          'bg-warning-bg-subtle text-warning-intense border-warning-border-subtle [&>svg]:text-warning *:data-[slot=alert-description]:text-warning-strong',\n        success:\n          'bg-success-bg-subtle text-success-intense border-success-border-subtle [&>svg]:text-success *:data-[slot=alert-description]:text-success-strong',\n        info: 'bg-info-bg-subtle text-info-intense border-info-border-subtle [&>svg]:text-info *:data-[slot=alert-description]:text-info-strong',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport type AlertVariantProps = VariantProps<typeof alertVariants>;\n","'use client';\n\nimport { useMemo } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';\n\nimport { type AlertVariantProps, alertVariants } from './alert-variants';\n\n/**\n * Props for the Alert component.\n */\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, Omit<AlertVariantProps, 'className'> {\n  /**\n   * Optional icon to display in the alert; defaults to a variant-appropriate icon when omitted.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Whether the alert can be dismissed by the user.\n   */\n  dismissible?: boolean;\n  /**\n   * Callback invoked when the dismiss button is clicked.\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * Displays a contextual feedback message with optional icon, title, description, and dismiss button.\n *\n * @example\n * ```tsx\n * import { Alert, AlertTitle, AlertDescription } from '@customafk/lunas-ui/ui/alert';\n *\n * <Alert variant=\"success\" dismissible onDismiss={() => setOpen(false)}>\n *   <AlertTitle>Saved successfully</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n * ```\n */\nfunction Alert({ className, variant, children, icon, dismissible, onDismiss, ...props }: AlertProps) {\n  // Default icons based on variant\n  const defaultIcon = useMemo(() => {\n    if (!icon) {\n      switch (variant) {\n        case 'destructive':\n          return <AlertCircle />;\n        case 'warning':\n          return <AlertTriangle />;\n        case 'success':\n          return <CheckCircle />;\n        case 'info':\n          return <Info />;\n        default:\n          return null;\n      }\n    }\n    return icon;\n  }, [icon, variant]);\n\n  return (\n    <div data-slot=\"alert\" role=\"alert\" data-variant={variant} className={cn(alertVariants({ variant }), className)} {...props}>\n      {defaultIcon}\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Close alert\"\n          className=\"absolute top-2 right-2 size-6 rounded-md p-1 opacity-70 transition-opacity duration-100 hover:opacity-100\"\n          data-slot=\"alert-close\"\n        >\n          <X size={16} />\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Props for the AlertTitle component.\n */\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Title text or elements to display.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Renders the bold title line inside an Alert.\n */\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return <div data-slot=\"alert-title\" className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)} {...props} />;\n}\n\n/**\n * Props for the AlertDescription component.\n */\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Descriptive text or elements displayed below the title.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Renders the supporting body text inside an Alert.\n */\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn('text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle };\n"],"mappings":"0MAKA,MAAa,GAAA,EAAA,EAAA,KACX,CACE,iFACA,oBACA,qDACA,8DACA,iCACD,CACD,CACE,SAAU,CACR,QAAS,CACP,QAAS,kDACT,YACE,6IACF,QACE,kJACF,QACE,kJACF,KAAM,mIACP,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CCUD,SAAS,EAAM,CAAE,YAAW,UAAS,WAAU,OAAM,cAAa,YAAW,GAAG,GAAqB,CAEnG,IAAM,GAAA,EAAA,EAAA,aAA4B,CAChC,GAAI,CAAC,EACH,OAAQ,EAAR,CACE,IAAK,cACH,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAAA,EAAAA,CAAc,CACxB,IAAK,UACH,OAAO,EAAA,EAAA,KAACC,EAAAA,cAAAA,EAAAA,CAAgB,CAC1B,IAAK,UACH,OAAO,EAAA,EAAA,KAACC,EAAAA,YAAAA,EAAAA,CAAc,CACxB,IAAK,OACH,OAAO,EAAA,EAAA,KAACC,EAAAA,KAAAA,EAAAA,CAAO,CACjB,QACE,OAAO,KAGb,OAAO,GACN,CAAC,EAAM,EAAQ,CAAC,CAEnB,OACE,EAAA,EAAA,MAAC,MAAA,CAAI,YAAU,QAAQ,KAAK,QAAQ,eAAc,EAAS,WAAA,EAAA,EAAA,IAAc,EAAc,CAAE,UAAS,CAAC,CAAE,EAAU,CAAE,GAAI,YAClH,EACA,EACA,IACC,EAAA,EAAA,KAAC,SAAA,CACC,KAAK,SACL,QAAS,EACT,aAAW,cACX,UAAU,4GACV,YAAU,wBAEV,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAE,KAAM,GAAA,CAAM,EACR,GAEP,CAiBV,SAAS,EAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,cAAc,WAAA,EAAA,EAAA,IAAc,8DAA+D,EAAU,CAAE,GAAI,GAAS,CAgB5I,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAgC,CACxE,OACE,EAAA,EAAA,KAAC,MAAA,CACC,YAAU,oBACV,WAAA,EAAA,EAAA,IAAc,mGAAoG,EAAU,CAC5H,GAAI,GACJ"}

package/dist/alert-DwdUOFaC.d.cts

@@ -0,0 +1,88 @@
+import * as react_jsx_runtime44 from "react/jsx-runtime";
+import * as class_variance_authority_types13 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/ui/alert-variants.d.ts
+/**
+ * Alert component variants for styling using class-variance-authority
+ */
+declare const alertVariants: (props?: ({
+  variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+} & class_variance_authority_types13.ClassProp) | undefined) => string;
+type AlertVariantProps = VariantProps<typeof alertVariants>;
+//#endregion
+//#region packages/components/ui/alert.d.ts
+/**
+ * Props for the Alert component.
+ */
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, Omit<AlertVariantProps, 'className'> {
+  /**
+   * Optional icon to display in the alert; defaults to a variant-appropriate icon when omitted.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Whether the alert can be dismissed by the user.
+   */
+  dismissible?: boolean;
+  /**
+   * Callback invoked when the dismiss button is clicked.
+   */
+  onDismiss?: () => void;
+}
+/**
+ * Displays a contextual feedback message with optional icon, title, description, and dismiss button.
+ *
+ * @example
+ * ```tsx
+ * import { Alert, AlertTitle, AlertDescription } from '@customafk/lunas-ui/ui/alert';
+ *
+ * <Alert variant="success" dismissible onDismiss={() => setOpen(false)}>
+ *   <AlertTitle>Saved successfully</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ * ```
+ */
+declare function Alert({
+  className,
+  variant,
+  children,
+  icon,
+  dismissible,
+  onDismiss,
+  ...props
+}: AlertProps): react_jsx_runtime44.JSX.Element;
+/**
+ * Props for the AlertTitle component.
+ */
+interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Title text or elements to display.
+   */
+  children: React.ReactNode;
+}
+/**
+ * Renders the bold title line inside an Alert.
+ */
+declare function AlertTitle({
+  className,
+  ...props
+}: AlertTitleProps): react_jsx_runtime44.JSX.Element;
+/**
+ * Props for the AlertDescription component.
+ */
+interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Descriptive text or elements displayed below the title.
+   */
+  children: React.ReactNode;
+}
+/**
+ * Renders the supporting body text inside an Alert.
+ */
+declare function AlertDescription({
+  className,
+  ...props
+}: AlertDescriptionProps): react_jsx_runtime44.JSX.Element;
+//#endregion
+export { AlertTitle as a, AlertProps as i, AlertDescription as n, AlertTitleProps as o, AlertDescriptionProps as r, Alert as t };
+//# sourceMappingURL=alert-DwdUOFaC.d.cts.map