@olundot/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @olundot/ui
 
+## 0.5.0
+
+### Minor Changes
+
+- Add the shared OLUN theme transition contract and theme helper API.
+
+  - `@olundot/tokens` now exposes a 300ms default theme transition token contract.
+  - `@olundot/ui` now exports `getOlunThemeState`, `setOlunTheme`, and `useOlunTheme` for synchronized light/dark theme controls.
+
+### Patch Changes
+
+- Updated dependencies
+  - @olundot/tokens@0.10.0
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -9,11 +9,31 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+type OlunTheme = "light" | "dark";
+type OlunThemeDuration = "instant" | "fast" | "base" | "slow" | "slower" | "slowest";
+interface OlunThemeState {
+    theme: OlunTheme;
+    resolvedTheme: OlunTheme;
+    storedTheme: OlunTheme | null;
+    source: "attribute" | "stored" | "system" | "default";
+}
+interface SetOlunThemeOptions {
+    duration?: OlunThemeDuration;
+}
+interface UseOlunThemeValue extends OlunThemeState {
+    mounted: boolean;
+    setTheme: (nextTheme: OlunTheme, options?: SetOlunThemeOptions) => void;
+    toggleTheme: (options?: SetOlunThemeOptions) => void;
+}
+declare function getOlunThemeState(): OlunThemeState;
+declare function setOlunTheme(nextTheme: OlunTheme, options?: SetOlunThemeOptions): void;
+declare function useOlunTheme(): UseOlunThemeValue;
+
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "default" | "link" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
+    variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -34,7 +54,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -50,7 +70,7 @@ declare const inputVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
@@ -99,11 +119,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -122,10 +142,10 @@ interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelEl
 declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const alertVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | null | undefined;
+    variant?: "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inlineAlertVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | null | undefined;
+    variant?: "error" | "success" | "info" | "warning" | null | undefined;
     surface?: "filled" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
@@ -155,7 +175,7 @@ declare const textareaVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -210,7 +230,7 @@ declare const selectVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
@@ -834,8 +854,8 @@ declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProp
 declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<Popover$1.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "brand" | "neutral" | "status" | "semantic" | "pill" | "vibrant" | null | undefined;
-    tone?: "accent" | "warning" | "info" | "success" | "neutral" | "danger" | null | undefined;
+    variant?: "status" | "semantic" | "neutral" | "brand" | "pill" | "vibrant" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "info" | "warning" | "neutral" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const badgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -853,7 +873,7 @@ declare const twoTierBadgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const twoTierBadgeLineVariants: (props?: ({
     tier?: "primary" | "secondary" | null | undefined;
-    intent?: "brand" | "muted" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    intent?: "danger" | "success" | "warning" | "neutral" | "brand" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TwoTierBadgeIntent = NonNullable<VariantProps<typeof twoTierBadgeLineVariants>["intent"]>;
 interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof twoTierBadgeVariants> {
@@ -867,7 +887,7 @@ interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varian
 declare const TwoTierBadge: React.ForwardRefExoticComponent<TwoTierBadgeProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const statusBadgeVariants: (props?: ({
-    status?: "error" | "warning" | "info" | "success" | "active" | "pending" | "archived" | null | undefined;
+    status?: "error" | "success" | "info" | "warning" | "active" | "pending" | "archived" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const statusBadgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -897,12 +917,12 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
@@ -1096,7 +1116,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1137,17 +1157,17 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1203,11 +1223,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1232,7 +1252,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1253,16 +1273,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -1349,4 +1369,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, CopyButton, type CopyButtonProps, DataTable, type DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoTierBadge, type TwoTierBadgeIntent, type TwoTierBadgeProps, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, alertVariants, badgeDotVariants, badgeVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, Alert, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, CopyButton, type CopyButtonProps, DataTable, type DataTableBulkAction, type DataTableColumn, type DataTableProps, type DataTableSort, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, Separator, type SetOlunThemeOptions, Sheet, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoTierBadge, type TwoTierBadgeIntent, type TwoTierBadgeProps, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, alertVariants, badgeDotVariants, badgeVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inlineAlertVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, statusBadgeDotVariants, statusBadgeVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, twoTierBadgeLineVariants, twoTierBadgeVariants, useOlunTheme, usePermission };

package/dist/index.js

@@ -14,6 +14,165 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/theme.ts
+import { useCallback, useEffect, useState } from "react";
+var STORAGE_KEY = "olun-theme";
+var LEGACY_STORAGE_KEY = "olun-theme-mode";
+var TRANSITION_ATTR = "olunThemeTransition";
+var TRANSITION_DURATION_PROPERTY = "--olun-theme-transition-duration";
+var durationMsByToken = {
+  instant: 0,
+  fast: 150,
+  base: 200,
+  slow: 300,
+  slower: 400,
+  slowest: 600
+};
+var transitionCleanupTimer;
+var defaultThemeState = {
+  theme: "light",
+  resolvedTheme: "light",
+  storedTheme: null,
+  source: "default"
+};
+function isOlunTheme(value) {
+  return value === "light" || value === "dark";
+}
+function readStoredTheme() {
+  if (typeof window === "undefined") return null;
+  try {
+    const saved = window.localStorage.getItem(STORAGE_KEY);
+    if (isOlunTheme(saved)) return saved;
+    const legacy = window.localStorage.getItem(LEGACY_STORAGE_KEY);
+    return isOlunTheme(legacy) ? legacy : null;
+  } catch {
+    return null;
+  }
+}
+function resolveSystemTheme() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getReducedMotionDurationMs(duration) {
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return durationMsByToken.fast;
+  }
+  return durationMsByToken[duration];
+}
+function getOlunThemeState() {
+  if (typeof document !== "undefined") {
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (isOlunTheme(attr)) {
+      return {
+        theme: attr,
+        resolvedTheme: attr,
+        storedTheme: readStoredTheme(),
+        source: "attribute"
+      };
+    }
+  }
+  const storedTheme = readStoredTheme();
+  if (storedTheme) {
+    return {
+      theme: storedTheme,
+      resolvedTheme: storedTheme,
+      storedTheme,
+      source: "stored"
+    };
+  }
+  if (typeof window !== "undefined") {
+    const systemTheme = resolveSystemTheme();
+    return {
+      theme: systemTheme,
+      resolvedTheme: systemTheme,
+      storedTheme: null,
+      source: "system"
+    };
+  }
+  return defaultThemeState;
+}
+function setOlunTheme(nextTheme, options = {}) {
+  if (typeof document === "undefined") return;
+  const duration = options.duration ?? "slow";
+  const root = document.documentElement;
+  if (transitionCleanupTimer !== void 0) {
+    window.clearTimeout(transitionCleanupTimer);
+    transitionCleanupTimer = void 0;
+  }
+  if (duration !== "instant") {
+    root.dataset[TRANSITION_ATTR] = "true";
+    root.style.setProperty(
+      TRANSITION_DURATION_PROPERTY,
+      `var(--duration-${duration})`
+    );
+    void root.offsetWidth;
+  }
+  root.setAttribute("data-theme", nextTheme);
+  root.setAttribute("data-theme-mode", nextTheme);
+  try {
+    window.localStorage.setItem(STORAGE_KEY, nextTheme);
+    window.localStorage.removeItem(LEGACY_STORAGE_KEY);
+  } catch {
+  }
+  if (duration !== "instant") {
+    const cleanupDelay = getReducedMotionDurationMs(duration) + 80;
+    transitionCleanupTimer = window.setTimeout(() => {
+      delete root.dataset[TRANSITION_ATTR];
+      root.style.removeProperty(TRANSITION_DURATION_PROPERTY);
+      transitionCleanupTimer = void 0;
+    }, cleanupDelay);
+  }
+}
+function useOlunTheme() {
+  const [state, setState] = useState(defaultThemeState);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    const sync = () => setState(getOlunThemeState());
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    const onStorage = (event) => {
+      if (event.key === STORAGE_KEY || event.key === LEGACY_STORAGE_KEY) sync();
+    };
+    window.addEventListener("storage", onStorage);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("storage", onStorage);
+    };
+  }, []);
+  const setTheme = useCallback(
+    (nextTheme, options) => {
+      setState((current) => ({
+        theme: nextTheme,
+        resolvedTheme: nextTheme,
+        storedTheme: nextTheme,
+        source: "attribute"
+      }));
+      setOlunTheme(nextTheme, options);
+    },
+    []
+  );
+  const toggleTheme = useCallback(
+    (options) => {
+      const nextTheme = state.resolvedTheme === "dark" ? "light" : "dark";
+      setTheme(nextTheme, options);
+    },
+    [setTheme, state.resolvedTheme]
+  );
+  return {
+    ...state,
+    mounted,
+    setTheme,
+    toggleTheme
+  };
+}
+
 // src/components/ui/button.tsx
 import * as React from "react";
 import { cva } from "class-variance-authority";
@@ -7798,46 +7957,15 @@ function OlunLogo({
 }
 
 // src/components/branding/theme-toggle.tsx
-import { useEffect as useEffect4, useState as useState13 } from "react";
 import { Sun, Moon } from "lucide-react";
 import { jsx as jsx52 } from "react/jsx-runtime";
 function ThemeToggle({ className }) {
-  const [theme, setTheme] = useState13("light");
-  useEffect4(() => {
-    const resolve = () => {
-      const attr = document.documentElement.getAttribute("data-theme");
-      if (attr === "light" || attr === "dark") return attr;
-      const stored = localStorage.getItem("olun-theme");
-      if (stored === "light" || stored === "dark") return stored;
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    };
-    setTheme(resolve());
-    const sync = () => setTheme(resolve());
-    const observer = new MutationObserver(sync);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-    const onStorage = (e) => {
-      if (e.key === "olun-theme") sync();
-    };
-    window.addEventListener("storage", onStorage);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("storage", onStorage);
-    };
-  }, []);
-  function toggle() {
-    const next = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    document.documentElement.setAttribute("data-theme", next);
-    localStorage.setItem("olun-theme", next);
-  }
-  const Icon = theme === "dark" ? Moon : Sun;
+  const { resolvedTheme, toggleTheme } = useOlunTheme();
+  const Icon = resolvedTheme === "dark" ? Moon : Sun;
   return /* @__PURE__ */ jsx52(
     "button",
     {
-      onClick: toggle,
+      onClick: () => toggleTheme(),
       className: cn(
         "inline-flex size-[36px] items-center justify-center rounded-sm",
         "text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
@@ -7845,54 +7973,21 @@ function ThemeToggle({ className }) {
         className
       ),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
-      title: theme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
+      title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
       children: /* @__PURE__ */ jsx52(Icon, { className: "size-[18px]", strokeWidth: 1.75 })
     }
   );
 }
 
 // src/components/branding/theme-fab.tsx
-import { useEffect as useEffect5, useState as useState14 } from "react";
 import { Sun as Sun2, Moon as Moon2 } from "lucide-react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 function ThemeFab({ variant = "square" } = {}) {
-  const [theme, setTheme] = useState14("light");
-  const [mounted, setMounted] = useState14(false);
-  useEffect5(() => {
-    setMounted(true);
-    const resolve = () => {
-      const attr = document.documentElement.getAttribute("data-theme");
-      if (attr === "light" || attr === "dark") return attr;
-      const stored = localStorage.getItem("olun-theme");
-      if (stored === "light" || stored === "dark") return stored;
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    };
-    setTheme(resolve());
-    const sync = () => setTheme(resolve());
-    const observer = new MutationObserver(sync);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"]
-    });
-    const onStorage = (e) => {
-      if (e.key === "olun-theme") sync();
-    };
-    window.addEventListener("storage", onStorage);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("storage", onStorage);
-    };
-  }, []);
-  function toggle() {
-    const next = theme === "dark" ? "light" : "dark";
-    setTheme(next);
-    document.documentElement.setAttribute("data-theme", next);
-    localStorage.setItem("olun-theme", next);
-  }
+  const { mounted, resolvedTheme, toggleTheme } = useOlunTheme();
   if (!mounted) {
     return null;
   }
-  const Icon = theme === "dark" ? Moon2 : Sun2;
+  const Icon = resolvedTheme === "dark" ? Moon2 : Sun2;
   const isCircle = variant === "circle";
   const baseStyle = {
     position: "fixed",
@@ -7929,10 +8024,10 @@ function ThemeFab({ variant = "square" } = {}) {
   return /* @__PURE__ */ jsx53(
     "button",
     {
-      onClick: toggle,
+      onClick: () => toggleTheme(),
       "aria-label": "\uD14C\uB9C8 \uC804\uD658",
-      "aria-pressed": theme === "light",
-      title: theme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
+      "aria-pressed": resolvedTheme === "light",
+      title: resolvedTheme === "dark" ? "\uB77C\uC774\uD2B8 \uBAA8\uB4DC\uB85C" : "\uB2E4\uD06C \uBAA8\uB4DC\uB85C",
       className: "transition-colors motion-reduce:transition-none",
       style: { ...baseStyle, ...isCircle ? circleStyle : squareStyle },
       onMouseEnter: (e) => {
@@ -8160,6 +8255,7 @@ export {
   formFieldLabelClassName,
   formFieldRequiredClassName,
   formFieldVariants,
+  getOlunThemeState,
   getToastDuration,
   iconButtonBadgeVariants,
   iconButtonVariants,
@@ -8183,6 +8279,7 @@ export {
   searchFieldVariants,
   selectMessageVariants,
   selectVariants,
+  setOlunTheme,
   skeletonVariants,
   spinnerVariants,
   statusBadgeDotVariants,
@@ -8198,5 +8295,6 @@ export {
   toastViewportVariants,
   twoTierBadgeLineVariants,
   twoTierBadgeVariants,
+  useOlunTheme,
   usePermission
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -14,7 +14,7 @@
   "homepage": "https://olun-design-system.vercel.app",
   "repository": {
     "type": "git",
-    "url": "https://github.com/armedical-dev/olun-design-system",
+    "url": "https://github.com/olundot/olun-design-system",
     "directory": "packages/ui"
   },
   "type": "module",
@@ -44,7 +44,7 @@
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.9.0"
+    "@olundot/tokens": "^0.10.0"
   },
   "peerDependencies": {
     "react": ">=18",