@brightweblabs/ui 1.0.2 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -29,6 +29,7 @@
     "./calendar": "./src/components/calendar.tsx",
     "./card": "./src/components/card.tsx",
     "./chart": "./src/components/chart.tsx",
+    "./checkbox": "./src/components/checkbox.tsx",
     "./dropdown-menu": "./src/components/dropdown-menu.tsx",
     "./empty-state": "./src/components/empty-state.tsx",
     "./field": "./src/components/field.tsx",
@@ -58,30 +59,32 @@
     "./tooltip": "./src/components/tooltip.tsx"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-alert-dialog": "^1.1.21",
+    "@radix-ui/react-avatar": "^1.2.4",
+    "@radix-ui/react-dialog": "^1.1.21",
+    "@radix-ui/react-dropdown-menu": "^2.1.22",
+    "@radix-ui/react-label": "^2.1.13",
+    "@radix-ui/react-popover": "^1.1.21",
+    "@radix-ui/react-separator": "^1.1.13",
+    "@radix-ui/react-slot": "^1.3.1",
+    "@radix-ui/react-tooltip": "^1.2.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.13.2",
+    "react-day-picker": "^9.14.0",
     "react-international-phone": "^4.8.0",
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "@brightweblabs/theme": "0.3.0"
+    "tailwind-merge": "^3.6.0",
+    "@brightweblabs/theme": "0.4.0"
   },
   "peerDependencies": {
     "lucide-react": "^1.8.0",
     "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   }
 }

package/src/components/action.tsx

@@ -1,9 +1,10 @@
 import type { ButtonHTMLAttributes } from "react";
 
+import { buttonVariants } from "./button-variants";
 import { cn } from "../lib/utils";
 
 export const actionClassName =
-  "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full border border-[color:var(--brand-accent)] bg-[color:var(--brand-accent)] px-3.5 py-1.5 text-ui-meta font-semibold text-[color:var(--accent-foreground)] transition-colors hover:bg-[color:var(--brand-accent-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5";
+  buttonVariants({ variant: "brand", size: "sm", className: "gap-1.5 rounded-full px-3.5 text-ui-meta [&_svg]:size-3.5" });
 
 export type ActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 

package/src/components/badge.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";

package/src/components/breadcrumb.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import * as React from "react"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
-import { Slot } from "radix-ui"
+import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "../lib/utils"
 
@@ -38,7 +40,7 @@ function BreadcrumbLink({
 }: React.ComponentProps<"a"> & {
   asChild?: boolean
 }) {
-  const Comp = asChild ? Slot.Root : "a"
+  const Comp = asChild ? Slot : "a"
 
   return (
     <Comp

package/src/components/button-variants.ts

@@ -1,25 +1,25 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-control)] text-ui-body !font-semibold transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-control)] text-ui-body !font-semibold transition-[color,background-color,border-color,box-shadow,transform,filter,text-decoration-color] motion-reduce:transition-none outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-current focus-visible:ring-[3px] focus-visible:ring-current aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         accent:
-          "relative isolate h-auto overflow-hidden !rounded-none px-0 py-0 font-display !font-bold text-[length:var(--text-ui-body)] leading-[1.6] text-foreground [padding:var(--space-button-y)_var(--space-button-x)] hover:text-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-[color:var(--brand-accent)] focus-visible:ring-offset-2",
+          "relative isolate h-auto overflow-hidden !rounded-none px-0 py-0 font-display !font-bold text-[length:var(--text-ui-body)] leading-[var(--type-leading-160)] text-foreground [padding:var(--space-button-y)_var(--space-button-x)] hover:text-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2",
         accentLink:
-          "h-auto min-h-0 gap-[var(--space-sm)] !rounded-none px-0 py-0 font-display !font-bold text-[length:var(--text-ui-subhead)] leading-[1.66] text-[color:var(--brand-accent)] no-underline hover:opacity-70 hover:no-underline",
+          "h-auto min-h-0 gap-[var(--space-sm)] !rounded-none px-0 py-0 font-display !font-bold text-[length:var(--text-ui-subhead)] leading-[var(--type-leading-166)] text-[color:var(--foreground-accent-link)] no-underline hover:underline",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "bg-destructive text-destructive-foreground hover:brightness-[1.05]",
         brand:
-          "bg-[color:var(--brand-accent)] text-[color:var(--accent-foreground)] !font-extrabold shadow-[var(--shadow-accent-control)] hover:brightness-[1.05]",
+          "bg-[color:var(--surface-button-brand)] text-[color:var(--accent-foreground)] !font-extrabold shadow-[var(--shadow-accent-control)] hover:brightness-[1.05]",
         soft:
           "border border-[color:var(--border)] bg-[color:var(--surface-button-soft)] text-foreground hover:border-[color:var(--border-button-soft-hover)] hover:bg-[color:var(--surface-button-soft-hover)]",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-[color:var(--surface-button-soft-hover)] hover:text-foreground dark:bg-input/30 dark:hover:bg-[color:var(--surface-button-soft-hover)]",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        ghost: "hover:bg-[color:var(--surface-button-soft-hover)] hover:text-foreground",
         link: "text-foreground underline-offset-4 transition-colors hover:text-primary hover:underline",
       },
       size: {

package/src/components/checkbox.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+type CheckboxProps = Omit<React.ComponentProps<"input">, "type">;
+
+function Checkbox(props: CheckboxProps) {
+  return <input type="checkbox" {...props} />;
+}
+
+export { Checkbox };
+export type { CheckboxProps };

package/src/components/empty-state.tsx

@@ -17,8 +17,8 @@ export function EmptyState({ icon: Icon, title, hint, action, className, ...prop
         <Icon className="size-5 text-muted-foreground" aria-hidden="true" />
       </div>
       <div>
-        <p className="text-ui-body font-semibold">{title}</p>
-        {hint ? <p className="mt-1 text-ui-meta">{hint}</p> : null}
+        <p className="text-ui-body font-semibold text-foreground">{title}</p>
+        {hint ? <p className="mt-1 text-ui-meta text-muted-foreground">{hint}</p> : null}
       </div>
       {action ? <div className="mt-1">{action}</div> : null}
     </div>

package/src/components/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-foreground/30 selection:bg-primary selection:text-primary-foreground h-11 w-full min-w-0 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-input file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-foreground-muted-accessible selection:bg-primary selection:text-primary-foreground h-11 w-full min-w-0 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-input file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus:border-primary focus:ring-primary/40 focus:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,

package/src/components/password-input.tsx

@@ -8,10 +8,19 @@ import { Input } from "./input";
 
 interface PasswordInputProps extends Omit<React.ComponentProps<"input">, "type"> {
   showToggle?: boolean;
+  showPasswordLabel?: string;
+  hidePasswordLabel?: string;
 }
 
 const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ className, disabled, showToggle = true, ...props }, ref) => {
+  ({
+    className,
+    disabled,
+    showToggle = true,
+    showPasswordLabel = "Show password",
+    hidePasswordLabel = "Hide password",
+    ...props
+  }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
     return (
       <div className="relative w-full">
@@ -22,7 +31,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
             onClick={() => setShowPassword((current) => !current)}
             className="absolute right-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-[var(--radius)] text-foreground/40 transition-colors hover:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:pointer-events-none disabled:opacity-50"
             disabled={disabled}
-            aria-label={showPassword ? "Hide password" : "Show password"}
+            aria-label={showPassword ? hidePasswordLabel : showPasswordLabel}
           >
             {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
           </button>

package/src/components/phone-input.tsx

@@ -1,17 +1,15 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState, type InputHTMLAttributes, type KeyboardEvent } from "react";
 import { defaultCountries, parseCountry, usePhoneInput } from "react-international-phone";
 import type { CountryIso2 } from "react-international-phone";
 
 import { cn } from "../lib/utils";
 
-interface PhoneInputProps {
+interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "defaultValue" | "onChange" | "type" | "value"> {
   value: string;
   onChange: (e164: string) => void;
-  onBlur?: () => void;
   defaultCountry?: CountryIso2;
-  disabled?: boolean;
   className?: string;
 }
 
@@ -25,12 +23,15 @@ function flagEmoji(iso2: string) {
   return iso2.toUpperCase().split("").map((character) => String.fromCodePoint(0x1f1e6 - 0x41 + character.charCodeAt(0))).join("");
 }
 
-export function PhoneInput({ value, onChange, onBlur, defaultCountry = "pt", disabled = false, className }: PhoneInputProps) {
+export function PhoneInput({ value, onChange, defaultCountry = "pt", disabled = false, className, placeholder = "912 345 678", ...inputProps }: PhoneInputProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const countryListId = useId();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
 
   const { inputValue, handlePhoneValueChange, country, setCountry } = usePhoneInput({
     defaultCountry,
@@ -52,19 +53,76 @@ export function PhoneInput({ value, onChange, onBlur, defaultCountry = "pt", dis
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, [open]);
 
+  useEffect(() => {
+    if (open) optionRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, open]);
+
   const filteredCountries = search
     ? orderedCountries.filter((candidate) => candidate.name.toLowerCase().includes(search.toLowerCase()) || `+${candidate.dialCode}`.includes(search))
     : orderedCountries;
 
+  const closePicker = (restoreFocus = false) => {
+    setOpen(false);
+    setSearch("");
+    if (restoreFocus) triggerRef.current?.focus();
+  };
+
+  const openPicker = (direction: "first" | "last" | "selected" = "selected") => {
+    const selectedIndex = orderedCountries.findIndex((candidate) => candidate.iso2 === country.iso2);
+    setSearch("");
+    setActiveIndex(direction === "first" ? 0 : direction === "last" ? orderedCountries.length - 1 : Math.max(0, selectedIndex));
+    setOpen(true);
+  };
+
+  const selectCountry = (index: number) => {
+    const candidate = filteredCountries[index];
+    if (!candidate) return;
+    setCountry(candidate.iso2);
+    setOpen(false);
+    setSearch("");
+    inputRef.current?.focus();
+  };
+
+  const handlePickerKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closePicker(true);
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex((current) => filteredCountries.length === 0
+        ? 0
+        : (current + direction + filteredCountries.length) % filteredCountries.length);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      selectCountry(activeIndex);
+    }
+  };
+
   return (
     <div className={cn("relative flex items-center", className)}>
       <button
         ref={triggerRef}
         type="button"
         disabled={disabled}
-        onClick={() => setOpen((current) => !current)}
+        onClick={() => open ? closePicker() : openPicker()}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            openPicker(event.key === "ArrowDown" ? "first" : "last");
+          } else if (event.key === "Escape" && open) {
+            event.preventDefault();
+            closePicker(true);
+          }
+        }}
         className="flex h-7 items-center gap-1 border-0 bg-transparent pr-1.5 text-sm disabled:pointer-events-none disabled:opacity-100"
+        aria-controls={countryListId}
         aria-expanded={open}
+        aria-haspopup="listbox"
         aria-label="Choose country code"
       >
         <span className="text-base leading-none">{flagEmoji(country.iso2)}</span>
@@ -76,37 +134,54 @@ export function PhoneInput({ value, onChange, onBlur, defaultCountry = "pt", dis
       {open ? (
         <div ref={dropdownRef} className="absolute left-0 top-full z-50 mt-1.5 w-56 rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-popover text-popover-foreground shadow-[var(--shadow-phone-dropdown)]">
           <div className="border-b border-[color:var(--hairline)] px-2.5 py-2">
-            <input autoFocus value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search…" className="w-full border-0 bg-transparent text-ui-meta text-foreground outline-none placeholder:text-foreground/40" />
+            <input
+              autoFocus
+              role="combobox"
+              aria-autocomplete="list"
+              aria-controls={countryListId}
+              aria-expanded="true"
+              aria-label="Search countries"
+              aria-activedescendant={filteredCountries[activeIndex] ? `${countryListId}-${filteredCountries[activeIndex].iso2}` : undefined}
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value);
+                setActiveIndex(0);
+              }}
+              onKeyDown={handlePickerKeyDown}
+              placeholder="Search…"
+              className="w-full border-0 bg-transparent text-ui-meta text-foreground outline-none placeholder:text-foreground-muted-accessible"
+            />
           </div>
-          <div className="max-h-48 overflow-y-auto rounded-b-[var(--radius-card)] p-1">
-            {filteredCountries.map((candidate) => (
+          <div id={countryListId} role="listbox" aria-label="Country calling codes" className="max-h-48 overflow-y-auto rounded-b-[var(--radius-card)] p-1">
+            {filteredCountries.map((candidate, index) => (
               <button
                 key={candidate.iso2}
+                id={`${countryListId}-${candidate.iso2}`}
+                ref={(node) => { optionRefs.current[index] = node; }}
                 type="button"
+                role="option"
+                aria-selected={country.iso2 === candidate.iso2}
+                tabIndex={-1}
                 onMouseDown={(event) => event.preventDefault()}
-                onClick={() => {
-                  setCountry(candidate.iso2);
-                  setOpen(false);
-                  setSearch("");
-                  inputRef.current?.focus();
-                }}
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => selectCountry(index)}
                 className={cn(
                   "flex w-full items-center gap-2 rounded-[var(--radius)] px-2 py-1 text-left transition-colors hover:bg-[color:var(--elevate-2)]",
-                  country.iso2 === candidate.iso2 && "bg-[color:var(--elevate-3)] text-[color:var(--brand-accent)]",
+                  (country.iso2 === candidate.iso2 || activeIndex === index) && "bg-[color:var(--elevate-3)] text-[color:var(--brand-accent)]",
                 )}
               >
                 <span className="text-sm leading-none">{flagEmoji(candidate.iso2)}</span>
                 <span className="flex-1 truncate text-ui-label normal-case tracking-normal text-foreground">{candidate.name}</span>
-                <span className="shrink-0 text-ui-micro text-foreground/40">+{candidate.dialCode}</span>
+                <span className="shrink-0 text-ui-micro text-foreground-muted-accessible">+{candidate.dialCode}</span>
               </button>
             ))}
-            {filteredCountries.length === 0 ? <p className="px-2 py-2 text-ui-meta text-foreground/45">No results</p> : null}
+            {filteredCountries.length === 0 ? <p className="px-2 py-2 text-ui-meta text-foreground-muted-accessible">No results</p> : null}
           </div>
         </div>
       ) : null}
 
       <span className="h-4 w-px shrink-0 bg-foreground/15" />
-      <input ref={inputRef} value={inputValue} onChange={handlePhoneValueChange} onBlur={onBlur} disabled={disabled} placeholder="912 345 678" type="tel" className="h-7 flex-1 border-0 bg-transparent pl-2 text-sm text-foreground outline-none placeholder:text-foreground/35 disabled:pointer-events-none disabled:opacity-100" />
+      <input {...inputProps} ref={inputRef} value={inputValue} onChange={handlePhoneValueChange} disabled={disabled} placeholder={placeholder} type="tel" className="h-7 flex-1 border-0 bg-transparent pl-2 text-sm text-foreground outline-none placeholder:text-foreground-muted-accessible disabled:pointer-events-none disabled:opacity-100" />
     </div>
   );
 }

package/src/components/sheet.tsx

@@ -65,7 +65,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:var(--surface-overlay)]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:var(--surface-overlay)] motion-reduce:animate-none motion-reduce:transition-none",
         className
       )}
       {...props}
@@ -89,7 +89,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 motion-reduce:animate-none motion-reduce:transform-none motion-reduce:transition-none",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[var(--sheet-width)]",
           side === "left" &&

package/src/components/stat-tile.tsx

@@ -9,7 +9,7 @@ export type StatTileProps = HTMLAttributes<HTMLDivElement> & {
 export function StatTile({ label, children, className, ...props }: StatTileProps) {
   return (
     <div className={cn("stat-cell", className)} {...props}>
-      <p className="text-ui-label">{label}</p>
+      <p className="text-ui-label text-muted-foreground">{label}</p>
       <div className="mt-3">{children}</div>
     </div>
   );

package/src/components/status-pill.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Slot } from "@radix-ui/react-slot";
 import { tintPill } from "@brightweblabs/theme/tint";
 import type { ComponentProps, CSSProperties, ReactNode } from "react";

package/src/index.ts

@@ -29,6 +29,8 @@ export * from "./components/card";
 export * from "./components/chart";
 export * from "./components/breadcrumb";
 export * from "./components/calendar";
+export { Checkbox } from "./components/checkbox";
+export type { CheckboxProps } from "./components/checkbox";
 export { Label } from "./components/label";
 export * from "./components/pagination";
 export * from "./components/popover";