@devalok/shilp-sutra 0.48.0 → 0.49.0
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.
- package/BREAKING.json +32 -0
- package/MIGRATION.md +891 -881
- package/dist/_chunks/badge-group.js +50 -63
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chat.js +1 -1
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/field-state.js +8 -0
- package/dist/_chunks/field-state.js.map +1 -0
- package/dist/_chunks/popover.js +50 -47
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives.js +155 -155
- package/dist/_chunks/primitives.js.map +1 -1
- package/dist/_chunks/shared.js +4 -4
- package/dist/_chunks/tiptap.js +10 -10
- package/dist/_chunks/use-calendar.js +1 -1
- package/dist/_chunks/use-calendar.js.map +1 -1
- package/dist/_chunks/use-controllable-open.js +15 -0
- package/dist/_chunks/use-controllable-open.js.map +1 -0
- package/dist/composed/command-palette.js +3 -3
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/confirm-dialog.js +3 -3
- package/dist/composed/confirm-dialog.js.map +1 -1
- package/dist/composed/date-picker/index.js +3 -3
- package/dist/composed/date-picker/index.js.map +1 -1
- package/dist/composed/error-boundary.js +1 -1
- package/dist/composed/error-boundary.js.map +1 -1
- package/dist/composed/index.d.ts +3 -1
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +4 -3
- package/dist/composed/loading-skeleton.js +15 -15
- package/dist/composed/loading-skeleton.js.map +1 -1
- package/dist/composed/page-header.d.ts.map +1 -1
- package/dist/composed/page-header.js +32 -45
- package/dist/composed/page-header.js.map +1 -1
- package/dist/composed/page-skeletons.js +19 -19
- package/dist/composed/page-skeletons.js.map +1 -1
- package/dist/composed/responsive-modal.d.ts +39 -0
- package/dist/composed/responsive-modal.d.ts.map +1 -0
- package/dist/composed/responsive-modal.js +212 -0
- package/dist/composed/responsive-modal.js.map +1 -0
- package/dist/composed/rich-chat-input.js +4 -4
- package/dist/composed/rich-text-editor.js +1 -1
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.d.ts +1 -1
- package/dist/composed/schedule-view.d.ts.map +1 -1
- package/dist/composed/schedule-view.js +48 -54
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.d.ts +13 -11
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +54 -130
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/shell/bottom-navbar.js +1 -1
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/top-bar.js +1 -1
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/semantic.css +8 -1
- package/dist/ui/accordion.js +9 -9
- package/dist/ui/alert-dialog.js +26 -26
- package/dist/ui/aspect-ratio.js +1 -1
- package/dist/ui/autocomplete.js +7 -7
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +87 -82
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/breadcrumb.d.ts +0 -1
- package/dist/ui/breadcrumb.d.ts.map +1 -1
- package/dist/ui/breadcrumb.js +58 -35
- package/dist/ui/breadcrumb.js.map +1 -1
- package/dist/ui/button.js +3 -3
- package/dist/ui/checkbox.d.ts +4 -2
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +33 -28
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/collapsible.js +4 -4
- package/dist/ui/combobox.d.ts +3 -0
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +137 -132
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.js +46 -46
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +53 -50
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dot.d.ts +38 -0
- package/dist/ui/dot.d.ts.map +1 -0
- package/dist/ui/dot.js +92 -0
- package/dist/ui/dot.js.map +1 -0
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +70 -65
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/hover-card.js +11 -11
- package/dist/ui/index.d.ts +3 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +67 -67
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input-otp.js +1 -1
- package/dist/ui/input-otp.js.map +1 -1
- package/dist/ui/input.d.ts +4 -2
- package/dist/ui/input.d.ts.map +1 -1
- package/dist/ui/input.js +38 -37
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/label.js +1 -1
- package/dist/ui/lib/field-state.d.ts +21 -0
- package/dist/ui/lib/field-state.d.ts.map +1 -0
- package/dist/ui/lib/use-controllable-open.d.ts +32 -0
- package/dist/ui/lib/use-controllable-open.d.ts.map +1 -0
- package/dist/ui/link.js +1 -1
- package/dist/ui/number-input.d.ts +4 -2
- package/dist/ui/number-input.d.ts.map +1 -1
- package/dist/ui/number-input.js +51 -50
- package/dist/ui/number-input.js.map +1 -1
- package/dist/ui/pagination.js +1 -1
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/progress.d.ts +66 -42
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +144 -40
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.d.ts +6 -2
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +44 -33
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/select.d.ts +1 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +58 -57
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/separator.js +2 -2
- package/dist/ui/separator.js.map +1 -1
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +59 -56
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/sidebar.js +5 -5
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/slider.js +6 -6
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +122 -125
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/surface.js +1 -1
- package/dist/ui/switch.d.ts +3 -1
- package/dist/ui/switch.d.ts.map +1 -1
- package/dist/ui/switch.js +32 -27
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/textarea.d.ts +3 -3
- package/dist/ui/textarea.d.ts.map +1 -1
- package/dist/ui/textarea.js +18 -17
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.js +2 -2
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toggle-group.js +1 -1
- package/dist/ui/toggle.js +1 -1
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +36 -33
- package/dist/ui/tooltip.js.map +1 -1
- package/docs/components/ai/ai-command-provider.md +46 -0
- package/docs/components/ai/block-renderer.md +59 -0
- package/docs/components/ai/command-bar.md +78 -0
- package/docs/components/ai/conversation.md +59 -0
- package/docs/components/ai/devadoot-icon.md +41 -0
- package/docs/components/composed/page-header.md +1 -1
- package/docs/components/composed/responsive-modal.md +66 -0
- package/docs/components/composed/schedule-view.md +6 -2
- package/docs/components/ui/breadcrumb.md +1 -1
- package/docs/components/ui/checkbox.md +4 -1
- package/docs/components/ui/combobox.md +4 -0
- package/docs/components/ui/dot.md +61 -0
- package/docs/components/ui/progress.md +54 -16
- package/docs/components/ui/radio.md +6 -2
- package/docs/components/ui/select.md +9 -5
- package/docs/components/ui/switch.md +4 -1
- package/docs/components/ui/table.md +2 -1
- package/llms.txt +11 -3
- package/make-kit/components/form.md +2 -2
- package/make-kit/components/icon.md +2 -2
- package/make-kit/components/overview.md +2 -2
- package/make-kit/components/select.md +1 -1
- package/make-kit/components/table.md +1 -1
- package/mcp-manifest.json +2656 -1068
- package/mcp-manifest.schema.json +18 -0
- package/package.json +11 -6
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +11 -3
- package/dist/ui/status-dot.d.ts +0 -27
- package/dist/ui/status-dot.d.ts.map +0 -1
- package/dist/ui/status-dot.js +0 -68
- package/dist/ui/status-dot.js.map +0 -1
- package/docs/components/ui/status-dot.md +0 -35
package/dist/ui/index.js
CHANGED
|
@@ -10,73 +10,73 @@ import { Alert as S, alertVariants as C } from "./alert.js";
|
|
|
10
10
|
import { AspectRatio as w } from "./aspect-ratio.js";
|
|
11
11
|
import { FormField as T, FormHelperText as E, useFormField as D } from "./form.js";
|
|
12
12
|
import { Autocomplete as O } from "./autocomplete.js";
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import { Surface as
|
|
62
|
-
import { TableRowLink as
|
|
63
|
-
import { Menubar as
|
|
64
|
-
import { NavigationMenu as
|
|
65
|
-
import { PaginationContent as
|
|
66
|
-
import { Sidebar as
|
|
67
|
-
import { Tabs as
|
|
68
|
-
import { Step as
|
|
69
|
-
import { Text as
|
|
70
|
-
import { Stack as
|
|
71
|
-
import { n as
|
|
72
|
-
import { SegmentedControl as
|
|
73
|
-
import { a as
|
|
74
|
-
import { Link as
|
|
75
|
-
import { a as
|
|
76
|
-
import { formatRelativeTime as
|
|
13
|
+
import { Dot as k, dotVariants as A } from "./dot.js";
|
|
14
|
+
import { Skeleton as j, SkeletonAvatar as M, SkeletonButton as N, SkeletonChart as P, SkeletonGroup as F, SkeletonImage as I, SkeletonInput as L, SkeletonText as R, skeletonVariants as z } from "./skeleton.js";
|
|
15
|
+
import { Avatar as B, AvatarFallback as V, AvatarImage as H, avatarVariants as U } from "./avatar.js";
|
|
16
|
+
import { BadgeIndicator as W } from "./badge-indicator.js";
|
|
17
|
+
import { n as G, r as K, t as q } from "../_chunks/badge-group.js";
|
|
18
|
+
import { Banner as J, bannerVariants as Y } from "./banner.js";
|
|
19
|
+
import { Breadcrumb as X, BreadcrumbEllipsis as Z, BreadcrumbItem as re, BreadcrumbLink as ie, BreadcrumbList as ae, BreadcrumbPage as oe, BreadcrumbSeparator as se } from "./breadcrumb.js";
|
|
20
|
+
import { ButtonGroup as ce, useButtonGroup as le } from "./button-group.js";
|
|
21
|
+
import { Button as ue, buttonVariants as de } from "./button.js";
|
|
22
|
+
import { Card as fe, CardAction as pe, CardBleed as me, CardContent as he, CardDescription as ge, CardFooter as _e, CardHeader as ve, CardSection as ye, CardTitle as be, cardVariants as xe } from "./card.js";
|
|
23
|
+
import { Checkbox as Se } from "./checkbox.js";
|
|
24
|
+
import { Code as Ce } from "./code.js";
|
|
25
|
+
import { Collapsible as we, CollapsibleContent as Te, CollapsibleTrigger as Ee } from "./collapsible.js";
|
|
26
|
+
import { i as De, n as Oe, r as ke, t as Ae } from "../_chunks/popover.js";
|
|
27
|
+
import { ColorInput as je } from "./color-input.js";
|
|
28
|
+
import { ColorSwatch as Me } from "./color-swatch.js";
|
|
29
|
+
import { Combobox as Ne, comboboxTriggerVariants as Pe } from "./combobox.js";
|
|
30
|
+
import { Container as Fe } from "./container.js";
|
|
31
|
+
import { ContextMenu as Ie, ContextMenuCheckboxItem as Le, ContextMenuContent as Re, ContextMenuGroup as ze, ContextMenuItem as Be, ContextMenuLabel as Ve, ContextMenuPortal as He, ContextMenuRadioGroup as Ue, ContextMenuRadioItem as We, ContextMenuSeparator as Ge, ContextMenuShortcut as Ke, ContextMenuSub as qe, ContextMenuSubContent as Je, ContextMenuSubTrigger as Ye, ContextMenuTrigger as Xe } from "./context-menu.js";
|
|
32
|
+
import { Table as Ze, TableBody as Qe, TableCaption as $e, TableCell as et, TableFooter as tt, TableHead as nt, TableHeader as rt, TableRow as it, TableRowActions as at } from "./table.js";
|
|
33
|
+
import { DropdownMenu as ot, DropdownMenuCheckboxItem as st, DropdownMenuContent as ct, DropdownMenuGroup as lt, DropdownMenuItem as ut, DropdownMenuLabel as dt, DropdownMenuPortal as ft, DropdownMenuRadioGroup as pt, DropdownMenuRadioItem as mt, DropdownMenuSeparator as ht, DropdownMenuShortcut as gt, DropdownMenuSub as _t, DropdownMenuSubContent as vt, DropdownMenuSubTrigger as yt, DropdownMenuTrigger as bt } from "./dropdown-menu.js";
|
|
34
|
+
import { DevalokGrain as xt } from "./devalok-grain.js";
|
|
35
|
+
import { Dialog as St, DialogClose as Ct, DialogContent as wt, DialogContentRaw as Tt, DialogDescription as Et, DialogFooter as Dt, DialogHeader as Ot, DialogOverlay as kt, DialogPortal as At, DialogTitle as jt, DialogTrigger as Mt } from "./dialog.js";
|
|
36
|
+
import { FileUpload as Nt } from "./file-upload.js";
|
|
37
|
+
import { HoverCard as Pt, HoverCardContent as Ft, HoverCardTrigger as It } from "./hover-card.js";
|
|
38
|
+
import { IconButton as Lt } from "./icon-button.js";
|
|
39
|
+
import { IconGroup as Rt } from "./icon-group.js";
|
|
40
|
+
import { Input as zt, inputWrapperVariants as Bt } from "./input.js";
|
|
41
|
+
import { Label as Vt } from "./label.js";
|
|
42
|
+
import { Separator as Ht } from "./separator.js";
|
|
43
|
+
import { SplitButton as Ut } from "./split-button.js";
|
|
44
|
+
import { VisuallyHidden as Wt } from "./visually-hidden.js";
|
|
45
|
+
import { NumberInput as Gt, numberInputWrapperVariants as Kt } from "./number-input.js";
|
|
46
|
+
import { RadioGroup as qt, RadioGroupItem as Jt } from "./radio.js";
|
|
47
|
+
import { SearchInput as Yt } from "./search-input.js";
|
|
48
|
+
import { Select as Xt, SelectContent as Zt, SelectGroup as Qt, SelectItem as $t, SelectLabel as en, SelectScrollDownButton as tn, SelectScrollUpButton as nn, SelectSeparator as rn, SelectTrigger as Q, SelectValue as an, selectTriggerVariants as on } from "./select.js";
|
|
49
|
+
import { Slider as sn, sliderThumbVariants as cn, sliderTrackVariants as ln } from "./slider.js";
|
|
50
|
+
import { Switch as un } from "./switch.js";
|
|
51
|
+
import { Textarea as dn, textareaVariants as fn } from "./textarea.js";
|
|
52
|
+
import { Toggle as pn, toggleVariants as mn } from "./toggle.js";
|
|
53
|
+
import { ToggleGroup as hn, ToggleGroupItem as gn } from "./toggle-group.js";
|
|
54
|
+
import { Tooltip as _n, TooltipContent as vn, TooltipProvider as yn, TooltipTrigger as bn } from "./tooltip.js";
|
|
55
|
+
import { TruncatedText as xn } from "./truncated-text.js";
|
|
56
|
+
import { Sheet as Sn, SheetClose as Cn, SheetContent as wn, SheetDescription as Tn, SheetFooter as En, SheetHeader as Dn, SheetOverlay as On, SheetPortal as kn, SheetTitle as An, SheetTrigger as jn } from "./sheet.js";
|
|
57
|
+
import { Progress as Mn, ProgressIndicator as Nn, ProgressLabel as Pn, ProgressRoot as Fn, ProgressSegment as In, ProgressTrack as Ln, ProgressValue as Rn, progressIndicatorVariants as zn, progressTrackVariants as Bn } from "./progress.js";
|
|
58
|
+
import { MultiProgressRing as Vn, ProgressRing as Hn } from "./progress-ring.js";
|
|
59
|
+
import { StatFlash as Un } from "./stat-flash.js";
|
|
60
|
+
import { StatCard as Wn } from "./stat-card.js";
|
|
61
|
+
import { Surface as Gn, surfaceVariants as Kn } from "./surface.js";
|
|
62
|
+
import { TableRowLink as qn } from "./table-row-link.js";
|
|
63
|
+
import { Menubar as Jn, MenubarCheckboxItem as Yn, MenubarContent as Xn, MenubarGroup as Zn, MenubarItem as Qn, MenubarLabel as $n, MenubarMenu as er, MenubarPortal as tr, MenubarRadioGroup as nr, MenubarRadioItem as rr, MenubarSeparator as ir, MenubarShortcut as ar, MenubarSub as or, MenubarSubContent as sr, MenubarSubTrigger as cr, MenubarTrigger as lr } from "./menubar.js";
|
|
64
|
+
import { NavigationMenu as ur, NavigationMenuContent as dr, NavigationMenuIndicator as fr, NavigationMenuItem as pr, NavigationMenuLink as mr, NavigationMenuList as hr, NavigationMenuTrigger as gr, NavigationMenuViewport as _r } from "./navigation-menu.js";
|
|
65
|
+
import { PaginationContent as vr, PaginationEllipsis as yr, PaginationItem as br, PaginationLink as xr, PaginationNav as Sr, PaginationNext as Cr, PaginationPrevious as wr, PaginationRoot as Tr, generatePagination as Er } from "./pagination.js";
|
|
66
|
+
import { Sidebar as Dr, SidebarContent as Or, SidebarFooter as kr, SidebarGroup as Ar, SidebarGroupAction as jr, SidebarGroupContent as Mr, SidebarGroupLabel as Nr, SidebarHeader as Pr, SidebarInput as Fr, SidebarInset as Ir, SidebarMenu as Lr, SidebarMenuAction as Rr, SidebarMenuBadge as zr, SidebarMenuButton as Br, SidebarMenuItem as Vr, SidebarMenuSkeleton as Hr, SidebarMenuSub as Ur, SidebarMenuSubButton as Wr, SidebarMenuSubItem as Gr, SidebarProvider as Kr, SidebarRail as qr, SidebarSeparator as Jr, SidebarTrigger as Yr, useSidebar as Xr } from "./sidebar.js";
|
|
67
|
+
import { Tabs as Zr, TabsContent as Qr, TabsList as $r, TabsTrigger as ei } from "./tabs.js";
|
|
68
|
+
import { Step as ti, Stepper as ni } from "./stepper.js";
|
|
69
|
+
import { Text as ri, textVariants as ii } from "./text.js";
|
|
70
|
+
import { Stack as ai } from "./stack.js";
|
|
71
|
+
import { n as oi, r as si, t as ci } from "../_chunks/tree-view.js";
|
|
72
|
+
import { SegmentedControl as li } from "./segmented-control.js";
|
|
73
|
+
import { a as ui, c as di, i as fi, n as pi, o as mi, r as hi, s as gi, t as _i } from "../_chunks/chat.js";
|
|
74
|
+
import { Link as vi } from "./link.js";
|
|
75
|
+
import { a as yi, c as bi, i as xi, n as Si, o as Ci, r as wi, s as Ti, t as Ei } from "../_chunks/oauth-button.js";
|
|
76
|
+
import { formatRelativeTime as Di } from "./lib/date-utils.js";
|
|
77
77
|
//#region src/ui/lib/check-tokens.ts
|
|
78
78
|
var $ = !1;
|
|
79
|
-
function
|
|
79
|
+
function Oi() {
|
|
80
80
|
if (!$ && !(typeof window > "u")) {
|
|
81
81
|
try {
|
|
82
82
|
return;
|
|
@@ -88,6 +88,6 @@ function xi() {
|
|
|
88
88
|
}
|
|
89
89
|
//#endregion
|
|
90
90
|
//#region src/ui/index.ts
|
|
91
|
-
|
|
91
|
+
Oi();
|
|
92
92
|
//#endregion
|
|
93
|
-
export { s as Accordion, c as AccordionContent, l as AccordionItem, u as AccordionTrigger, S as Alert, d as AlertDialog, f as AlertDialogAction, p as AlertDialogCancel, m as AlertDialogContent, h as AlertDialogDescription, g as AlertDialogFooter, _ as AlertDialogHeader, v as AlertDialogOverlay, y as AlertDialogPortal, b as AlertDialogTitle, x as AlertDialogTrigger, w as AspectRatio, O as Autocomplete,
|
|
93
|
+
export { s as Accordion, c as AccordionContent, l as AccordionItem, u as AccordionTrigger, S as Alert, d as AlertDialog, f as AlertDialogAction, p as AlertDialogCancel, m as AlertDialogContent, h as AlertDialogDescription, g as AlertDialogFooter, _ as AlertDialogHeader, v as AlertDialogOverlay, y as AlertDialogPortal, b as AlertDialogTitle, x as AlertDialogTrigger, w as AspectRatio, O as Autocomplete, B as Avatar, V as AvatarFallback, H as AvatarImage, G as Badge, q as BadgeGroup, W as BadgeIndicator, J as Banner, X as Breadcrumb, Z as BreadcrumbEllipsis, re as BreadcrumbItem, ie as BreadcrumbLink, ae as BreadcrumbList, oe as BreadcrumbPage, se as BreadcrumbSeparator, ue as Button, ce as ButtonGroup, fe as Card, pe as CardAction, me as CardBleed, he as CardContent, ge as CardDescription, _e as CardFooter, ve as CardHeader, ye as CardSection, be as CardTitle, Se as Checkbox, Ce as Code, we as Collapsible, Te as CollapsibleContent, Ee as CollapsibleTrigger, je as ColorInput, Me as ColorSwatch, Ne as Combobox, Fe as Container, Ie as ContextMenu, Le as ContextMenuCheckboxItem, Re as ContextMenuContent, ze as ContextMenuGroup, Be as ContextMenuItem, Ve as ContextMenuLabel, He as ContextMenuPortal, Ue as ContextMenuRadioGroup, We as ContextMenuRadioItem, Ge as ContextMenuSeparator, Ke as ContextMenuShortcut, qe as ContextMenuSub, Je as ContextMenuSubContent, Ye as ContextMenuSubTrigger, Xe as ContextMenuTrigger, di as DateSeparator, xt as DevalokGrain, St as Dialog, Ct as DialogClose, wt as DialogContent, Tt as DialogContentRaw, Et as DialogDescription, Dt as DialogFooter, Ot as DialogHeader, kt as DialogOverlay, At as DialogPortal, jt as DialogTitle, Mt as DialogTrigger, k as Dot, ot as DropdownMenu, st as DropdownMenuCheckboxItem, ct as DropdownMenuContent, lt as DropdownMenuGroup, ut as DropdownMenuItem, dt as DropdownMenuLabel, ft as DropdownMenuPortal, pt as DropdownMenuRadioGroup, mt as DropdownMenuRadioItem, ht as DropdownMenuSeparator, gt as DropdownMenuShortcut, _t as DropdownMenuSub, vt as DropdownMenuSubContent, yt as DropdownMenuSubTrigger, bt as DropdownMenuTrigger, Nt as FileUpload, T as FormField, E as FormHelperText, Pt as HoverCard, Ft as HoverCardContent, It as HoverCardTrigger, o as Icon, Lt as IconButton, ee as IconContext, Rt as IconGroup, te as IconProvider, zt as Input, Vt as Label, vi as Link, Jn as Menubar, Yn as MenubarCheckboxItem, Xn as MenubarContent, Zn as MenubarGroup, Qn as MenubarItem, $n as MenubarLabel, er as MenubarMenu, tr as MenubarPortal, nr as MenubarRadioGroup, rr as MenubarRadioItem, ir as MenubarSeparator, ar as MenubarShortcut, or as MenubarSub, sr as MenubarSubContent, cr as MenubarSubTrigger, lr as MenubarTrigger, mi as Message, ui as MessageInput, fi as MessageList, Vn as MultiProgressRing, ur as NavigationMenu, dr as NavigationMenuContent, fr as NavigationMenuIndicator, pr as NavigationMenuItem, mr as NavigationMenuLink, hr as NavigationMenuList, gr as NavigationMenuTrigger, _r as NavigationMenuViewport, Gt as NumberInput, Ei as OAuth, Si as OAuthButton, wi as OAuthConnectionRow, xi as OAuthDivider, yi as OAuthGlyph, Ci as OAuthGroup, vr as PaginationContent, yr as PaginationEllipsis, br as PaginationItem, xr as PaginationLink, Sr as PaginationNav, Cr as PaginationNext, wr as PaginationPrevious, Tr as PaginationRoot, Ae as Popover, Oe as PopoverAnchor, ke as PopoverContent, De as PopoverTrigger, Mn as Progress, Nn as ProgressIndicator, Pn as ProgressLabel, Hn as ProgressRing, Fn as ProgressRoot, In as ProgressSegment, Ln as ProgressTrack, Rn as ProgressValue, qt as RadioGroup, Jt as RadioGroupItem, Yt as SearchInput, li as SegmentedControl, Xt as Select, Zt as SelectContent, Qt as SelectGroup, $t as SelectItem, en as SelectLabel, tn as SelectScrollDownButton, nn as SelectScrollUpButton, rn as SelectSeparator, Q as SelectTrigger, an as SelectValue, Ht as Separator, Sn as Sheet, Cn as SheetClose, wn as SheetContent, Tn as SheetDescription, En as SheetFooter, Dn as SheetHeader, On as SheetOverlay, kn as SheetPortal, An as SheetTitle, jn as SheetTrigger, Dr as Sidebar, Or as SidebarContent, kr as SidebarFooter, Ar as SidebarGroup, jr as SidebarGroupAction, Mr as SidebarGroupContent, Nr as SidebarGroupLabel, Pr as SidebarHeader, Fr as SidebarInput, Ir as SidebarInset, Lr as SidebarMenu, Rr as SidebarMenuAction, zr as SidebarMenuBadge, Br as SidebarMenuButton, Vr as SidebarMenuItem, Hr as SidebarMenuSkeleton, Ur as SidebarMenuSub, Wr as SidebarMenuSubButton, Gr as SidebarMenuSubItem, Kr as SidebarProvider, qr as SidebarRail, Jr as SidebarSeparator, Yr as SidebarTrigger, j as Skeleton, M as SkeletonAvatar, N as SkeletonButton, P as SkeletonChart, F as SkeletonGroup, I as SkeletonImage, L as SkeletonInput, R as SkeletonText, sn as Slider, a as Spinner, Ut as SplitButton, ai as Stack, Wn as StatCard, Un as StatFlash, ti as Step, ni as Stepper, Gn as Surface, un as Switch, hi as SystemMessage, Ze as Table, Qe as TableBody, $e as TableCaption, et as TableCell, tt as TableFooter, nt as TableHead, rt as TableHeader, it as TableRow, at as TableRowActions, qn as TableRowLink, Zr as Tabs, Qr as TabsContent, $r as TabsList, ei as TabsTrigger, ri as Text, dn as Textarea, pn as Toggle, hn as ToggleGroup, gn as ToggleGroupItem, _n as Tooltip, vn as TooltipContent, yn as TooltipProvider, bn as TooltipTrigger, ci as TreeItem, oi as TreeView, xn as TruncatedText, pi as TypingIndicator, _i as UnreadSeparator, Wt as VisuallyHidden, C as alertVariants, U as avatarVariants, K as badgeVariants, Y as bannerVariants, de as buttonVariants, xe as cardVariants, i as cn, Pe as comboboxTriggerVariants, A as dotVariants, Di as formatRelativeTime, Er as generatePagination, Ti as getOAuthLabel, bi as getOAuthName, Bt as inputWrapperVariants, Kt as numberInputWrapperVariants, zn as progressIndicatorVariants, Bn as progressTrackVariants, on as selectTriggerVariants, z as skeletonVariants, cn as sliderThumbVariants, ln as sliderTrackVariants, e as springs, t as stagger, Kn as surfaceVariants, ii as textVariants, fn as textareaVariants, mn as toggleVariants, n as tweens, le as useButtonGroup, D as useFormField, ne as useIconContext, gi as useMessageContext, Xr as useSidebar, si as useTree, r as withReducedMotion };
|
package/dist/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/ui/lib/check-tokens.ts","../../src/ui/index.ts"],"sourcesContent":["/**\n * Dev-mode check for missing token CSS.\n *\n * If the consumer forgets `import '@devalok/shilp-sutra/tokens'`, all CSS\n * custom properties resolve to empty strings and components render with\n * transparent/broken backgrounds. This check detects that condition and\n * warns in the console.\n *\n * Only runs once, only in development, only in the browser.\n */\nlet checked = false\n\nexport function checkTokensLoaded(): void {\n if (checked) return\n if (typeof window === 'undefined') return\n\n // Skip in production — bundlers (Vite, Next.js, webpack) define import.meta.env or process.env\n try {\n // @ts-expect-error -- import.meta.env is Vite-specific, not in base TS lib\n if (import.meta.env?.PROD) return\n } catch { /* not in Vite */ }\n\n checked = true\n\n // Wait for stylesheets to load\n requestAnimationFrame(() => {\n const value = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-9').trim()\n if (!value) {\n console.warn(\n '[shilp-sutra] Design system tokens CSS not loaded. ' +\n 'Add `import \\'@devalok/shilp-sutra/tokens\\'` to your root layout. ' +\n 'Without it, components will render with missing colors, spacing, and typography.'\n )\n }\n })\n}\n","/**\n * @module @devalok/shilp-sutra/ui\n *\n * Core UI primitives: buttons, inputs, dialogs, cards, tables, badges, navigation, and more.\n * Most components require client-side React (\"use client\").\n *\n * **Server-safe components** (import individually for Server Components):\n * `Text`, `Skeleton`, `Stack`, `Container`, `Table`, `Code`, `VisuallyHidden`\n *\n * @example\n * // Server Component — import individually:\n * import { Text } from '@devalok/shilp-sutra/ui/text'\n * import { Stack } from '@devalok/shilp-sutra/ui/stack'\n *\n * // Client Component — barrel import:\n * import { Button, Dialog } from '@devalok/shilp-sutra/ui'\n */\n\n// Dev-mode token presence check — runs once on first import\nimport { checkTokensLoaded } from './lib/check-tokens'\ncheckTokensLoaded()\n\n// Core\nexport { Button, type ButtonProps,buttonVariants } from './button'\nexport { ButtonGroup, type ButtonGroupProps,useButtonGroup } from './button-group'\nexport { ColorInput, type ColorInputProps } from './color-input'\nexport { Icon, type IconProps } from './icon'\nexport { IconButton, type IconButtonProps } from './icon-button'\nexport { IconContext, type IconContextValue, IconProvider, type IconSize, type IconStroke,useIconContext } from './icon-context'\nexport { IconGroup, type IconGroupProps } from './icon-group'\nexport { Input, type InputProps, type InputState, inputWrapperVariants } from './input'\nexport { Label, type LabelProps } from './label'\nexport { Separator, type SeparatorProps } from './separator'\nexport { SplitButton, type SplitButtonProps } from './split-button'\nexport { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden'\n\n// Autocomplete\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps } from './autocomplete'\n\n// Combobox\nexport { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize,comboboxTriggerVariants } from './combobox'\n\n// FileUpload\nexport { FileUpload, type FileUploadProps } from './file-upload'\n\n// Form Controls\nexport { Checkbox, type CheckboxProps } from './checkbox'\nexport { FormField, type FormFieldProps, type FormHelperState, FormHelperText, type FormHelperTextProps,useFormField } from './form'\n// InputOTP removed from barrel in 0.40.0 — hard peer `input-otp` was breaking\n// fresh-consumer builds. Import per-component instead:\n// import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@devalok/shilp-sutra/ui/input-otp'\nexport { NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputState,numberInputWrapperVariants } from './number-input'\nexport { RadioGroup, RadioGroupItem, type RadioGroupItemProps,type RadioGroupProps } from './radio'\nexport { SearchInput, type SearchInputProps } from './search-input'\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n type SelectTriggerProps,\n selectTriggerVariants,\n SelectValue,\n} from './select'\nexport { Slider, type SliderColor,type SliderProps, type SliderSize, sliderThumbVariants, sliderTrackVariants } from './slider'\nexport { Switch, type SwitchProps } from './switch'\nexport { Textarea, type TextareaProps,textareaVariants } from './textarea'\nexport { Toggle, type ToggleProps,toggleVariants } from './toggle'\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps,type ToggleGroupProps } from './toggle-group'\nexport { TruncatedText, type TruncatedTextProps } from './truncated-text'\n\n// Feedback & Overlays\nexport {\n AlertDialog,\n AlertDialogAction,\n type AlertDialogActionProps,\n AlertDialogCancel,\n type AlertDialogCancelProps,\n AlertDialogContent,\n type AlertDialogContentProps,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from './alert-dialog'\nexport { Collapsible, CollapsibleContent, type CollapsibleProps,CollapsibleTrigger } from './collapsible'\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n type DialogContentProps,\n DialogContentRaw,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n type DialogTitleProps,\n DialogTrigger,\n} from './dialog'\nexport { HoverCard, HoverCardContent, type HoverCardContentProps,HoverCardTrigger } from './hover-card'\nexport { Popover, PopoverAnchor, PopoverContent, type PopoverContentProps,PopoverTrigger } from './popover'\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n type SheetContentProps,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n} from './sheet'\n// toast + Toaster removed from barrel in 0.40.0 — hard peer `sonner` was\n// breaking fresh-consumer builds when consumers imported other UI symbols\n// from the barrel without sonner installed. Import per-component instead:\n// import { toast, formatFileSize, type ToastOptions } from '@devalok/shilp-sutra/ui/toast'\n// import { Toaster } from '@devalok/shilp-sutra/ui/toaster'\nexport { Tooltip, TooltipContent, type TooltipContentProps,TooltipProvider, TooltipTrigger } from './tooltip'\n// ---------------------------------------------------------------------------\n// Notifications — pick the right one:\n// Alert — inline, static feedback within a form or page section (no user action needed to show)\n// Banner — persistent, page-level notice shown above main content (survives navigation)\n// Toast — imperative, transient, action-triggered (fires on user action, auto-dismisses)\n// Requires <Toaster /> mounted once at layout root. Use toast.success() etc. from anywhere.\n// ---------------------------------------------------------------------------\nexport { Alert, type AlertProps,alertVariants } from './alert'\nexport { Banner, type BannerProps,bannerVariants } from './banner'\nexport { Spinner, type SpinnerProps } from './spinner'\n\n// Data Display\nexport { AspectRatio } from './aspect-ratio'\nexport { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarProps, type AvatarRing,type AvatarStatus, avatarVariants } from './avatar'\nexport { Badge, type BadgeProps,badgeVariants } from './badge'\nexport { BadgeGroup, type BadgeGroupProps } from './badge-group'\nexport { BadgeIndicator, type BadgeIndicatorProps } from './badge-indicator'\nexport { Card, CardAction, type CardActionPlacement, type CardActionProps, CardBleed, type CardBleedProps, type CardBleedSide, CardContent, CardDescription, CardFooter, CardHeader, type CardProps,CardSection, CardTitle, cardVariants } from './card'\nexport { Code, type CodeProps } from './code'\nexport { ColorSwatch, type ColorSwatchProps } from './color-swatch'\nexport { Progress, progressIndicatorVariants, type ProgressProps,progressTrackVariants } from './progress'\nexport { MultiProgressRing, type MultiProgressRingProps,ProgressRing, type ProgressRingProps } from './progress-ring'\nexport {\n Skeleton,\n SkeletonAvatar,\n type SkeletonAvatarProps,\n SkeletonButton,\n type SkeletonButtonProps,\n SkeletonChart,\n type SkeletonChartProps,\n SkeletonGroup,\n type SkeletonGroupProps,\n SkeletonImage,\n type SkeletonImageProps,\n SkeletonInput,\n type SkeletonInputProps,\n type SkeletonProps,\n SkeletonText,\n type SkeletonTextProps,\n skeletonVariants,\n} from './skeleton'\nexport { StatCard, type StatCardProps } from './stat-card'\nexport {\n type FlashPreset,\n type FlashSpec,\n type FlashSpeed,\n type FlashTone,\n StatFlash,\n type StatFlashProps,\n} from './stat-flash'\nexport { StatusDot, type StatusDotProps, type StatusDotStatus } from './status-dot'\nexport { Surface, type SurfaceProps, surfaceVariants } from './surface'\nexport { Table, TableBody, TableCaption, TableCell, type TableCellBaseProps,type TableCellProps,type TableDensity, TableFooter, TableHead, TableHeader, type TableProps, TableRow, TableRowActions, type TableRowActionsProps,type TableRowProps } from './table'\nexport { TableRowLink, type TableRowLinkProps } from './table-row-link'\n\n// Navigation\nexport { Accordion, AccordionContent, type AccordionContentProps,AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps } from './accordion'\nexport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n type BreadcrumbLinkProps,\n BreadcrumbList,\n BreadcrumbPage,\n type BreadcrumbProps,\n BreadcrumbSeparator,\n} from './breadcrumb'\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n type ContextMenuContentProps,\n ContextMenuGroup,\n ContextMenuItem,\n type ContextMenuItemProps,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from './context-menu'\nexport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n type DropdownMenuContentProps,\n DropdownMenuGroup,\n DropdownMenuItem,\n type DropdownMenuItemProps,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from './dropdown-menu'\nexport {\n Menubar,\n MenubarCheckboxItem,\n MenubarContent,\n type MenubarContentProps,\n MenubarGroup,\n MenubarItem,\n type MenubarItemProps,\n MenubarLabel,\n MenubarMenu,\n MenubarPortal,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSeparator,\n MenubarShortcut,\n MenubarSub,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarTrigger,\n} from './menubar'\nexport {\n NavigationMenu,\n NavigationMenuContent,\n type NavigationMenuContentProps,\n NavigationMenuIndicator,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n type NavigationMenuProps,\n NavigationMenuTrigger,\n NavigationMenuViewport,\n} from './navigation-menu'\nexport {\n generatePagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n type PaginationLinkProps,\n PaginationNav,\n type PaginationNavProps,\n PaginationNext,\n PaginationPrevious,\n PaginationRoot,\n} from './pagination'\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n type SidebarProps,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n} from './sidebar'\nexport { Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation,type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps } from './tabs'\n\n// Workflow\nexport { Step, Stepper, type StepperProps, type StepProps } from './stepper'\n\n\n// Typography\nexport { Text, type TextProps, type TextVariant,textVariants } from './text'\n\n// Layout\nexport { Container, type ContainerProps } from './container'\nexport { type SpacingToken,Stack, type StackProps } from './stack'\n\n// Tree View\nexport { TreeItem, type TreeItemProps, type TreeNode,TreeView, type TreeViewProps, useTree } from './tree-view'\n\n// Segmented Control\nexport {\n SegmentedControl,\n type SegmentedControlOption,\n type SegmentedControlProps,\n type SegmentedControlSize,\n type SegmentedControlVariant,\n} from './segmented-control'\n\n// Brand Texture\nexport { DevalokGrain, type DevalokGrainProps, type GrainIntensity } from './devalok-grain'\n\n// Chat primitives\nexport {\n DateSeparator,\n type DateSeparatorProps,\n Message,\n type MessageActionProps,\n type MessageActionsProps,\n type MessageAuthorProps,\n type MessageAvatarProps,\n type MessageBodyProps,\n type MessageContentProps,\n type MessageContextValue,\n type MessageEditableBodyProps,\n MessageInput,\n type MessageInputProps,\n MessageList,\n type MessageListProps,\n type MessageProps,\n type MessageReactionsProps,\n SystemMessage,\n type SystemMessageProps,\n TypingIndicator,\n type TypingIndicatorProps,\n UnreadSeparator,\n type UnreadSeparatorProps,\n useMessageContext,\n} from './chat'\n\n// Other\nexport { Link, type LinkProps } from './link'\n\n// OAuth / Social sign-in\nexport {\n getOAuthLabel,\n getOAuthName,\n OAuth,\n type OAuthAppearance,\n OAuthButton,\n type OAuthButtonProps,\n OAuthConnectionRow,\n type OAuthConnectionRowProps,\n OAuthDivider,\n type OAuthDividerProps,\n OAuthGlyph,\n type OAuthGlyphProps,\n OAuthGroup,\n type OAuthGroupProps,\n type OAuthIntent,\n type OAuthProvider,\n type OAuthVariant,\n} from './oauth-button'\n\n// Utilities\nexport { formatRelativeTime } from './lib/date-utils'\nexport type { SpringPreset, TweenPreset } from './lib/motion'\nexport { springs, stagger, tweens, withReducedMotion } from './lib/motion'\nexport { cn } from './lib/utils'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAI,IAAU;AAEd,SAAgB,KAA0B;AACpC,WACA,SAAO,SAAW,MAGtB;MAAI;AAEyB;UACrB;AAKR,EAHA,IAAU,IAGV,4BAA4B;AAE1B,GADc,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,mBAAmB,CAAC,MAAM,IAElG,QAAQ,KACN,sMAGD;IAEH;;;;;ACdJ,IAAmB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/ui/lib/check-tokens.ts","../../src/ui/index.ts"],"sourcesContent":["/**\n * Dev-mode check for missing token CSS.\n *\n * If the consumer forgets `import '@devalok/shilp-sutra/tokens'`, all CSS\n * custom properties resolve to empty strings and components render with\n * transparent/broken backgrounds. This check detects that condition and\n * warns in the console.\n *\n * Only runs once, only in development, only in the browser.\n */\nlet checked = false\n\nexport function checkTokensLoaded(): void {\n if (checked) return\n if (typeof window === 'undefined') return\n\n // Skip in production — bundlers (Vite, Next.js, webpack) define import.meta.env or process.env\n try {\n // @ts-expect-error -- import.meta.env is Vite-specific, not in base TS lib\n if (import.meta.env?.PROD) return\n } catch { /* not in Vite */ }\n\n checked = true\n\n // Wait for stylesheets to load\n requestAnimationFrame(() => {\n const value = getComputedStyle(document.documentElement).getPropertyValue('--color-accent-9').trim()\n if (!value) {\n console.warn(\n '[shilp-sutra] Design system tokens CSS not loaded. ' +\n 'Add `import \\'@devalok/shilp-sutra/tokens\\'` to your root layout. ' +\n 'Without it, components will render with missing colors, spacing, and typography.'\n )\n }\n })\n}\n","/**\n * @module @devalok/shilp-sutra/ui\n *\n * Core UI primitives: buttons, inputs, dialogs, cards, tables, badges, navigation, and more.\n * Most components require client-side React (\"use client\").\n *\n * **Server-safe components** (import individually for Server Components):\n * `Text`, `Skeleton`, `Stack`, `Container`, `Table`, `Code`, `VisuallyHidden`\n *\n * @example\n * // Server Component — import individually:\n * import { Text } from '@devalok/shilp-sutra/ui/text'\n * import { Stack } from '@devalok/shilp-sutra/ui/stack'\n *\n * // Client Component — barrel import:\n * import { Button, Dialog } from '@devalok/shilp-sutra/ui'\n */\n\n// Dev-mode token presence check — runs once on first import\nimport { checkTokensLoaded } from './lib/check-tokens'\ncheckTokensLoaded()\n\n// Core\nexport { Button, type ButtonProps,buttonVariants } from './button'\nexport { ButtonGroup, type ButtonGroupProps,useButtonGroup } from './button-group'\nexport { ColorInput, type ColorInputProps } from './color-input'\nexport { Icon, type IconProps } from './icon'\nexport { IconButton, type IconButtonProps } from './icon-button'\nexport { IconContext, type IconContextValue, IconProvider, type IconSize, type IconStroke,useIconContext } from './icon-context'\nexport { IconGroup, type IconGroupProps } from './icon-group'\nexport { Input, type InputProps, type InputState, inputWrapperVariants } from './input'\nexport { Label, type LabelProps } from './label'\nexport { type FieldState } from './lib/field-state'\nexport { Separator, type SeparatorProps } from './separator'\nexport { SplitButton, type SplitButtonProps } from './split-button'\nexport { VisuallyHidden, type VisuallyHiddenProps } from './visually-hidden'\n\n// Autocomplete\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps } from './autocomplete'\n\n// Combobox\nexport { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize,comboboxTriggerVariants } from './combobox'\n\n// FileUpload\nexport { FileUpload, type FileUploadProps } from './file-upload'\n\n// Form Controls\nexport { Checkbox, type CheckboxProps } from './checkbox'\nexport { FormField, type FormFieldProps, type FormHelperState, FormHelperText, type FormHelperTextProps,useFormField } from './form'\n// InputOTP removed from barrel in 0.40.0 — hard peer `input-otp` was breaking\n// fresh-consumer builds. Import per-component instead:\n// import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@devalok/shilp-sutra/ui/input-otp'\nexport { NumberInput, type NumberInputProps, type NumberInputSize, type NumberInputState,numberInputWrapperVariants } from './number-input'\nexport { RadioGroup, RadioGroupItem, type RadioGroupItemProps,type RadioGroupProps } from './radio'\nexport { SearchInput, type SearchInputProps } from './search-input'\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n type SelectTriggerProps,\n selectTriggerVariants,\n SelectValue,\n} from './select'\nexport { Slider, type SliderColor,type SliderProps, type SliderSize, sliderThumbVariants, sliderTrackVariants } from './slider'\nexport { Switch, type SwitchProps } from './switch'\nexport { Textarea, type TextareaProps,textareaVariants } from './textarea'\nexport { Toggle, type ToggleProps,toggleVariants } from './toggle'\nexport { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps,type ToggleGroupProps } from './toggle-group'\nexport { TruncatedText, type TruncatedTextProps } from './truncated-text'\n\n// Feedback & Overlays\nexport {\n AlertDialog,\n AlertDialogAction,\n type AlertDialogActionProps,\n AlertDialogCancel,\n type AlertDialogCancelProps,\n AlertDialogContent,\n type AlertDialogContentProps,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from './alert-dialog'\nexport { Collapsible, CollapsibleContent, type CollapsibleProps,CollapsibleTrigger } from './collapsible'\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n type DialogContentProps,\n DialogContentRaw,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n type DialogTitleProps,\n DialogTrigger,\n} from './dialog'\nexport { HoverCard, HoverCardContent, type HoverCardContentProps,HoverCardTrigger } from './hover-card'\nexport { Popover, PopoverAnchor, PopoverContent, type PopoverContentProps,PopoverTrigger } from './popover'\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n type SheetContentProps,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n} from './sheet'\n// toast + Toaster removed from barrel in 0.40.0 — hard peer `sonner` was\n// breaking fresh-consumer builds when consumers imported other UI symbols\n// from the barrel without sonner installed. Import per-component instead:\n// import { toast, formatFileSize, type ToastOptions } from '@devalok/shilp-sutra/ui/toast'\n// import { Toaster } from '@devalok/shilp-sutra/ui/toaster'\nexport { Tooltip, TooltipContent, type TooltipContentProps,TooltipProvider, TooltipTrigger } from './tooltip'\n// ---------------------------------------------------------------------------\n// Notifications — pick the right one:\n// Alert — inline, static feedback within a form or page section (no user action needed to show)\n// Banner — persistent, page-level notice shown above main content (survives navigation)\n// Toast — imperative, transient, action-triggered (fires on user action, auto-dismisses)\n// Requires <Toaster /> mounted once at layout root. Use toast.success() etc. from anywhere.\n// ---------------------------------------------------------------------------\nexport { Alert, type AlertProps,alertVariants } from './alert'\nexport { Banner, type BannerProps,bannerVariants } from './banner'\nexport { Spinner, type SpinnerProps } from './spinner'\n\n// Data Display\nexport { AspectRatio } from './aspect-ratio'\nexport { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarProps, type AvatarRing,type AvatarStatus, avatarVariants } from './avatar'\nexport { Badge, type BadgeProps,badgeVariants } from './badge'\nexport { BadgeGroup, type BadgeGroupProps } from './badge-group'\nexport { BadgeIndicator, type BadgeIndicatorProps } from './badge-indicator'\nexport { Card, CardAction, type CardActionPlacement, type CardActionProps, CardBleed, type CardBleedProps, type CardBleedSide, CardContent, CardDescription, CardFooter, CardHeader, type CardProps,CardSection, CardTitle, cardVariants } from './card'\nexport { Code, type CodeProps } from './code'\nexport { ColorSwatch, type ColorSwatchProps } from './color-swatch'\nexport { Dot, type DotColor, type DotProps, type DotSize, type DotVariant, dotVariants } from './dot'\nexport {\n Progress,\n type ProgressColor,\n ProgressIndicator,\n type ProgressIndicatorProps,\n progressIndicatorVariants,\n ProgressLabel,\n type ProgressLabelProps,\n type ProgressProps,\n ProgressRoot,\n type ProgressRootProps,\n ProgressSegment,\n type ProgressSegmentProps,\n type ProgressSize,\n ProgressTrack,\n type ProgressTrackProps,\n progressTrackVariants,\n ProgressValue,\n type ProgressValueProps,\n} from './progress'\nexport { MultiProgressRing, type MultiProgressRingProps,ProgressRing, type ProgressRingProps } from './progress-ring'\nexport {\n Skeleton,\n SkeletonAvatar,\n type SkeletonAvatarProps,\n SkeletonButton,\n type SkeletonButtonProps,\n SkeletonChart,\n type SkeletonChartProps,\n SkeletonGroup,\n type SkeletonGroupProps,\n SkeletonImage,\n type SkeletonImageProps,\n SkeletonInput,\n type SkeletonInputProps,\n type SkeletonProps,\n SkeletonText,\n type SkeletonTextProps,\n skeletonVariants,\n} from './skeleton'\nexport { StatCard, type StatCardProps } from './stat-card'\nexport {\n type FlashPreset,\n type FlashSpec,\n type FlashSpeed,\n type FlashTone,\n StatFlash,\n type StatFlashProps,\n} from './stat-flash'\nexport { Surface, type SurfaceProps, surfaceVariants } from './surface'\nexport { Table, TableBody, TableCaption, TableCell, type TableCellBaseProps,type TableCellProps,type TableDensity, TableFooter, TableHead, TableHeader, type TableProps, TableRow, TableRowActions, type TableRowActionsProps,type TableRowProps } from './table'\nexport { TableRowLink, type TableRowLinkProps } from './table-row-link'\n\n// Navigation\nexport { Accordion, AccordionContent, type AccordionContentProps,AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps } from './accordion'\nexport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n type BreadcrumbLinkProps,\n BreadcrumbList,\n BreadcrumbPage,\n type BreadcrumbProps,\n BreadcrumbSeparator,\n} from './breadcrumb'\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n type ContextMenuContentProps,\n ContextMenuGroup,\n ContextMenuItem,\n type ContextMenuItemProps,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from './context-menu'\nexport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n type DropdownMenuContentProps,\n DropdownMenuGroup,\n DropdownMenuItem,\n type DropdownMenuItemProps,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from './dropdown-menu'\nexport {\n Menubar,\n MenubarCheckboxItem,\n MenubarContent,\n type MenubarContentProps,\n MenubarGroup,\n MenubarItem,\n type MenubarItemProps,\n MenubarLabel,\n MenubarMenu,\n MenubarPortal,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSeparator,\n MenubarShortcut,\n MenubarSub,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarTrigger,\n} from './menubar'\nexport {\n NavigationMenu,\n NavigationMenuContent,\n type NavigationMenuContentProps,\n NavigationMenuIndicator,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n type NavigationMenuProps,\n NavigationMenuTrigger,\n NavigationMenuViewport,\n} from './navigation-menu'\nexport {\n generatePagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n type PaginationLinkProps,\n PaginationNav,\n type PaginationNavProps,\n PaginationNext,\n PaginationPrevious,\n PaginationRoot,\n} from './pagination'\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n type SidebarProps,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n} from './sidebar'\nexport { Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation,type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps } from './tabs'\n\n// Workflow\nexport { Step, Stepper, type StepperProps, type StepProps } from './stepper'\n\n\n// Typography\nexport { Text, type TextProps, type TextVariant,textVariants } from './text'\n\n// Layout\nexport { Container, type ContainerProps } from './container'\nexport { type SpacingToken,Stack, type StackProps } from './stack'\n\n// Tree View\nexport { TreeItem, type TreeItemProps, type TreeNode,TreeView, type TreeViewProps, useTree } from './tree-view'\n\n// Segmented Control\nexport {\n SegmentedControl,\n type SegmentedControlOption,\n type SegmentedControlProps,\n type SegmentedControlSize,\n type SegmentedControlVariant,\n} from './segmented-control'\n\n// Brand Texture\nexport { DevalokGrain, type DevalokGrainProps, type GrainIntensity } from './devalok-grain'\n\n// Chat primitives\nexport {\n DateSeparator,\n type DateSeparatorProps,\n Message,\n type MessageActionProps,\n type MessageActionsProps,\n type MessageAuthorProps,\n type MessageAvatarProps,\n type MessageBodyProps,\n type MessageContentProps,\n type MessageContextValue,\n type MessageEditableBodyProps,\n MessageInput,\n type MessageInputProps,\n MessageList,\n type MessageListProps,\n type MessageProps,\n type MessageReactionsProps,\n SystemMessage,\n type SystemMessageProps,\n TypingIndicator,\n type TypingIndicatorProps,\n UnreadSeparator,\n type UnreadSeparatorProps,\n useMessageContext,\n} from './chat'\n\n// Other\nexport { Link, type LinkProps } from './link'\n\n// OAuth / Social sign-in\nexport {\n getOAuthLabel,\n getOAuthName,\n OAuth,\n type OAuthAppearance,\n OAuthButton,\n type OAuthButtonProps,\n OAuthConnectionRow,\n type OAuthConnectionRowProps,\n OAuthDivider,\n type OAuthDividerProps,\n OAuthGlyph,\n type OAuthGlyphProps,\n OAuthGroup,\n type OAuthGroupProps,\n type OAuthIntent,\n type OAuthProvider,\n type OAuthVariant,\n} from './oauth-button'\n\n// Utilities\nexport { formatRelativeTime } from './lib/date-utils'\nexport type { SpringPreset, TweenPreset } from './lib/motion'\nexport { springs, stagger, tweens, withReducedMotion } from './lib/motion'\nexport { cn } from './lib/utils'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAI,IAAU;AAEd,SAAgB,KAA0B;AACpC,WACA,SAAO,SAAW,MAGtB;MAAI;AAEyB;UACrB;AAKR,EAHA,IAAU,IAGV,4BAA4B;AAE1B,GADc,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,mBAAmB,CAAC,MAAM,IAElG,QAAQ,KACN,sMAGD;IAEH;;;;;ACdJ,IAAmB"}
|
package/dist/ui/input-otp.js
CHANGED
|
@@ -41,7 +41,7 @@ var p = r.forwardRef(({ index: t, className: n, ...o }, s) => {
|
|
|
41
41
|
...o,
|
|
42
42
|
children: [p, m && /* @__PURE__ */ i("div", {
|
|
43
43
|
className: "pointer-events-none absolute inset-0 flex items-center justify-center",
|
|
44
|
-
children: /* @__PURE__ */ i("div", { className: "animate-caret-blink h-
|
|
44
|
+
children: /* @__PURE__ */ i("div", { className: "animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02" })
|
|
45
45
|
})]
|
|
46
46
|
});
|
|
47
47
|
});
|
package/dist/ui/input-otp.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n sm: 'h-ds-sm w-ds-sm text-ds-sm',\n md: 'h-ds-sm-plus w-ds-sm-plus text-ds-md',\n lg: 'h-ds-md w-ds-md text-ds-lg',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n React.ElementRef<typeof OTPInput>,\n React.ComponentPropsWithoutRef<typeof OTPInput> & {\n state?: 'default' | 'error'\n /** Slot size. @default 'md' */\n size?: InputOTPSize\n }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n const formField = useFormField()\n const isError = state === 'error' || formField?.state === 'error'\n const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n return (\n <InputOTPSizeContext.Provider value={size}>\n <OTPInput\n ref={ref}\n aria-invalid={isError || undefined}\n aria-describedby={formField?.helperTextId}\n aria-required={formField?.required || undefined}\n containerClassName={cn(\n 'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n isError && 'is-error',\n containerClassName,\n )}\n className={cn('disabled:cursor-not-allowed', className)}\n {...props}\n />\n </InputOTPSizeContext.Provider>\n )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n React.ElementRef<'div'>,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n React.ElementRef<'div'>,\n React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n const inputOTPContext = React.useContext(OTPInputContext)\n const size = React.useContext(InputOTPSizeContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n slotSizeClasses[size],\n 'group-[.is-error]/otp:border-error-7',\n isActive && 'z-raised ring-2 ring-accent-9',\n className,\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink h-
|
|
1
|
+
{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/ui/input-otp.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus } from '@tabler/icons-react'\nimport { OTPInput, OTPInputContext } from 'input-otp'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n// ── Size context ────────────────────────────────────────────────────\n\ntype InputOTPSize = 'sm' | 'md' | 'lg'\n\nconst InputOTPSizeContext = React.createContext<InputOTPSize>('md')\n\nconst slotSizeClasses: Record<InputOTPSize, string> = {\n sm: 'h-ds-sm w-ds-sm text-ds-sm',\n md: 'h-ds-sm-plus w-ds-sm-plus text-ds-md',\n lg: 'h-ds-md w-ds-md text-ds-lg',\n}\n\n// ── InputOTP ────────────────────────────────────────────────────────\n\nconst InputOTP = React.forwardRef<\n React.ElementRef<typeof OTPInput>,\n React.ComponentPropsWithoutRef<typeof OTPInput> & {\n state?: 'default' | 'error'\n /** Slot size. @default 'md' */\n size?: InputOTPSize\n }\n>(({ className, containerClassName, state, size: sizeProp, ...props }, ref) => {\n const formField = useFormField()\n const isError = state === 'error' || formField?.state === 'error'\n const size: InputOTPSize = (typeof sizeProp === 'string' ? sizeProp : undefined) ?? 'md'\n\n return (\n <InputOTPSizeContext.Provider value={size}>\n <OTPInput\n ref={ref}\n aria-invalid={isError || undefined}\n aria-describedby={formField?.helperTextId}\n aria-required={formField?.required || undefined}\n containerClassName={cn(\n 'group/otp flex items-center gap-ds-03 has-[:disabled]:opacity-action-disabled',\n isError && 'is-error',\n containerClassName,\n )}\n className={cn('disabled:cursor-not-allowed', className)}\n {...props}\n />\n </InputOTPSizeContext.Provider>\n )\n})\nInputOTP.displayName = 'InputOTP'\n\nconst InputOTPGroup = React.forwardRef<\n React.ElementRef<'div'>,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn('flex items-center', className)} {...props} />\n))\nInputOTPGroup.displayName = 'InputOTPGroup'\n\nconst InputOTPSlot = React.forwardRef<\n React.ElementRef<'div'>,\n React.ComponentPropsWithoutRef<'div'> & { index: number }\n>(({ index, className, ...props }, ref) => {\n const inputOTPContext = React.useContext(OTPInputContext)\n const size = React.useContext(InputOTPSizeContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative flex items-center justify-center border-y border-r border-surface-border-strong transition-[box-shadow,border-color] first:rounded-l-control first:border-l last:rounded-r-control',\n slotSizeClasses[size],\n 'group-[.is-error]/otp:border-error-7',\n isActive && 'z-raised ring-2 ring-accent-9',\n className,\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink h-ds-05 w-px bg-surface-fg duration-slow-02\" />\n </div>\n )}\n </div>\n )\n})\nInputOTPSlot.displayName = 'InputOTPSlot'\n\nconst InputOTPSeparator = React.forwardRef<\n React.ElementRef<'div'>,\n React.ComponentPropsWithoutRef<'div'>\n>(({ ...props }, ref) => (\n <div ref={ref} role=\"separator\" {...props}>\n <Icon icon={IconMinus} size=\"sm\" />\n </div>\n))\nInputOTPSeparator.displayName = 'InputOTPSeparator'\n\nexport type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {\n state?: 'default' | 'error'\n /** Slot size. @default 'md' */\n size?: InputOTPSize\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator,InputOTPSlot }\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAsB,EAAM,cAA4B,KAAK,EAE7D,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAIK,IAAW,EAAM,YAOpB,EAAE,cAAW,uBAAoB,UAAO,MAAM,GAAU,GAAG,KAAS,MAAQ;CAC7E,IAAM,IAAY,GAAc,EAC1B,IAAU,MAAU,WAAW,GAAW,UAAU,SACpD,KAAsB,OAAO,KAAa,WAAW,IAAW,KAAA,MAAc;AAEpF,QACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO;YACnC,kBAAC,GAAD;GACO;GACL,gBAAc,KAAW,KAAA;GACzB,oBAAkB,GAAW;GAC7B,iBAAe,GAAW,YAAY,KAAA;GACtC,oBAAoB,EAClB,iFACA,KAAW,YACX,EACD;GACD,WAAW,EAAG,+BAA+B,EAAU;GACvD,GAAI;GACJ,CAAA;EAC2B,CAAA;EAEjC;AACF,EAAS,cAAc;AAEvB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,EAAU;CAAE,GAAI;CAAS,CAAA,CAC3E;AACF,EAAc,cAAc;AAE5B,IAAM,IAAe,EAAM,YAGxB,EAAE,UAAO,cAAW,GAAG,KAAS,MAAQ;CACzC,IAAM,IAAkB,EAAM,WAAW,EAAgB,EACnD,IAAO,EAAM,WAAW,EAAoB,EAC5C,EAAE,SAAM,iBAAc,gBAAa,EAAgB,MAAM;AAE/D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,+LACA,EAAgB,IAChB,wCACA,KAAY,iCACZ,EACD;EACD,GAAI;YATN,CAWG,GACA,KACC,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA;GAC/E,CAAA,CAEJ;;EAER;AACF,EAAa,cAAc;AAE3B,IAAM,IAAoB,EAAM,YAG7B,EAAE,GAAG,KAAS,MACf,kBAAC,OAAD;CAAU;CAAK,MAAK;CAAY,GAAI;WAClC,kBAAC,GAAD;EAAM,MAAM;EAAW,MAAK;EAAO,CAAA;CAC/B,CAAA,CACN;AACF,EAAkB,cAAc"}
|
package/dist/ui/input.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { FieldState } from './lib/field-state';
|
|
3
4
|
import * as React from 'react';
|
|
4
|
-
|
|
5
|
+
/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */
|
|
6
|
+
export type InputState = FieldState;
|
|
5
7
|
declare const inputWrapperVariants: (props?: ({
|
|
6
8
|
size?: "xs" | "sm" | "md" | "lg" | null | undefined;
|
|
7
9
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -39,7 +41,7 @@ declare const inputWrapperVariants: (props?: ({
|
|
|
39
41
|
* <Input readOnly value="https://devalok.com/api/key/abc123" endSection={<IconCopy />} />
|
|
40
42
|
*/
|
|
41
43
|
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputWrapperVariants> {
|
|
42
|
-
state?:
|
|
44
|
+
state?: FieldState;
|
|
43
45
|
startSection?: React.ReactNode;
|
|
44
46
|
endSection?: React.ReactNode;
|
|
45
47
|
startSectionClickable?: boolean;
|
package/dist/ui/input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAGtE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,UAAU,CAAA;AAEnC,QAAA,MAAM,oBAAoB;;8EAsBzB,CAAA;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;qFACiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACnC;qFACiF;IACjF,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACjC,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,QAAA,MAAM,KAAK,qFAqJV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAA"}
|
package/dist/ui/input.js
CHANGED
|
@@ -3,10 +3,11 @@ import { IconProvider as e } from "./icon-context.js";
|
|
|
3
3
|
import { t } from "../_chunks/vendor-utils.js";
|
|
4
4
|
import { cn as n } from "./lib/utils.js";
|
|
5
5
|
import { useFormField as r } from "./form.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import { t as i } from "../_chunks/field-state.js";
|
|
7
|
+
import * as a from "react";
|
|
8
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
9
|
//#region src/ui/input.tsx
|
|
9
|
-
var
|
|
10
|
+
var c = t([
|
|
10
11
|
"relative flex items-center w-full font-sans",
|
|
11
12
|
"bg-surface-raised-hover text-surface-fg",
|
|
12
13
|
"border border-surface-border-strong rounded-control",
|
|
@@ -23,71 +24,71 @@ var s = t([
|
|
|
23
24
|
lg: "h-ds-lg text-ds-md"
|
|
24
25
|
} },
|
|
25
26
|
defaultVariants: { size: "md" }
|
|
26
|
-
}),
|
|
27
|
+
}), l = {
|
|
27
28
|
xs: "w-[26px]",
|
|
28
29
|
sm: "w-[30px]",
|
|
29
30
|
md: "w-[38px]",
|
|
30
31
|
lg: "w-[46px]"
|
|
31
|
-
},
|
|
32
|
+
}, u = {
|
|
32
33
|
xs: "xs",
|
|
33
34
|
sm: "sm",
|
|
34
35
|
md: "md",
|
|
35
36
|
lg: "lg"
|
|
36
|
-
},
|
|
37
|
-
let
|
|
37
|
+
}, d = a.forwardRef(({ className: t, type: a, state: d, size: f = "md", startSection: p, endSection: m, startSectionClickable: h, endSectionClickable: g, startSectionType: _, endSectionType: v, wrapperClassName: y, ...b }, x) => {
|
|
38
|
+
let S = f ?? "md", C = r(), w = i(d, C.state), T = b["aria-describedby"] ?? C.helperTextId, E = b["aria-required"] ?? C.required, D = b.id ?? C.inputId, O = !!p, k = !!m, A = _ ?? (typeof p == "string" ? "label" : "icon"), j = v ?? (typeof m == "string" ? "label" : "icon"), M = {
|
|
38
39
|
xs: "px-ds-02",
|
|
39
40
|
sm: "px-ds-02",
|
|
40
41
|
md: "px-ds-03",
|
|
41
42
|
lg: "px-ds-03"
|
|
42
|
-
},
|
|
43
|
+
}, N = {
|
|
43
44
|
xs: "text-ds-sm",
|
|
44
45
|
sm: "text-ds-sm",
|
|
45
46
|
md: "text-ds-sm",
|
|
46
47
|
lg: "text-ds-md"
|
|
47
48
|
};
|
|
48
|
-
return /* @__PURE__ */
|
|
49
|
-
className: n(
|
|
49
|
+
return /* @__PURE__ */ s("div", {
|
|
50
|
+
className: n(c({ size: S }), w === "error" && "border-error-7 focus-within:ring-error-7", w === "warning" && "border-warning-7 focus-within:ring-warning-7", w === "success" && "border-success-7 focus-within:ring-success-7", y),
|
|
50
51
|
children: [
|
|
51
|
-
|
|
52
|
-
className: n("flex items-center shrink-0 select-none self-stretch", "border-r border-surface-border", "bg-surface-raised text-surface-fg-muted", "rounded-l-[inherit]",
|
|
53
|
-
children:
|
|
52
|
+
O && A === "label" && /* @__PURE__ */ o("span", {
|
|
53
|
+
className: n("flex items-center shrink-0 select-none self-stretch", "border-r border-surface-border", "bg-surface-raised text-surface-fg-muted", "rounded-l-[inherit]", M[S], N[S], !h && "pointer-events-none"),
|
|
54
|
+
children: p
|
|
54
55
|
}),
|
|
55
|
-
|
|
56
|
-
size:
|
|
57
|
-
children: /* @__PURE__ */
|
|
58
|
-
className: n("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted",
|
|
59
|
-
children:
|
|
56
|
+
O && A === "icon" && /* @__PURE__ */ o(e, {
|
|
57
|
+
size: u[S],
|
|
58
|
+
children: /* @__PURE__ */ o("span", {
|
|
59
|
+
className: n("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted", l[S], !h && "pointer-events-none"),
|
|
60
|
+
children: p
|
|
60
61
|
})
|
|
61
62
|
}),
|
|
62
|
-
/* @__PURE__ */
|
|
63
|
-
type:
|
|
63
|
+
/* @__PURE__ */ o("input", {
|
|
64
|
+
type: a,
|
|
64
65
|
className: n("flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans", "placeholder:text-surface-fg-subtle", "disabled:cursor-not-allowed", "read-only:cursor-default", {
|
|
65
66
|
xs: "px-ds-02",
|
|
66
67
|
sm: "px-ds-03",
|
|
67
68
|
md: "px-ds-03",
|
|
68
69
|
lg: "px-ds-04"
|
|
69
|
-
}[
|
|
70
|
-
"aria-invalid":
|
|
71
|
-
"aria-describedby":
|
|
72
|
-
"aria-required":
|
|
73
|
-
ref:
|
|
74
|
-
...
|
|
75
|
-
id:
|
|
70
|
+
}[S], O && A === "icon" && "pl-0", k && j === "icon" && "pr-0", t),
|
|
71
|
+
"aria-invalid": w === "error" || void 0,
|
|
72
|
+
"aria-describedby": T,
|
|
73
|
+
"aria-required": E || void 0,
|
|
74
|
+
ref: x,
|
|
75
|
+
...b,
|
|
76
|
+
id: D
|
|
76
77
|
}),
|
|
77
|
-
|
|
78
|
-
className: n("flex items-center shrink-0 select-none self-stretch", "border-l border-surface-border", "bg-surface-raised text-surface-fg-muted", "rounded-r-[inherit]",
|
|
79
|
-
children:
|
|
78
|
+
k && j === "label" && /* @__PURE__ */ o("span", {
|
|
79
|
+
className: n("flex items-center shrink-0 select-none self-stretch", "border-l border-surface-border", "bg-surface-raised text-surface-fg-muted", "rounded-r-[inherit]", M[S], N[S], !g && "pointer-events-none"),
|
|
80
|
+
children: m
|
|
80
81
|
}),
|
|
81
|
-
|
|
82
|
-
size:
|
|
83
|
-
children: /* @__PURE__ */
|
|
84
|
-
className: n("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted",
|
|
85
|
-
children:
|
|
82
|
+
k && j === "icon" && /* @__PURE__ */ o(e, {
|
|
83
|
+
size: u[S],
|
|
84
|
+
children: /* @__PURE__ */ o("span", {
|
|
85
|
+
className: n("flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted", l[S], !g && "pointer-events-none"),
|
|
86
|
+
children: m
|
|
86
87
|
})
|
|
87
88
|
})
|
|
88
89
|
]
|
|
89
90
|
});
|
|
90
91
|
});
|
|
91
|
-
|
|
92
|
+
d.displayName = "Input";
|
|
92
93
|
//#endregion
|
|
93
|
-
export {
|
|
94
|
+
export { d as Input, c as inputWrapperVariants };
|
package/dist/ui/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { cn } from './lib/utils'\n\nexport type InputState = 'default' | 'error' | 'warning' | 'success'\n\nconst inputWrapperVariants = cva(\n [\n 'relative flex items-center w-full font-sans',\n 'bg-surface-raised-hover text-surface-fg',\n 'border border-surface-border-strong rounded-control',\n 'hover:bg-surface-raised-active',\n 'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n 'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n 'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n 'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n ],\n {\n variants: {\n size: {\n xs: 'h-ds-xs-plus text-ds-sm',\n sm: 'h-ds-sm text-ds-sm',\n md: 'h-ds-md text-ds-md',\n lg: 'h-ds-lg text-ds-md',\n },\n },\n defaultVariants: { size: 'md' },\n },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n xs: 'w-[26px]',\n sm: 'w-[30px]',\n md: 'w-[38px]',\n lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputWrapperVariants> {\n state?: InputState\n startSection?: React.ReactNode\n endSection?: React.ReactNode\n startSectionClickable?: boolean\n endSectionClickable?: boolean\n /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n * `'label'` = tinted background with border separator (default for strings). */\n startSectionType?: 'icon' | 'label'\n /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n * `'label'` = tinted background with border separator (default for strings). */\n endSectionType?: 'icon' | 'label'\n /** Classes for the wrapper div (border, bg, ring). */\n wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n type,\n state: stateProp,\n size: sizeProp = 'md',\n startSection,\n endSection,\n startSectionClickable,\n endSectionClickable,\n startSectionType: startSectionTypeProp,\n endSectionType: endSectionTypeProp,\n wrapperClassName,\n ...props\n },\n ref,\n ) => {\n const size = sizeProp ?? 'md'\n const fieldCtx = useFormField()\n // Merge FormField context — explicit props always win\n const state =\n stateProp ??\n (fieldCtx.state === 'helper'\n ? undefined\n : (fieldCtx.state as InputState | undefined))\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n const inputId = props.id ?? fieldCtx.inputId\n\n const hasStart = !!startSection\n const hasEnd = !!endSection\n\n // Infer section type: string → label, ReactElement → icon\n const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n const labelPaddingMap: Record<string, string> = {\n xs: 'px-ds-02',\n sm: 'px-ds-02',\n md: 'px-ds-03',\n lg: 'px-ds-03',\n }\n\n const labelTextMap: Record<string, string> = {\n xs: 'text-ds-sm',\n sm: 'text-ds-sm',\n md: 'text-ds-sm',\n lg: 'text-ds-md',\n }\n\n const inputPadding: Record<string, string> = {\n xs: 'px-ds-02',\n sm: 'px-ds-03',\n md: 'px-ds-03',\n lg: 'px-ds-04',\n }\n\n return (\n <div\n className={cn(\n inputWrapperVariants({ size }),\n state === 'error' && 'border-error-7 focus-within:ring-error-7',\n state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n state === 'success' && 'border-success-7 focus-within:ring-success-7',\n wrapperClassName,\n )}\n >\n {hasStart && startType === 'label' && (\n <span\n className={cn(\n 'flex items-center shrink-0 select-none self-stretch',\n 'border-r border-surface-border',\n 'bg-surface-raised text-surface-fg-muted',\n 'rounded-l-[inherit]',\n labelPaddingMap[size],\n labelTextMap[size],\n !startSectionClickable && 'pointer-events-none',\n )}\n >\n {startSection}\n </span>\n )}\n\n {hasStart && startType === 'icon' && (\n <IconProvider size={iconSizeMap[size]}>\n <span\n className={cn(\n 'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n sectionWidthMap[size],\n !startSectionClickable && 'pointer-events-none',\n )}\n >\n {startSection}\n </span>\n </IconProvider>\n )}\n\n <input\n type={type}\n className={cn(\n 'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n 'placeholder:text-surface-fg-subtle',\n 'disabled:cursor-not-allowed',\n 'read-only:cursor-default',\n inputPadding[size],\n // Remove left padding when start icon section is present (icon provides visual space)\n hasStart && startType === 'icon' && 'pl-0',\n // Remove right padding when end icon section is present\n hasEnd && endType === 'icon' && 'pr-0',\n className,\n )}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n ref={ref}\n {...props}\n id={inputId}\n />\n\n {hasEnd && endType === 'label' && (\n <span\n className={cn(\n 'flex items-center shrink-0 select-none self-stretch',\n 'border-l border-surface-border',\n 'bg-surface-raised text-surface-fg-muted',\n 'rounded-r-[inherit]',\n labelPaddingMap[size],\n labelTextMap[size],\n !endSectionClickable && 'pointer-events-none',\n )}\n >\n {endSection}\n </span>\n )}\n\n {hasEnd && endType === 'icon' && (\n <IconProvider size={iconSizeMap[size]}>\n <span\n className={cn(\n 'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n sectionWidthMap[size],\n !endSectionClickable && 'pointer-events-none',\n )}\n >\n {endSection}\n </span>\n </IconProvider>\n )}\n </div>\n )\n },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAqDK,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAEzB,IACJ,MACC,EAAS,UAAU,WAChB,KAAA,IACC,EAAS,QACV,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;AASD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,SAAM,CAAC,EAC9B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,EACD;YAPH;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,sBAC3B;cAEA;IACI,CAAA;GAGR,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,sBAC3B;eAEA;KACI,CAAA;IACM,CAAA;GAGjB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BArDqC;KAC3C,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAiDoB,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,EACD;IACD,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;IACJ,CAAA;GAED,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,sBACzB;cAEA;IACI,CAAA;GAGR,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,sBACzB;eAEA;KACI,CAAA;IACM,CAAA;GAEb;;EAGX;AACD,EAAM,cAAc"}
|
|
1
|
+
{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { cn } from './lib/utils'\n\n/** @deprecated Use `FieldState` — the shared control-state type. Kept as an alias. */\nexport type InputState = FieldState\n\nconst inputWrapperVariants = cva(\n [\n 'relative flex items-center w-full font-sans',\n 'bg-surface-raised-hover text-surface-fg',\n 'border border-surface-border-strong rounded-control',\n 'hover:bg-surface-raised-active',\n 'transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n 'focus-within:outline-hidden focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-surface-border',\n 'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-action-disabled',\n 'has-[:read-only]:bg-surface-raised has-[:read-only]:cursor-default',\n ],\n {\n variants: {\n size: {\n xs: 'h-ds-xs-plus text-ds-sm',\n sm: 'h-ds-sm text-ds-sm',\n md: 'h-ds-md text-ds-md',\n lg: 'h-ds-lg text-ds-md',\n },\n },\n defaultVariants: { size: 'md' },\n },\n)\n\nconst sectionWidthMap: Record<string, string> = {\n xs: 'w-[26px]',\n sm: 'w-[30px]',\n md: 'w-[38px]',\n lg: 'w-[46px]',\n}\n\nconst iconSizeMap: Record<string, IconSize> = {\n xs: 'xs',\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n}\n\n/**\n * Props for Input — a single-line text field with container-first architecture,\n * section-based icons with automatic padding, per-size scaling, and validation state coloring.\n *\n * **Sizes:** `xs` (28px) | `sm` (32px) | `md` (40px, default) | `lg` (48px)\n * HTML's native `size` attribute is excluded — use CSS width instead.\n *\n * **Validation states:** `state=\"error\"` colors the border red and sets `aria-invalid`.\n * Use with `<FormField>` to show helper text below the input.\n *\n * **Section-based icons:** `startSection` and `endSection` accept any React node.\n * Icons are auto-sized via `IconProvider`. Sections are `pointer-events-none` by default;\n * use `startSectionClickable`/`endSectionClickable` for interactive sections.\n *\n * **className** targets the `<input>` element (backward compatible).\n * **wrapperClassName** targets the wrapper div for border/bg/ring overrides.\n *\n * @example\n * // Basic email field with placeholder:\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Search input with a leading icon:\n * <Input size=\"md\" startSection={<IconSearch />} placeholder=\"Search projects...\" />\n *\n * @example\n * // Validated error state (pair with FormField for label + helper text):\n * <Input state=\"error\" value={email} onChange={handleChange} />\n *\n * @example\n * // Read-only field (shows a muted background, non-editable):\n * <Input readOnly value=\"https://devalok.com/api/key/abc123\" endSection={<IconCopy />} />\n */\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputWrapperVariants> {\n state?: FieldState\n startSection?: React.ReactNode\n endSection?: React.ReactNode\n startSectionClickable?: boolean\n endSectionClickable?: boolean\n /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n * `'label'` = tinted background with border separator (default for strings). */\n startSectionType?: 'icon' | 'label'\n /** Section display type. `'icon'` = fixed-width centered cell (default for ReactElements).\n * `'label'` = tinted background with border separator (default for strings). */\n endSectionType?: 'icon' | 'label'\n /** Classes for the wrapper div (border, bg, ring). */\n wrapperClassName?: string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n type,\n state: stateProp,\n size: sizeProp = 'md',\n startSection,\n endSection,\n startSectionClickable,\n endSectionClickable,\n startSectionType: startSectionTypeProp,\n endSectionType: endSectionTypeProp,\n wrapperClassName,\n ...props\n },\n ref,\n ) => {\n const size = sizeProp ?? 'md'\n const fieldCtx = useFormField()\n // Merge FormField context — explicit props always win (shared precedence)\n const state = resolveFieldState(stateProp, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n const inputId = props.id ?? fieldCtx.inputId\n\n const hasStart = !!startSection\n const hasEnd = !!endSection\n\n // Infer section type: string → label, ReactElement → icon\n const startType = startSectionTypeProp ?? (typeof startSection === 'string' ? 'label' : 'icon')\n const endType = endSectionTypeProp ?? (typeof endSection === 'string' ? 'label' : 'icon')\n\n const labelPaddingMap: Record<string, string> = {\n xs: 'px-ds-02',\n sm: 'px-ds-02',\n md: 'px-ds-03',\n lg: 'px-ds-03',\n }\n\n const labelTextMap: Record<string, string> = {\n xs: 'text-ds-sm',\n sm: 'text-ds-sm',\n md: 'text-ds-sm',\n lg: 'text-ds-md',\n }\n\n const inputPadding: Record<string, string> = {\n xs: 'px-ds-02',\n sm: 'px-ds-03',\n md: 'px-ds-03',\n lg: 'px-ds-04',\n }\n\n return (\n <div\n className={cn(\n inputWrapperVariants({ size }),\n state === 'error' && 'border-error-7 focus-within:ring-error-7',\n state === 'warning' && 'border-warning-7 focus-within:ring-warning-7',\n state === 'success' && 'border-success-7 focus-within:ring-success-7',\n wrapperClassName,\n )}\n >\n {hasStart && startType === 'label' && (\n <span\n className={cn(\n 'flex items-center shrink-0 select-none self-stretch',\n 'border-r border-surface-border',\n 'bg-surface-raised text-surface-fg-muted',\n 'rounded-l-[inherit]',\n labelPaddingMap[size],\n labelTextMap[size],\n !startSectionClickable && 'pointer-events-none',\n )}\n >\n {startSection}\n </span>\n )}\n\n {hasStart && startType === 'icon' && (\n <IconProvider size={iconSizeMap[size]}>\n <span\n className={cn(\n 'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n sectionWidthMap[size],\n !startSectionClickable && 'pointer-events-none',\n )}\n >\n {startSection}\n </span>\n </IconProvider>\n )}\n\n <input\n type={type}\n className={cn(\n 'flex-1 min-w-0 h-full bg-transparent outline-hidden font-sans',\n 'placeholder:text-surface-fg-subtle',\n 'disabled:cursor-not-allowed',\n 'read-only:cursor-default',\n inputPadding[size],\n // Remove left padding when start icon section is present (icon provides visual space)\n hasStart && startType === 'icon' && 'pl-0',\n // Remove right padding when end icon section is present\n hasEnd && endType === 'icon' && 'pr-0',\n className,\n )}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n ref={ref}\n {...props}\n id={inputId}\n />\n\n {hasEnd && endType === 'label' && (\n <span\n className={cn(\n 'flex items-center shrink-0 select-none self-stretch',\n 'border-l border-surface-border',\n 'bg-surface-raised text-surface-fg-muted',\n 'rounded-r-[inherit]',\n labelPaddingMap[size],\n labelTextMap[size],\n !endSectionClickable && 'pointer-events-none',\n )}\n >\n {endSection}\n </span>\n )}\n\n {hasEnd && endType === 'icon' && (\n <IconProvider size={iconSizeMap[size]}>\n <span\n className={cn(\n 'flex items-center justify-center shrink-0 self-stretch text-surface-fg-muted',\n sectionWidthMap[size],\n !endSectionClickable && 'pointer-events-none',\n )}\n >\n {endSection}\n </span>\n </IconProvider>\n )}\n </div>\n )\n },\n)\nInput.displayName = 'Input'\n\nexport { Input, inputWrapperVariants }\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAuB,EAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CACF,EAEK,IAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAqDK,IAAQ,EAAM,YAEhB,EACE,cACA,SACA,OAAO,GACP,MAAM,IAAW,MACjB,iBACA,eACA,0BACA,wBACA,kBAAkB,GAClB,gBAAgB,GAChB,qBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAO,KAAY,MACnB,IAAW,GAAc,EAEzB,IAAQ,EAAkB,GAAW,EAAS,MAAM,EACpD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAU,EAAM,MAAM,EAAS,SAE/B,IAAW,CAAC,CAAC,GACb,IAAS,CAAC,CAAC,GAGX,IAAY,MAAyB,OAAO,KAAiB,WAAW,UAAU,SAClF,IAAU,MAAuB,OAAO,KAAe,WAAW,UAAU,SAE5E,IAA0C;EAC9C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAuC;EAC3C,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;AASD,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAqB,EAAE,SAAM,CAAC,EAC9B,MAAU,WAAW,4CACrB,MAAU,aAAa,gDACvB,MAAU,aAAa,gDACvB,EACD;YAPH;GASG,KAAY,MAAc,WACzB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAyB,sBAC3B;cAEA;IACI,CAAA;GAGR,KAAY,MAAc,UACzB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAyB,sBAC3B;eAEA;KACI,CAAA;IACM,CAAA;GAGjB,kBAAC,SAAD;IACQ;IACN,WAAW,EACT,iEACA,sCACA,+BACA,4BArDqC;KAC3C,IAAI;KACJ,IAAI;KACJ,IAAI;KACJ,IAAI;KACL,CAiDoB,IAEb,KAAY,MAAc,UAAU,QAEpC,KAAU,MAAY,UAAU,QAChC,EACD;IACD,gBAAc,MAAU,WAAW,KAAA;IACnC,oBAAkB;IAClB,iBAAe,KAAgB,KAAA;IAC1B;IACL,GAAI;IACJ,IAAI;IACJ,CAAA;GAED,KAAU,MAAY,WACrB,kBAAC,QAAD;IACE,WAAW,EACT,uDACA,kCACA,2CACA,uBACA,EAAgB,IAChB,EAAa,IACb,CAAC,KAAuB,sBACzB;cAEA;IACI,CAAA;GAGR,KAAU,MAAY,UACrB,kBAAC,GAAD;IAAc,MAAM,EAAY;cAC9B,kBAAC,QAAD;KACE,WAAW,EACT,gFACA,EAAgB,IAChB,CAAC,KAAuB,sBACzB;eAEA;KACI,CAAA;IACM,CAAA;GAEb;;EAGX;AACD,EAAM,cAAc"}
|
package/dist/ui/label.js
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
/**
|
|
3
|
+
* Shared validation/feedback state for every form control (Input, Textarea,
|
|
4
|
+
* Select, Checkbox, Radio, Switch, Combobox). One prop name, one type, one
|
|
5
|
+
* precedence rule across the whole form family.
|
|
6
|
+
*
|
|
7
|
+
* Precedence: an explicit `state` prop wins over the `FormField` context state.
|
|
8
|
+
* FormField's neutral value is `'helper'` (helper-text styling); a control's
|
|
9
|
+
* neutral is `'default'`/undefined — both resolve to "no validation styling".
|
|
10
|
+
*/
|
|
11
|
+
/** Validation/feedback state shared by all form controls. */
|
|
12
|
+
export type FieldState = 'default' | 'error' | 'warning' | 'success';
|
|
13
|
+
/**
|
|
14
|
+
* Resolve the effective control state from an explicit prop + FormField context.
|
|
15
|
+
* `ctxState` is FormField's state (`'helper' | 'error' | 'warning' | 'success'`),
|
|
16
|
+
* typed loosely to avoid a dependency cycle with the (client) form module.
|
|
17
|
+
*
|
|
18
|
+
* Returns the active non-neutral state, or `undefined` when neutral.
|
|
19
|
+
*/
|
|
20
|
+
export declare function resolveFieldState(explicit: FieldState | undefined, ctxState: string | undefined): Exclude<FieldState, 'default'> | undefined;
|
|
21
|
+
//# sourceMappingURL=field-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field-state.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/field-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,6DAA6D;AAC7D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpE;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,GAAG,SAAS,EAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAC3B,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,SAAS,CAM5C"}
|