@orangecheck/app-design 1.0.0 → 1.1.0

package/dist/primitives.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, ReactElement, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, ReactElement, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 export { S as Statement, a as Status, b as StatusBadge, c as StatusBadgeProps, s as statusWord } from './status-badge-DRwGhB0h.mjs';
@@ -54,7 +54,10 @@ declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLPar
 declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 declare function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 
-declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: 'md' | 'sm';
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
 declare const Label: react.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & react.RefAttributes<HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>>;
 interface FieldProps {
@@ -68,10 +71,17 @@ interface FieldProps {
     action?: ReactNode;
 }
 declare function Field({ label, hint, optional, error, children, className, hideLabel, action }: FieldProps): react.JSX.Element;
-declare const Select: react.FC<SelectPrimitive.SelectProps>;
+interface SelectWiring {
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+declare function Select({ id, 'aria-describedby': describedBy, 'aria-invalid': invalid, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & SelectWiring): react.JSX.Element;
 declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: "md" | "sm";
+} & react.RefAttributes<HTMLButtonElement>>;
 declare const SelectContent: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
@@ -79,6 +89,13 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchPrimitive.Switc
 declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+type Density = 'comfortable' | 'compact';
+declare function DensityProvider({ density, children }: {
+    density: Density;
+    children: ReactNode;
+}): react.FunctionComponentElement<react.ProviderProps<Density>>;
+declare function useDensity(): Density;
+
 declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -200,4 +217,4 @@ declare function QrCode({ value, size, label, className, }: {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionItem, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, type CardProps, CardTitle, Checkbox, type ConfirmOptions, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, type FieldProps, Input, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PromptOptions, QrCode, RadioGroup, RadioGroupItem, ScrollFade, type ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, useTimedOut };
+export { Accordion, AccordionItem, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, type CardProps, CardTitle, Checkbox, type ConfirmOptions, type Density, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, type FieldProps, Input, type InputProps, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PromptOptions, QrCode, RadioGroup, RadioGroupItem, ScrollFade, type ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, useDensity, useTimedOut };

package/dist/primitives.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, ReactElement, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, ReactElement, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 export { S as Statement, a as Status, b as StatusBadge, c as StatusBadgeProps, s as statusWord } from './status-badge-BEOxeY9j.js';
@@ -54,7 +54,10 @@ declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLPar
 declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 declare function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 
-declare const Input: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: 'md' | 'sm';
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
 declare const Label: react.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & react.RefAttributes<HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>>;
 interface FieldProps {
@@ -68,10 +71,17 @@ interface FieldProps {
     action?: ReactNode;
 }
 declare function Field({ label, hint, optional, error, children, className, hideLabel, action }: FieldProps): react.JSX.Element;
-declare const Select: react.FC<SelectPrimitive.SelectProps>;
+interface SelectWiring {
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+declare function Select({ id, 'aria-describedby': describedBy, 'aria-invalid': invalid, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & SelectWiring): react.JSX.Element;
 declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: "md" | "sm";
+} & react.RefAttributes<HTMLButtonElement>>;
 declare const SelectContent: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
@@ -79,6 +89,13 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchPrimitive.Switc
 declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+type Density = 'comfortable' | 'compact';
+declare function DensityProvider({ density, children }: {
+    density: Density;
+    children: ReactNode;
+}): react.FunctionComponentElement<react.ProviderProps<Density>>;
+declare function useDensity(): Density;
+
 declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
@@ -200,4 +217,4 @@ declare function QrCode({ value, size, label, className, }: {
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionItem, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, type CardProps, CardTitle, Checkbox, type ConfirmOptions, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, type FieldProps, Input, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PromptOptions, QrCode, RadioGroup, RadioGroupItem, ScrollFade, type ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, useTimedOut };
+export { Accordion, AccordionItem, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, type CardProps, CardTitle, Checkbox, type ConfirmOptions, type Density, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogHost, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, type FieldProps, Input, type InputProps, Kbd, Label, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PromptOptions, QrCode, RadioGroup, RadioGroupItem, ScrollFade, type ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, confirm, prompt, useDensity, useTimedOut };

package/dist/primitives.js

@@ -351,6 +351,20 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex flex-wrap items-center gap-3", className), ...props });
 }
+function sharedContext(name, initial) {
+  const key = /* @__PURE__ */ Symbol.for(`@orangecheck/app-design/${name}`);
+  const store = globalThis;
+  return store[key] ?? (store[key] = react.createContext(initial));
+}
+
+// src/lib/density.ts
+var DensityContext = sharedContext("density", "comfortable");
+function DensityProvider({ density, children }) {
+  return react.createElement(DensityContext.Provider, { value: density }, children);
+}
+function useDensity() {
+  return react.useContext(DensityContext);
+}
 var fieldBase = [
   "w-full rounded-xl border border-input bg-card text-foreground placeholder:text-oca-subtle",
   "text-base md:text-[0.9375rem] outline-none transition-[border-color,box-shadow]",
@@ -358,8 +372,24 @@ var fieldBase = [
   "disabled:cursor-not-allowed disabled:opacity-55",
   "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-[color-mix(in_oklab,var(--destructive)_14%,transparent)]"
 ];
-var Input = react.forwardRef(function Input2({ className, type = "text", ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type, "data-ui": "input", className: cn(fieldBase, "h-11 px-3.5", className), ...props });
+var FIELD_SIZE = {
+  md: "h-11 px-3.5",
+  sm: "h-9 rounded-[0.625rem] px-3 md:text-[0.875rem]"
+};
+var Input = react.forwardRef(function Input2({ className, type = "text", size, ...props }, ref) {
+  const density = useDensity();
+  const s = size ?? (density === "compact" ? "sm" : "md");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-ui": "input",
+      "data-size": s,
+      className: cn(fieldBase, FIELD_SIZE[s], className),
+      ...props
+    }
+  );
 });
 var Textarea = react.forwardRef(
   function Textarea2({ className, ...props }, ref) {
@@ -416,15 +446,29 @@ function Field({ label, hint, optional, error, children, className, hideLabel, a
     error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, role: "alert", className: "text-[0.8125rem] leading-snug text-destructive", children: error }) : null
   ] });
 }
-var Select = SelectPrimitive__namespace.Root;
+var SelectFieldContext = sharedContext("select-field", null);
+function Select({
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectFieldContext.Provider, { value: { id, "aria-describedby": describedBy, "aria-invalid": invalid }, children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { ...props }) });
+}
 var SelectGroup = SelectPrimitive__namespace.Group;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = react.forwardRef(function SelectTrigger2({ className, children, ...props }, ref) {
+var SelectTrigger = react.forwardRef(function SelectTrigger2({ className, children, size, ...props }, ref) {
+  const density = useDensity();
+  const field = react.useContext(SelectFieldContext);
+  const s = size ?? (density === "compact" ? "sm" : "md");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectPrimitive__namespace.Trigger,
     {
       ref,
-      className: cn(fieldBase, "flex h-11 items-center justify-between gap-2 px-3.5 text-left", className),
+      id: field?.id,
+      "aria-describedby": field?.["aria-describedby"],
+      "aria-invalid": field?.["aria-invalid"],
+      className: cn(fieldBase, FIELD_SIZE[s], "flex items-center justify-between gap-2 text-left", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }),
@@ -1041,6 +1085,7 @@ exports.CardHeader = CardHeader;
 exports.CardNumeral = CardNumeral;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.DensityProvider = DensityProvider;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -1106,6 +1151,7 @@ exports.cn = cn;
 exports.confirm = confirm;
 exports.prompt = prompt;
 exports.statusWord = statusWord;
+exports.useDensity = useDensity;
 exports.useTimedOut = useTimedOut;
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map