@orangecheck/design 0.5.3 → 0.6.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.
@@ -4,7 +4,10 @@ import { clsx } from 'clsx';
4
4
  import { twMerge } from 'tailwind-merge';
5
5
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
6
6
  import * as LabelPrimitive from '@radix-ui/react-label';
7
- import { ChevronDown, Sun, Moon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, CheckIcon, ChevronUpIcon, Maximize2, Check, Copy } from 'lucide-react';
7
+ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
8
+ import { ChevronDown, CheckIcon, CircleIcon, Sun, Moon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Check, Copy } from 'lucide-react';
9
+ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
10
+ import * as SwitchPrimitive from '@radix-ui/react-switch';
8
11
  import { useTheme } from 'next-themes';
9
12
  import * as React2 from 'react';
10
13
  import { useState, useEffect, useRef, useCallback } from 'react';
@@ -118,6 +121,99 @@ function Label({ className, ...props }) {
118
121
  }
119
122
  );
120
123
  }
124
+ function Checkbox({ className, ...props }) {
125
+ return /* @__PURE__ */ jsx(
126
+ CheckboxPrimitive.Root,
127
+ {
128
+ "data-slot": "checkbox",
129
+ className: cn(
130
+ "peer border-input bg-input/30 size-4 shrink-0 rounded-sm border shadow-xs transition-[color,box-shadow,background-color] outline-none",
131
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
132
+ "disabled:cursor-not-allowed disabled:opacity-50",
133
+ "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
134
+ "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
135
+ className
136
+ ),
137
+ ...props,
138
+ children: /* @__PURE__ */ jsx(
139
+ CheckboxPrimitive.Indicator,
140
+ {
141
+ "data-slot": "checkbox-indicator",
142
+ className: "flex items-center justify-center text-current",
143
+ children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", strokeWidth: 3 })
144
+ }
145
+ )
146
+ }
147
+ );
148
+ }
149
+ function RadioGroup({
150
+ className,
151
+ ...props
152
+ }) {
153
+ return /* @__PURE__ */ jsx(
154
+ RadioGroupPrimitive.Root,
155
+ {
156
+ "data-slot": "radio-group",
157
+ className: cn("grid gap-2", className),
158
+ ...props
159
+ }
160
+ );
161
+ }
162
+ function RadioGroupItem({
163
+ className,
164
+ ...props
165
+ }) {
166
+ return /* @__PURE__ */ jsx(
167
+ RadioGroupPrimitive.Item,
168
+ {
169
+ "data-slot": "radio-group-item",
170
+ className: cn(
171
+ "border-input bg-input/30 text-primary aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow,background-color] outline-none",
172
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
173
+ "disabled:cursor-not-allowed disabled:opacity-50",
174
+ "data-[state=checked]:border-primary",
175
+ "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
176
+ className
177
+ ),
178
+ ...props,
179
+ children: /* @__PURE__ */ jsx(
180
+ RadioGroupPrimitive.Indicator,
181
+ {
182
+ "data-slot": "radio-group-indicator",
183
+ className: "relative flex items-center justify-center",
184
+ children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary text-primary absolute size-2" })
185
+ }
186
+ )
187
+ }
188
+ );
189
+ }
190
+ function Switch({ className, ...props }) {
191
+ return /* @__PURE__ */ jsx(
192
+ SwitchPrimitive.Root,
193
+ {
194
+ "data-slot": "switch",
195
+ className: cn(
196
+ "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-[color,box-shadow,background-color] outline-none",
197
+ "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
198
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
199
+ "disabled:cursor-not-allowed disabled:opacity-50",
200
+ "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35",
201
+ className
202
+ ),
203
+ ...props,
204
+ children: /* @__PURE__ */ jsx(
205
+ SwitchPrimitive.Thumb,
206
+ {
207
+ "data-slot": "switch-thumb",
208
+ className: cn(
209
+ "bg-background pointer-events-none block size-4 rounded-full shadow-sm ring-0 transition-transform",
210
+ "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
211
+ )
212
+ }
213
+ )
214
+ }
215
+ );
216
+ }
121
217
  var alertVariants = cva(
122
218
  "relative grid w-full grid-cols-[0_1fr] items-start gap-x-0 gap-y-0.5 rounded-md border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
123
219
  {
@@ -1466,6 +1562,6 @@ function QrCode({ value, size = 200, label, className }) {
1466
1562
  );
1467
1563
  }
1468
1564
 
1469
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, ConfirmHost, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, badgeVariants, buttonVariants, confirm, prompt };
1565
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, Checkbox, ConfirmHost, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, RadioGroup, RadioGroupItem, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Switch, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, badgeVariants, buttonVariants, confirm, prompt };
1470
1566
  //# sourceMappingURL=primitives.mjs.map
1471
1567
  //# sourceMappingURL=primitives.mjs.map