@olundot/ui 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @olundot/ui
 
+## 0.8.1
+
+### Patch Changes
+
+- 83aa187: Fix floating overlay edges to use `--border` for visible elevated borders, and align Sheet/SheetDrawer mobile behavior to the OLUN 900px breakpoint so bottom sheets stay full-width below 900px.
+
+## 0.8.0
+
+### Minor Changes
+
+- f49ba62: SheetDrawer: add `caption` slot; fix DropdownMenu/Select z-index so floating menus layer above the sheet/drawer (`--z-popover`).
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -32,8 +32,8 @@ declare function useOlunTheme(): UseOlunThemeValue;
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "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']>;
@@ -54,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;
@@ -70,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"]>;
@@ -119,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;
@@ -142,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']>;
@@ -175,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. */
@@ -230,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"]>;
@@ -793,6 +793,11 @@ declare function SheetDescription({ className, ...props }: React.ComponentProps<
 interface SheetDrawerProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /**
+     * Optional eyebrow content rendered ABOVE the title — e.g. a breadcrumb path or status badges.
+     * Distinct from `description`, which renders below the title.
+     */
+    caption?: React.ReactNode;
     title: string;
     description?: string;
     children: React.ReactNode;
@@ -807,7 +812,7 @@ interface SheetDrawerProps {
     motion?: SheetMotionConfig | false;
     closeLabel?: string;
 }
-declare function SheetDrawer({ open, onOpenChange, title, description, children, expandHref, onExpand, expandLabel, expanded, onExpandedChange, collapseLabel, footer, width, motion, closeLabel, }: SheetDrawerProps): react_jsx_runtime.JSX.Element;
+declare function SheetDrawer({ open, onOpenChange, caption, title, description, children, expandHref, onExpand, expandLabel, expanded, onExpandedChange, collapseLabel, footer, width, motion, closeLabel, }: SheetDrawerProps): react_jsx_runtime.JSX.Element;
 
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 interface TooltipProps extends React.ComponentProps<typeof Tooltip$1.Root> {
@@ -854,8 +859,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;
@@ -873,7 +878,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> {
@@ -887,7 +892,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;
@@ -917,12 +922,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"]>;
@@ -1116,7 +1121,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']>;
@@ -1157,17 +1162,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> {
@@ -1223,11 +1228,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"];
@@ -1252,7 +1257,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;
@@ -1273,16 +1278,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"]>;

package/dist/index.js

@@ -1497,13 +1497,13 @@ var Select = React7.forwardRef(
         "data-slot": "select-content",
         position: "popper",
         sideOffset: 4,
-        className: "z-50 max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-foreground shadow-md",
+        className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-raised)] text-foreground shadow-md",
         children: [
           /* @__PURE__ */ jsx7(
             SelectPrimitive.ScrollUpButton,
             {
               "data-slot": "select-scroll-up",
-              className: "flex items-center justify-center border-b border-[var(--border-subtle)] bg-[var(--bg-raised)] py-[var(--space-0-5)] text-text-tertiary",
+              className: "flex items-center justify-center border-b border-[var(--border)] bg-[var(--bg-raised)] py-[var(--space-0-5)] text-text-tertiary",
               children: /* @__PURE__ */ jsx7(ChevronUp, { "aria-hidden": "true", className: "size-[16px]" })
             }
           ),
@@ -1527,7 +1527,7 @@ var Select = React7.forwardRef(
             SelectPrimitive.ScrollDownButton,
             {
               "data-slot": "select-scroll-down",
-              className: "flex items-center justify-center border-t border-[var(--border-subtle)] bg-[var(--bg-raised)] py-[var(--space-0-5)] text-text-tertiary",
+              className: "flex items-center justify-center border-t border-[var(--border)] bg-[var(--bg-raised)] py-[var(--space-0-5)] text-text-tertiary",
               children: /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-[16px]" })
             }
           )
@@ -4714,9 +4714,9 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
+        "z-[var(--z-popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
         "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
-        "rounded-sm border border-subtle bg-canvas p-[var(--space-0-5)] text-text-primary shadow-elevation-2",
+        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-0-5)] text-text-primary shadow-elevation-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -4914,8 +4914,8 @@ function DropdownMenuSubContent({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
-        "rounded-sm border border-subtle bg-canvas p-[var(--space-0-5)] text-text-primary shadow-elevation-2",
+        "z-[var(--z-popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-0-5)] text-text-primary shadow-elevation-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -5027,7 +5027,7 @@ function SheetContent({
       {
         "data-slot": "sheet-content",
         className: cn(
-          "fixed z-[var(--z-modal)] flex flex-col gap-4 bg-background shadow-lg",
+          "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-background shadow-lg",
           motionConfig && cn(
             "motion-reduce:animate-none",
             motionConfig.type === "fade" && "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
@@ -5049,20 +5049,20 @@ function SheetContent({
             hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
           ),
           mobileSide === "right" && cn(
-            "max-md:inset-y-0 max-md:right-0 max-md:left-auto max-md:h-full max-md:w-3/4 max-md:border-l max-md:border-t-0 max-md:rounded-none",
-            hasSlideMotion && "max-md:data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-md:data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+            "max-[899px]:inset-y-0 max-[899px]:right-0 max-[899px]:left-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-l max-[899px]:border-t-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
           ),
           mobileSide === "left" && cn(
-            "max-md:inset-y-0 max-md:left-0 max-md:right-auto max-md:h-full max-md:w-3/4 max-md:border-r max-md:border-t-0 max-md:rounded-none",
-            hasSlideMotion && "max-md:data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-md:data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+            "max-[899px]:inset-y-0 max-[899px]:left-0 max-[899px]:right-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-r max-[899px]:border-t-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
           ),
           mobileSide === "top" && cn(
-            "max-md:inset-x-0 max-md:top-0 max-md:bottom-auto max-md:h-auto max-md:w-full max-md:border-b max-md:border-l-0 max-md:rounded-none",
-            hasSlideMotion && "max-md:data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-md:data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+            "max-[899px]:inset-x-0 max-[899px]:top-0 max-[899px]:bottom-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:border-b max-[899px]:border-l-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
           ),
           mobileSide === "bottom" && cn(
-            "max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:h-auto max-md:w-full max-md:border-t max-md:border-l-0 max-md:rounded-none",
-            hasSlideMotion && "max-md:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-md:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+            "max-[899px]:inset-x-0 max-[899px]:bottom-0 max-[899px]:top-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:border-t max-[899px]:border-l-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
           ),
           className
         ),
@@ -5132,21 +5132,22 @@ import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 var sheetDrawerContentClassName = cn(
   "gap-0 p-0",
   "bg-[var(--bg-surface)] text-foreground",
-  "border-[var(--border-subtle)] shadow-[var(--elevation-4)]",
-  "md:w-[480px] md:max-w-[480px]",
-  "max-md:h-[min(85dvh,720px)] max-md:max-h-[85dvh] max-md:w-full max-md:max-w-none",
-  "max-md:rounded-t-[var(--radius-lg)]"
+  "border-[var(--border)] shadow-[var(--elevation-4)]",
+  "min-[900px]:w-[480px] min-[900px]:max-w-[480px]",
+  "max-[899px]:h-[min(85dvh,720px)] max-[899px]:max-h-[85dvh] max-[899px]:w-full max-[899px]:max-w-none",
+  "max-[899px]:rounded-t-[var(--radius-lg)]"
 );
-var sheetDrawerWideContentClassName = "md:w-[720px] md:max-w-[720px]";
+var sheetDrawerWideContentClassName = "min-[900px]:w-[720px] min-[900px]:max-w-[720px]";
 var sheetDrawerFullContentClassName = cn(
-  "md:w-[calc(100vw_-_var(--space-4))] md:max-w-[calc(100vw_-_var(--space-4))]",
-  "max-md:h-[100dvh] max-md:max-h-[100dvh] max-md:rounded-none"
+  "min-[900px]:w-[calc(100vw_-_var(--space-4))] min-[900px]:max-w-[calc(100vw_-_var(--space-4))]",
+  "max-[899px]:h-[100dvh] max-[899px]:max-h-[100dvh] max-[899px]:rounded-none"
 );
 var sheetDrawerHeaderClassName = cn(
   "flex items-start justify-between gap-[var(--space-2)]",
-  "border-b border-[var(--border-subtle)] px-[var(--space-3)] py-[var(--space-3)]"
+  "border-b border-[var(--border)] px-[var(--space-3)] py-[var(--space-3)]"
 );
 var sheetDrawerHeaderTextClassName = "flex min-w-0 flex-1 flex-col gap-[var(--space-1)]";
+var sheetDrawerCaptionClassName = "flex flex-wrap items-center gap-[var(--space-1)]";
 var sheetDrawerTitleClassName = "text-[18px] font-bold leading-snug text-foreground";
 var sheetDrawerDescriptionClassName = "break-keep text-[14px] leading-normal text-text-secondary";
 var sheetDrawerCloseButtonClassName = cn(
@@ -5170,12 +5171,13 @@ var sheetDrawerBodyClassName = cn(
   "px-[var(--space-3)] py-[var(--space-3)]"
 );
 var sheetDrawerFooterClassName = cn(
-  "border-t border-[var(--border-subtle)] px-[var(--space-3)] py-[var(--space-2)]",
+  "border-t border-[var(--border)] px-[var(--space-3)] py-[var(--space-2)]",
   "flex justify-end gap-[var(--space-1)]"
 );
 function SheetDrawer({
   open,
   onOpenChange,
+  caption,
   title,
   description,
   children,
@@ -5211,6 +5213,7 @@ function SheetDrawer({
       children: [
         /* @__PURE__ */ jsxs27("div", { "data-slot": "sheet-drawer-header", className: sheetDrawerHeaderClassName, children: [
           /* @__PURE__ */ jsxs27("div", { className: sheetDrawerHeaderTextClassName, children: [
+            caption ? /* @__PURE__ */ jsx30("div", { "data-slot": "sheet-drawer-caption", className: sheetDrawerCaptionClassName, children: caption }) : null,
             /* @__PURE__ */ jsx30(SheetTitle, { "data-slot": "sheet-drawer-title", className: sheetDrawerTitleClassName, children: title }),
             description ? /* @__PURE__ */ jsx30(
               SheetDescription,
@@ -5301,7 +5304,7 @@ var PopoverContent = React24.forwardRef(({ className, align = "center", sideOffs
     "data-slot": "popover-content",
     className: cn(
       "z-[var(--z-popover)] w-[260px] outline-none",
-      "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+      "rounded-[var(--radius-md)] border border-[var(--border)]",
       "bg-[var(--bg-raised)] p-[var(--space-2)] text-foreground",
       "shadow-[var(--elevation-4)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [