@orangecheck/design 0.5.2 → 0.6.0

package/dist/index.mjs

@@ -4,10 +4,13 @@ import * as React2 from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
-import { ChevronDown, Palette, Check, Sun, Moon, Monitor, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, CheckIcon, ChevronUpIcon, Maximize2, Copy } from 'lucide-react';
+import { ChevronDown, Palette, Check, Sun, Moon, Monitor, CheckIcon, CircleIcon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Copy } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -52,6 +55,7 @@ __export(src_exports, {
   BitcoinAddress: () => BitcoinAddress,
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
   ConfirmHost: () => ConfirmHost,
   CopyButton: () => CopyButton,
   DEFAULT_OC_THEME: () => DEFAULT_OC_THEME,
@@ -84,6 +88,8 @@ __export(src_exports, {
   PromptHost: () => PromptHost,
   QrCode: () => QrCode,
   REFERENCE_BTC_USD: () => REFERENCE_BTC_USD,
+  RadioGroup: () => RadioGroup,
+  RadioGroupItem: () => RadioGroupItem,
   SatsAmount: () => SatsAmount,
   Select: () => Select,
   SelectContent: () => SelectContent,
@@ -110,6 +116,7 @@ __export(src_exports, {
   Sparkline: () => Sparkline,
   StatBlock: () => StatBlock,
   StatusPill: () => StatusPill,
+  Switch: () => Switch,
   Textarea: () => Textarea,
   ThemeToggle: () => ThemeToggle,
   ThemeToggleLink: () => ThemeToggleLink,
@@ -605,6 +612,99 @@ function Label({ className, ...props }) {
     }
   );
 }
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input bg-input/30 size-4 shrink-0 rounded-sm border shadow-xs transition-[color,box-shadow,background-color] outline-none",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
+        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current",
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", strokeWidth: 3 })
+        }
+      )
+    }
+  );
+}
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "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",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-primary",
+        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "relative flex items-center justify-center",
+          children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary text-primary absolute size-2" })
+        }
+      )
+    }
+  );
+}
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "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",
+        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "bg-background pointer-events-none block size-4 rounded-full shadow-sm ring-0 transition-transform",
+            "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
+          )
+        }
+      )
+    }
+  );
+}
 var alertVariants = cva(
   "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",
   {
@@ -744,6 +844,9 @@ function Textarea({ className, ...props }) {
       className: cn(
         "placeholder:text-muted-foreground border-input bg-input/30 hover:bg-input/50 dark:bg-input/30 dark:hover:bg-input/50 w-full min-w-0 rounded-md border px-3 py-2 font-mono text-xs leading-relaxed shadow-xs transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // aria-invalid parity with Input — error styling when a consumer
+        // marks the field invalid.
+        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
         className
       ),
       ...props
@@ -1990,6 +2093,6 @@ __reExport(components_exports, ui_star);
 // src/index.ts
 __reExport(src_exports, components_exports);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, ConfirmHost, CopyButton, DEFAULT_OC_THEME, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, 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, accentFor, badgeVariants, buttonVariants, cn, confirm, explorerUrl, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, Checkbox, ConfirmHost, CopyButton, DEFAULT_OC_THEME, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, 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, accentFor, badgeVariants, buttonVariants, cn, confirm, explorerUrl, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map