@akira-io/ui 1.1.0 → 1.2.0

package/dist/blocks.js

@@ -1,13 +1,13 @@
-import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, ConfirmDialog, Popover, PopoverTrigger, PopoverContent, FloatingSheet, FloatingSheetBody, FloatingSheetFooter, Tabs, TabsList, TabsTrigger, TabsContent, Textarea, Switch, FieldError, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, InputOTP, InputOTPGroup, InputOTPSlot, Alert, AlertDescription, Calendar } from './chunk-UUTXPPRN.js';
-import { CopyButton } from './chunk-JAHTUAQL.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Label } from './chunk-6QM5BA7B.js';
-import { Card } from './chunk-SA5LM2GD.js';
-export { DEFAULT_TOUR_LABELS, TourProvider, resolveSteps, shouldStartTour, stepsForBreakpoint, useTour, useTourController } from './chunk-YOVY3KT6.js';
-import { useUiLabels, useUiLocale } from './chunk-5AJFQ6C4.js';
-export { UiLocaleProvider, useUiLabels, useUiLocale } from './chunk-5AJFQ6C4.js';
+import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, ConfirmDialog, Popover, PopoverTrigger, PopoverContent, FloatingSheet, FloatingSheetBody, FloatingSheetFooter, Tabs, TabsList, TabsTrigger, TabsContent, Textarea, Switch, FieldError, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, InputOTP, InputOTPGroup, InputOTPSlot, Alert, AlertDescription, Calendar } from './chunk-DW42Z75X.js';
+import { CopyButton } from './chunk-MCMBS2SB.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Label } from './chunk-O5DZTX7D.js';
+import { Card } from './chunk-2HLBBU3O.js';
+export { DEFAULT_TOUR_LABELS, TourProvider, resolveSteps, shouldStartTour, stepsForBreakpoint, useTour, useTourController } from './chunk-NGMG2UWX.js';
+import { useUiLabels, useUiLocale } from './chunk-QNF4LJVT.js';
+export { UiLocaleProvider, useUiLabels, useUiLocale } from './chunk-QNF4LJVT.js';
 import { resolveLink } from './chunk-L2H5GIF7.js';
-import { Input } from './chunk-6X4TKSF6.js';
-import { Button, cn, elevatedSurface, nestedSurfaceReset, recessedSurface, compactRadius, controlRadius, Spinner } from './chunk-DSD7MVLL.js';
+import { Separator, Input } from './chunk-UTSTTTH5.js';
+import { Button, cn, elevatedSurface, nestedSurfaceReset, recessedSurface, compactRadius, focusRing, controlRadius, Spinner } from './chunk-I5UZAJB4.js';
 import { createContext, useState, useCallback, useEffect, useContext, useId, useRef } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { TriangleAlert, CalendarDays, ArrowLeft, ChevronRight, AlertCircle, ShieldOff, EyeOff, Eye, RefreshCw, ChevronLeft, ArrowLeftToLine, X, ArrowRight, ArrowUpRight, ArrowDownRight } from 'lucide-react';
@@ -102,7 +102,8 @@ function DangerZone({
   processing = false,
   labels,
   footer,
-  className
+  className,
+  slotName = "danger-zone"
 }) {
   const copy = { ...dangerZoneLabels, ...labels };
   const [activeId, setActiveId] = useState(null);
@@ -110,13 +111,13 @@ function DangerZone({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      "data-slot": "danger-zone",
       className: cn(
         elevatedSurface,
         nestedSurfaceReset,
         "gap-6 p-6 flex flex-col bg-destructive/5 ring-destructive/30",
         className
       ),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs("div", { "data-slot": "danger-zone-header", className: "gap-3 flex", children: [
           /* @__PURE__ */ jsx("span", { className: "size-11 rounded-2xl flex shrink-0 items-center justify-center bg-destructive/10 text-destructive", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5" }) }),
@@ -813,13 +814,14 @@ function FormOverlayActions({
   submit = false,
   className,
   onCancel,
-  onSave
+  onSave,
+  slotName = "form-overlay-actions"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "form-overlay-actions",
       className: cn("gap-2 flex items-center justify-end", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -858,7 +860,8 @@ function DetailEditSheet({
   className,
   children,
   onSave,
-  onCancel
+  onCancel,
+  slotName = "detail-edit-sheet"
 }) {
   const handleSubmit = (event) => {
     event.preventDefault();
@@ -886,11 +889,12 @@ function DetailEditSheet({
       children: /* @__PURE__ */ jsxs(
         "form",
         {
-          "data-slot": "detail-edit-sheet",
           onSubmit: handleSubmit,
           className: "min-h-0 flex flex-1 flex-col",
+          "data-slot": slotName,
           children: [
             /* @__PURE__ */ jsx(FloatingSheetBody, { children }),
+            /* @__PURE__ */ jsx(Separator, {}),
             /* @__PURE__ */ jsx(FloatingSheetFooter, { children: /* @__PURE__ */ jsx(
               FormOverlayActions,
               {
@@ -918,7 +922,8 @@ function FormDialog({
   className,
   children,
   onSave,
-  onCancel
+  onCancel,
+  slotName = "form-dialog"
 }) {
   const handleSubmit = (event) => {
     event.preventDefault();
@@ -952,11 +957,11 @@ function FormDialog({
       children: /* @__PURE__ */ jsx(
         DialogContent,
         {
-          "data-slot": "form-dialog",
           ...description ? {} : { "aria-describedby": void 0 },
           className: cn("gap-0 p-0", className),
           onEscapeKeyDown: blockWhileProcessing,
           onInteractOutside: blockWhileProcessing,
+          slotName,
           children: /* @__PURE__ */ jsxs(
             "form",
             {
@@ -1013,14 +1018,15 @@ function InfoField({
   copyLabel,
   copiedLabel,
   iconClassName,
-  className
+  className,
+  slotName = "info-field"
 }) {
   const text = copyableText(value, copyValue);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "info-field",
       className: cn("gap-3 flex items-center", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx("div", { className: cn("p-2 rounded-xl bg-muted", iconClassName), children: /* @__PURE__ */ jsx(Icon, { className: "size-5 text-muted-foreground" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
@@ -1155,12 +1161,12 @@ function SettingsCard({
   control,
   children,
   inset = false,
-  className
+  className,
+  slotName = "settings-card"
 }) {
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      "data-slot": "settings-card",
       "data-inset": inset || void 0,
       className: cn(
         elevatedSurface,
@@ -1168,6 +1174,7 @@ function SettingsCard({
         inset && recessedSurface,
         className
       ),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "gap-4 sm:flex-row sm:items-center sm:justify-between flex flex-col", children: [
           /* @__PURE__ */ jsxs("div", { className: "gap-3 flex items-center", children: [
@@ -1198,12 +1205,12 @@ function SettingsPanel({
   description,
   children,
   inset = true,
-  className
+  className,
+  slotName = "settings-panel"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "settings-panel",
       "data-inset": inset || void 0,
       className: cn(
         elevatedSurface,
@@ -1211,6 +1218,7 @@ function SettingsPanel({
         inset && recessedSurface,
         className
       ),
+      "data-slot": slotName,
       children: [
         (title || description) && /* @__PURE__ */ jsxs("div", { children: [
           title && /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
@@ -1259,16 +1267,17 @@ function SettingsField({
   error,
   required,
   className,
-  children
+  children,
+  slotName = "settings-field"
 }) {
   const generated = useId();
   const fieldId = id ?? generated;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "settings-field",
       "data-invalid": error ? true : void 0,
       className: cn("space-y-2 py-1", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
           label,
@@ -1302,6 +1311,7 @@ function TextField({
   onChange,
   disabled,
   placeholder,
+  slotName = "text-field",
   ...field
 }) {
   return /* @__PURE__ */ jsx(SettingsField, { ...field, children: (fieldId) => /* @__PURE__ */ jsx(
@@ -1313,7 +1323,7 @@ function TextField({
       disabled,
       placeholder,
       "aria-invalid": field.error ? true : void 0,
-      "data-slot": "text-field",
+      slotName,
       onChange: (event) => onChange(event.target.value)
     }
   ) });
@@ -1326,6 +1336,7 @@ function NumberField({
   min,
   max,
   step,
+  slotName = "number-field",
   ...field
 }) {
   return /* @__PURE__ */ jsx(SettingsField, { ...field, children: (fieldId) => /* @__PURE__ */ jsx(
@@ -1341,7 +1352,7 @@ function NumberField({
       disabled,
       placeholder,
       "aria-invalid": field.error ? true : void 0,
-      "data-slot": "number-field",
+      slotName,
       onChange: (event) => onChange(
         event.target.value === "" ? "" : event.target.valueAsNumber
       )
@@ -1354,6 +1365,7 @@ function DateField({
   disabled,
   min,
   max,
+  slotName = "date-field",
   ...field
 }) {
   return /* @__PURE__ */ jsx(SettingsField, { ...field, children: (fieldId) => /* @__PURE__ */ jsx(
@@ -1366,7 +1378,7 @@ function DateField({
       max,
       disabled,
       "aria-invalid": field.error ? true : void 0,
-      "data-slot": "date-field",
+      slotName,
       onChange: (event) => onChange(event.target.value)
     }
   ) });
@@ -1377,6 +1389,7 @@ function SelectField({
   options,
   disabled,
   placeholder,
+  slotName = "select-field",
   ...field
 }) {
   return /* @__PURE__ */ jsx(SettingsField, { ...field, children: (fieldId) => /* @__PURE__ */ jsxs(
@@ -1390,7 +1403,7 @@ function SelectField({
           SelectTrigger,
           {
             id: fieldId,
-            "data-slot": "select-field",
+            slotName,
             "aria-invalid": field.error ? true : void 0,
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
           }
@@ -1415,16 +1428,17 @@ function SettingsPage({
   control,
   linkComponent,
   children,
-  className
+  className,
+  slotName = "settings-page"
 }) {
   return /* @__PURE__ */ jsx(SettingsLinkContext.Provider, { value: linkComponent, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "settings-page",
       className: cn(
         "gap-8 max-w-4xl mx-auto flex w-full flex-col",
         className
       ),
+      "data-slot": slotName,
       children: [
         title && /* @__PURE__ */ jsx(
           SectionHeader,
@@ -1451,7 +1465,8 @@ function SettingsSection({
   wide = false,
   linkComponent,
   children,
-  className
+  className,
+  slotName = "settings-section"
 }) {
   const labels = useUiLabels("settings", settingsLabels, {
     back: backLabel
@@ -1461,12 +1476,12 @@ function SettingsSection({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      "data-slot": "settings-section",
       className: cn(
         "gap-6 mx-auto flex w-full flex-col",
         wide ? "max-w-4xl" : "max-w-2xl",
         className
       ),
+      "data-slot": slotName,
       children: [
         backHref && /* @__PURE__ */ jsxs(
           Link,
@@ -1497,13 +1512,14 @@ function SettingsGroup({
   label,
   columns = 2,
   children,
-  className
+  className,
+  slotName = "settings-group"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "settings-group",
       className: cn("gap-3 flex flex-col", className),
+      "data-slot": slotName,
       children: [
         label && /* @__PURE__ */ jsx("p", { className: "font-bold tracking-widest text-[11px] text-muted-foreground uppercase", children: label }),
         /* @__PURE__ */ jsx(
@@ -1530,7 +1546,8 @@ function SettingsEntry({
   badge,
   disabled = false,
   linkComponent,
-  className
+  className,
+  slotName = "settings-entry"
 }) {
   const contextLink = useContext(SettingsLinkContext);
   const Link = resolveLink(linkComponent ?? contextLink);
@@ -1568,25 +1585,14 @@ function SettingsEntry({
     }
   );
   if (disabled) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-slot": "settings-entry",
-        "data-disabled": "true",
-        "aria-disabled": "true",
-        children: card
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { "data-disabled": "true", "aria-disabled": "true", "data-slot": slotName, children: card });
   }
   return /* @__PURE__ */ jsx(
     Link,
     {
-      "data-slot": "settings-entry",
       href,
-      className: cn(
-        compactRadius,
-        "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
-      ),
+      className: cn(compactRadius, focusRing),
+      "data-slot": slotName,
       children: card
     }
   );
@@ -1625,13 +1631,13 @@ function StatCard({
   trend,
   comparisonLabel,
   inset = false,
-  className
+  className,
+  slotName = "stat-card"
 }) {
   const resolvedTrend = resolveTrend(trend);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "stat-card",
       "data-inset": inset || void 0,
       className: cn(
         elevatedSurface,
@@ -1639,6 +1645,7 @@ function StatCard({
         inset && recessedSurface,
         className
       ),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-4 gap-4 flex items-start justify-between", children: [
           /* @__PURE__ */ jsx("div", { className: cn("rounded-2xl p-3 shrink-0", iconClassName), children: /* @__PURE__ */ jsx(Icon, { className: "size-6" }) }),
@@ -1745,7 +1752,8 @@ function TwoFactorVerifyForm({
   submitLabel,
   footer,
   labels,
-  className
+  className,
+  slotName = "two-factor-verify-form"
 }) {
   const text = resolveLabels(labels);
   const fieldId = useId();
@@ -1778,11 +1786,11 @@ function TwoFactorVerifyForm({
   return /* @__PURE__ */ jsxs(
     "form",
     {
-      "data-slot": "two-factor-verify-form",
       "data-mode": mode,
       "data-pending": pending || void 0,
       onSubmit: handleSubmit,
       className: cn("gap-5 flex w-full flex-col", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "gap-2 flex flex-col", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: mode === "code" ? text.codeLabel : text.recoveryCodeLabel }),
@@ -1803,7 +1811,7 @@ function TwoFactorVerifyForm({
             Input,
             {
               id: fieldId,
-              "data-slot": "two-factor-recovery-input",
+              slotName: "two-factor-recovery-input",
               value,
               autoComplete: "one-time-code",
               spellCheck: false,
@@ -1814,7 +1822,7 @@ function TwoFactorVerifyForm({
             }
           )
         ] }),
-        messages.length > 0 && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-slot": "two-factor-error", children: [
+        messages.length > 0 && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", slotName: "two-factor-error", children: [
           /* @__PURE__ */ jsx(AlertCircle, {}),
           /* @__PURE__ */ jsx(AlertDescription, { children: messages.map((message) => /* @__PURE__ */ jsx("p", { children: message }, message)) })
         ] }),
@@ -1854,14 +1862,15 @@ function TwoFactorChallenge({
   description,
   footer,
   labels,
-  className
+  className,
+  slotName = "two-factor-challenge"
 }) {
   const text = resolveLabels(labels);
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      "data-slot": "two-factor-challenge",
       className: cn("gap-6 flex w-full flex-col", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "gap-2 flex flex-col", children: [
           /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold tracking-tight text-foreground", children: title ?? text.challengeTitle }),
@@ -1888,7 +1897,8 @@ function TwoFactorDisableButton({
   variant = "destructive",
   size = "default",
   labels,
-  className
+  className,
+  slotName = "two-factor-disable"
 }) {
   const text = resolveLabels(labels);
   const [open, setOpen] = useState(false);
@@ -1904,9 +1914,9 @@ function TwoFactorDisableButton({
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      "data-slot": "two-factor-disable",
       "data-open": open || void 0,
       className: cn("inline-flex", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsxs(
           Button,
@@ -1945,7 +1955,8 @@ function TwoFactorRecoveryCodes({
   onRegenerate,
   showHeading = true,
   labels,
-  className
+  className,
+  slotName = "two-factor-recovery-codes"
 }) {
   const text = resolveLabels(labels);
   const [revealed, setRevealed] = useState(defaultRevealed);
@@ -1965,9 +1976,9 @@ function TwoFactorRecoveryCodes({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "two-factor-recovery-codes",
       "data-revealed": revealed || void 0,
       className: cn("gap-4 flex w-full flex-col", className),
+      "data-slot": slotName,
       children: [
         showHeading && /* @__PURE__ */ jsxs("div", { className: "gap-1 flex flex-col", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: text.recoveryTitle }),
@@ -2057,15 +2068,16 @@ function TwoFactorScanStep({
   qrCodeSvg,
   manualSetupKey,
   labels,
-  className
+  className,
+  slotName = "two-factor-scan-step"
 }) {
   const text = resolveLabels(labels);
   const [revealed, setRevealed] = useState(false);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "two-factor-scan-step",
       className: cn("gap-5 flex w-full flex-col", className),
+      "data-slot": slotName,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -2149,7 +2161,8 @@ function TwoFactorSetupDialog({
   onRegenerateRecoveryCodes,
   onCompleted,
   labels,
-  className
+  className,
+  slotName = "two-factor-setup-dialog"
 }) {
   const text = resolveLabels(labels);
   const [step, setStep] = useState(
@@ -2199,9 +2212,9 @@ function TwoFactorSetupDialog({
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
-      "data-slot": "two-factor-setup-dialog",
       "data-step": step,
       className: cn("max-w-md p-0", className),
+      slotName,
       children: [
         /* @__PURE__ */ jsxs(DialogHeader, { className: "p-6 md:p-8", children: [
           /* @__PURE__ */ jsx(DialogTitle, { children: heading }),