orphos 0.53.2 → 0.53.3

package/dist/avatar.js

@@ -20,7 +20,7 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
     return /*#__PURE__*/ jsx(Avatar.Fallback, {
         "data-slot": "avatar-fallback",
-        className: cn("flex size-full items-center justify-center rounded-full bg-background-element-hover text-foreground-subtle text-sm group-data-[size=sm]/avatar:text-xs", className),
+        className: cn("flex size-full items-center justify-center rounded-full bg-background-element-hover text-foreground-subtle text-small group-data-[size=sm]/avatar:text-micro", className),
         ...props
     });
 }
@@ -34,14 +34,14 @@ function AvatarBadge({ className, ...props }) {
 function AvatarGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "avatar-group",
-        className: cn("group/avatar-group -space-x-2 flex *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+        className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
         ...props
     });
 }
 function AvatarGroupCount({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "avatar-group-count",
-        className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-background-element-active text-foreground-subtle text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+        className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-background-element-active text-foreground-subtle text-small ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
         ...props
     });
 }

package/dist/badge.js

@@ -3,7 +3,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { cva } from "cva";
 import { cn } from "./utils.js";
 const badgeVariants = cva({
-    base: "group/badge inline-flex h-5 w-fit shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-1.5 py-px font-medium text-[11px] transition-all focus-visible:outline-2 focus-visible:outline-offset-2 has-data-[icon=inline-end]:pr-1.25 has-data-[icon=inline-start]:pl-1.25 [&>svg]:pointer-events-none [&_svg]:size-3!",
+    base: "group/badge inline-flex h-5 w-fit shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-1.5 py-px text-micro transition-all focus-visible:outline-2 focus-visible:outline-offset-2 has-data-[icon=inline-end]:pr-1.25 has-data-[icon=inline-start]:pl-1.25 [&>svg]:pointer-events-none [&_svg]:size-3!",
     variants: {
         variant: {
             default: "border-border-subtle bg-background-element text-foreground-subtle [a]:hover:bg-background-element-hover",

package/dist/button.js

@@ -3,7 +3,7 @@ import { Button } from "@base-ui/react/button";
 import { cva } from "cva";
 import { cn } from "./utils.js";
 const buttonVariants = cva({
-    base: "group/button inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent bg-clip-padding font-medium text-sm transition-all focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    base: "group/button inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent bg-clip-padding font-medium text-small transition-all focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     variants: {
         variant: {
             default: "border-border-subtle bg-background-element text-foreground hover:bg-background-element-hover",
@@ -13,7 +13,7 @@ const buttonVariants = cva({
             danger: "bg-danger text-danger-foreground hover:bg-danger-hover"
         },
         size: {
-            sm: "h-7 px-2.5 text-[13px]",
+            sm: "h-7 px-2.5",
             md: "h-8.5 px-3",
             lg: "h-10 px-4",
             icon: "size-8.5",

package/dist/card.js

@@ -4,7 +4,7 @@ function Card({ className, size = "default", ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "card",
         "data-size": size,
-        className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-background-element py-4 text-foreground text-sm ring-1 ring-border-subtle has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
+        className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-background-element py-4 text-foreground text-small ring-1 ring-border-subtle has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
         ...props
     });
 }
@@ -18,14 +18,14 @@ function CardHeader({ className, ...props }) {
 function CardTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "card-title",
-        className: cn("font-medium text-base leading-snug tracking-tight group-data-[size=sm]/card:text-sm", className),
+        className: cn("font-medium text-regular leading-snug tracking-tight group-data-[size=sm]/card:text-small", className),
         ...props
     });
 }
 function CardDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "card-description",
-        className: cn("text-foreground-subtle text-sm", className),
+        className: cn("text-foreground-subtle text-small", className),
         ...props
     });
 }

package/dist/context-menu.js

@@ -43,7 +43,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
     return /*#__PURE__*/ jsxs(ContextMenu.SubmenuTrigger, {
         "data-slot": "context-menu-sub-trigger",
         "data-inset": inset,
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-0.75 pl-2.5 text-foreground text-sm outline-hidden data-highlighted:bg-background-element-hover data-popup-open:bg-background-element-hover data-inset:pl-8.5 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-0.75 pl-2.5 text-foreground text-small outline-hidden data-highlighted:bg-background-element-hover data-popup-open:bg-background-element-hover data-inset:pl-8.5 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         ...props,
         children: [
             children,
@@ -82,14 +82,14 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
         "data-slot": "context-menu-item",
         "data-inset": inset,
         "data-variant": variant,
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-foreground text-sm outline-hidden data-[variant=danger]:data-highlighted:bg-danger-subtle data-[variant=danger]:data-highlighted:text-danger data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-inset:pl-8.5 data-[variant=danger]:text-danger data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=danger]:*:[svg]:text-danger!", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-foreground text-small outline-hidden data-[variant=danger]:data-highlighted:bg-danger-subtle data-[variant=danger]:data-highlighted:text-danger data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-inset:pl-8.5 data-[variant=danger]:text-danger data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=danger]:*:[svg]:text-danger!", className),
         ...props
     });
 }
 function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
     return /*#__PURE__*/ jsxs(ContextMenu.CheckboxItem, {
         "data-slot": "context-menu-checkbox-item",
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8.5 text-foreground text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8.5 text-foreground text-small outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         checked: checked,
         ...props,
         children: [
@@ -108,7 +108,7 @@ function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
 function ContextMenuRadioItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(ContextMenu.RadioItem, {
         "data-slot": "context-menu-radio-item",
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8 text-foreground text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8 text-foreground text-small outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         ...props,
         children: [
             /*#__PURE__*/ jsx("span", {
@@ -127,7 +127,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
     return /*#__PURE__*/ jsx(ContextMenu.GroupLabel, {
         "data-slot": "context-menu-label",
         "data-inset": inset,
-        className: cn("px-2 py-1.5 font-medium text-foreground-subtle text-xs data-inset:pl-8", className),
+        className: cn("px-2 py-1.5 font-medium text-foreground-subtle text-micro data-inset:pl-8", className),
         ...props
     });
 }
@@ -141,7 +141,7 @@ function ContextMenuSeparator({ className, ...props }) {
 function ContextMenuShortcut({ className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
         "data-slot": "context-menu-shortcut",
-        className: cn("-mr-0.75 ml-auto text-foreground-subtle text-xs tracking-widest", className),
+        className: cn("-mr-0.75 ml-auto text-foreground-subtle text-micro tracking-widest", className),
         ...props
     });
 }

package/dist/dialog.js

@@ -92,14 +92,14 @@ function DialogFooter({ className, children, showCloseButton = false, ...props }
 function DialogTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx(Dialog.Title, {
         "data-slot": "dialog-title",
-        className: cn("font-medium text-base leading-none", className),
+        className: cn("font-medium text-regular leading-none", className),
         ...props
     });
 }
 function DialogDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx(Dialog.Description, {
         "data-slot": "dialog-description",
-        className: cn("text-foreground-subtle text-sm *:[a]:text-info *:[a]:underline *:[a]:decoration-info-border *:[a]:underline-offset-3 *:[a]:hover:decoration-info", className),
+        className: cn("text-foreground-subtle text-small *:[a]:text-info *:[a]:underline *:[a]:decoration-info-border *:[a]:underline-offset-3 *:[a]:hover:decoration-info", className),
         ...props
     });
 }

package/dist/dropdown-menu.js

@@ -44,7 +44,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
     return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
         "data-slot": "dropdown-menu-sub-trigger",
         "data-inset": inset,
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-0.75 pl-2.5 text-foreground text-sm outline-hidden data-highlighted:bg-background-element-hover data-popup-open:bg-background-element-hover data-inset:pl-8.5 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-0.75 pl-2.5 text-foreground text-small outline-hidden data-highlighted:bg-background-element-hover data-popup-open:bg-background-element-hover data-inset:pl-8.5 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         ...props,
         children: [
             children,
@@ -83,14 +83,14 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
         "data-slot": "dropdown-menu-item",
         "data-inset": inset,
         "data-variant": variant,
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-foreground text-sm outline-hidden data-[variant=danger]:data-highlighted:bg-danger-subtle data-[variant=danger]:data-highlighted:text-danger data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-inset:pl-8.5 data-[variant=danger]:text-danger data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=danger]:*:[svg]:text-danger!", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-foreground text-small outline-hidden data-[variant=danger]:data-highlighted:bg-danger-subtle data-[variant=danger]:data-highlighted:text-danger data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-inset:pl-8.5 data-[variant=danger]:text-danger data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=danger]:*:[svg]:text-danger!", className),
         ...props
     });
 }
 function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
     return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
         "data-slot": "dropdown-menu-checkbox-item",
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8.5 text-foreground text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8.5 text-foreground text-small outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         checked: checked,
         ...props,
         children: [
@@ -109,7 +109,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
 function DropdownMenuRadioItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Menu.RadioItem, {
         "data-slot": "dropdown-menu-radio-item",
-        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8 text-foreground text-sm outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("relative flex h-7.5 cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2.5 pl-8 text-foreground text-small outline-hidden data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         ...props,
         children: [
             /*#__PURE__*/ jsx("span", {
@@ -128,7 +128,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
     return /*#__PURE__*/ jsx(Menu.GroupLabel, {
         "data-slot": "dropdown-menu-label",
         "data-inset": inset,
-        className: cn("px-2 py-1.5 font-medium text-foreground-subtle text-xs data-inset:pl-8", className),
+        className: cn("px-2 py-1.5 font-medium text-foreground-subtle text-micro data-inset:pl-8", className),
         ...props
     });
 }
@@ -142,7 +142,7 @@ function DropdownMenuSeparator({ className, ...props }) {
 function DropdownMenuShortcut({ className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
         "data-slot": "dropdown-menu-shortcut",
-        className: cn("-mr-0.75 ml-auto text-foreground-subtle text-xs tracking-widest", className),
+        className: cn("-mr-0.75 ml-auto text-foreground-subtle text-micro tracking-widest", className),
         ...props
     });
 }

package/dist/empty.js

@@ -41,21 +41,21 @@ function EmptyMedia({ className, variant = "default", ...props }) {
 function EmptyTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "empty-title",
-        className: cn("font-medium text-sm tracking-tight", className),
+        className: cn("font-medium text-small tracking-tight", className),
         ...props
     });
 }
 function EmptyDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx("p", {
         "data-slot": "empty-description",
-        className: cn("text-foreground-subtle text-sm/relaxed *:[a]:text-info *:[a]:underline *:[a]:decoration-info-border *:[a]:underline-offset-3 *:[a]:hover:decoration-info", className),
+        className: cn("text-foreground-subtle text-small/relaxed *:[a]:text-info *:[a]:underline *:[a]:decoration-info-border *:[a]:underline-offset-3 *:[a]:hover:decoration-info", className),
         ...props
     });
 }
 function EmptyContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "empty-content",
-        className: cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-2 text-balance text-sm", className),
+        className: cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-2 text-balance text-small", className),
         ...props
     });
 }

package/dist/field.js

@@ -15,7 +15,7 @@ function FieldLegend({ className, variant = "legend", ...props }) {
     return /*#__PURE__*/ jsx("legend", {
         "data-slot": "field-legend",
         "data-variant": variant,
-        className: cn("font-medium", "mb-1", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+        className: cn("font-medium", "mb-1", "data-[variant=legend]:text-regular", "data-[variant=label]:text-small", className),
         ...props
     });
 }
@@ -77,14 +77,14 @@ function FieldLabel({ className, ...props }) {
 function FieldTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "field-label",
-        className: cn("flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50", className),
+        className: cn("flex w-fit items-center gap-2 font-medium text-small leading-snug group-data-[disabled=true]/field:opacity-50", className),
         ...props
     });
 }
 function FieldDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx("p", {
         "data-slot": "field-description",
-        className: cn("text-left text-foreground-subtle text-sm leading-normal", "group-has-data-[orientation=horizontal]/field:text-balance", "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1", "*:[a]:text-info *:[a]:underline *:[a]:decoration-info-border *:[a]:underline-offset-3 *:[a]:hover:decoration-info", className),
+        className: cn("text-left text-foreground-subtle text-small leading-normal", "group-has-data-[orientation=horizontal]/field:text-balance", "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1", "*:[a]:text-info *:[a]:underline *:[a]:decoration-info-border *:[a]:underline-offset-3 *:[a]:hover:decoration-info", className),
         ...props
     });
 }
@@ -92,7 +92,7 @@ function FieldSeparator({ children, className, ...props }) {
     return /*#__PURE__*/ jsxs("div", {
         "data-slot": "field-separator",
         "data-content": !!children,
-        className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+        className: cn("relative -my-2 h-5 text-small group-data-[variant=outline]/field-group:-mb-2", className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(Separator, {
@@ -131,7 +131,7 @@ function FieldError({ className, children, errors, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         role: "alert",
         "data-slot": "field-error",
-        className: cn("font-normal text-danger text-xs", className),
+        className: cn("font-normal text-danger text-micro", className),
         ...props,
         children: content
     });

package/dist/input-group.js

@@ -9,12 +9,12 @@ function InputGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "input-group",
         role: "group",
-        className: cn("group/input-group relative flex w-full items-center rounded-md border bg-background-element transition-[color,box-shadow]", "h-8.5 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:outline-none has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1", "has-[[data-slot][aria-invalid=true]]:outline-2 has-[[data-slot][aria-invalid=true]]:outline-danger has-[[data-slot][aria-invalid=true]]:outline-offset-1", className),
+        className: cn("group/input-group relative flex w-full items-center rounded-md border border-border-subtle bg-background-element transition-[color,box-shadow]", "h-8.5 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:outline-none has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1", "has-[[data-slot][aria-invalid=true]]:outline-2 has-[[data-slot][aria-invalid=true]]:outline-danger has-[[data-slot][aria-invalid=true]]:outline-offset-1", className),
         ...props
     });
 }
 const inputGroupAddonVariants = cva({
-    base: "flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-foreground-subtle text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-3px)] [&>svg:not([class*='size-'])]:size-4",
+    base: "flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-foreground-subtle text-small group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-3px)] [&>svg:not([class*='size-'])]:size-4",
     variants: {
         align: {
             "inline-start": "order-first pl-2.5 has-[>button]:ml-[-0.35rem] has-[>kbd]:-ml-1 has-[>svg]:pl-2",
@@ -43,7 +43,7 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
     });
 }
 const inputGroupButtonVariants = cva({
-    base: "flex items-center gap-2 text-sm shadow-none",
+    base: "flex items-center gap-2 text-small shadow-none",
     variants: {
         size: {
             xs: "h-6 gap-1 rounded-sm px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
@@ -69,7 +69,7 @@ function InputGroupButton({ className, type = "button", variant = "default", siz
 }
 function InputGroupText({ className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
-        className: cn("flex items-center gap-2 text-foreground-subtle text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
+        className: cn("flex items-center gap-2 text-foreground-subtle text-small [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
         ...props
     });
 }

package/dist/input.js

@@ -5,7 +5,7 @@ import { cva } from "cva";
 import { useId, useState } from "react";
 import { cn } from "./utils.js";
 const inputVariants = cva({
-    base: "no-drag flex h-8.5 w-full min-w-0 items-center rounded-md border bg-background-element px-2.5 py-1 text-foreground text-sm -outline-offset-1 transition-colors placeholder:text-foreground-subtle placeholder:text-sm focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-2 aria-invalid:outline-danger",
+    base: "no-drag flex h-8.5 w-full min-w-0 items-center rounded-md border bg-background-element px-2.5 py-1 text-foreground text-regular -outline-offset-1 transition-colors placeholder:text-foreground-subtle placeholder:text-regular focus-visible:outline-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:outline-2 aria-invalid:outline-danger",
     variants: {
         variant: {
             default: "",

package/dist/kbd.js

@@ -3,7 +3,7 @@ import { cn } from "./utils.js";
 function Kbd({ className, ...props }) {
     return /*#__PURE__*/ jsx("kbd", {
         "data-slot": "kbd",
-        className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-background-element-hover px-1 font-medium font-sans text-foreground-subtle text-xs", "[&_svg:not([class*='size-'])]:size-3", "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background", className),
+        className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-background-element-hover px-1 font-medium font-sans text-foreground-subtle text-micro", "[&_svg:not([class*='size-'])]:size-3", "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background", className),
         ...props
     });
 }

package/dist/label.js

@@ -3,7 +3,7 @@ import { cn } from "./utils.js";
 function Label({ className, ...props }) {
     return /*#__PURE__*/ jsx("label", {
         "data-slot": "label",
-        className: cn("flex items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", className),
+        className: cn("flex items-center gap-2 font-medium text-small leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", className),
         ...props
     });
 }

package/dist/popover.js

@@ -40,7 +40,7 @@ function PopoverClose({ ...props }) {
 function PopoverHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "popover-header",
-        className: cn("flex flex-col gap-0.5 text-sm", className),
+        className: cn("flex flex-col gap-0.5 text-small", className),
         ...props
     });
 }

package/dist/select.js

@@ -7,7 +7,7 @@ const select_Select = Select.Root;
 function SelectTrigger({ className, size = "default", children, ...props }) {
     return /*#__PURE__*/ jsxs(Select.Trigger, {
         "data-size": size,
-        className: cn("flex h-8.5 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-background-element px-2.5 py-2 text-sm -outline-offset-1 transition-colors focus-visible:outline-2 aria-invalid:outline-2 aria-invalid:outline-danger data-disabled:pointer-events-none data-[size=sm]:h-7 data-disabled:cursor-not-allowed data-placeholder:text-foreground-subtle data-disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("flex h-8.5 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-background-element px-2.5 py-2 text-small -outline-offset-1 transition-colors focus-visible:outline-2 aria-invalid:outline-2 aria-invalid:outline-danger data-disabled:pointer-events-none data-[size=sm]:h-7 data-disabled:cursor-not-allowed data-placeholder:text-foreground-subtle data-disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         "data-slot": "select-trigger",
         ...props,
         children: [
@@ -53,13 +53,13 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 }
 function SelectLabel({ className, ...props }) {
     return /*#__PURE__*/ jsx(Select.GroupLabel, {
-        className: cn("px-2 py-1 text-foreground-subtle text-xs", className),
+        className: cn("px-2 py-1 text-foreground-subtle text-micro", className),
         ...props
     });
 }
 function SelectItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Select.Item, {
-        className: cn("relative flex h-7.5 w-full cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-foreground text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+        className: cn("relative flex h-7.5 w-full cursor-default select-none items-center gap-2 rounded-sm px-2.5 py-1.5 text-foreground text-small outline-none data-disabled:pointer-events-none data-highlighted:bg-background-element-hover data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-foreground-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(Select.ItemText, {

package/dist/sidebar.js

@@ -118,7 +118,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
                     style: {
                         width: SIDEBAR_WIDTH_MOBILE
                     },
-                    className: cn("fixed z-50 flex w-(--sidebar-width) flex-col gap-4 border-r-border-subtle/50 border-l-border-subtle/50 bg-background-element bg-clip-padding text-sm transition duration-200 ease-in-out data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
+                    className: cn("fixed z-50 flex w-(--sidebar-width) flex-col gap-4 border-r-border-subtle border-l-border-subtle bg-background-element bg-clip-padding text-smalltransition duration-200 ease-in-out data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
                     children: [
                         /*#__PURE__*/ jsx(Dialog.Title, {
                             className: "sr-only",
@@ -152,12 +152,12 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
             /*#__PURE__*/ jsx("div", {
                 "data-slot": "sidebar-container",
                 "data-side": side,
-                className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] md:flex", "floating" === variant || "inset" === variant ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "border-r-border-subtle/50 border-l-border-subtle/50 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+                className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] md:flex", "floating" === variant || "inset" === variant ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "border-r-border-subtle border-l-border-subtle group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
                 ...props,
                 children: /*#__PURE__*/ jsx("div", {
                     "data-sidebar": "sidebar",
                     "data-slot": "sidebar-inner",
-                    className: "flex size-full flex-col bg-background-subtle group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-border-subtle/50",
+                    className: "flex size-full flex-col bg-background-subtle group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-border-subtle",
                     children: children
                 })
             })
@@ -195,7 +195,7 @@ function SidebarRail({ className, ...props }) {
         tabIndex: -1,
         onClick: toggleSidebar,
         title: "Toggle Sidebar",
-        className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-border-subtle/50 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-background-subtle group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+        className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-border-subtle group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-background-subtle group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
         ...props
     });
 }
@@ -258,7 +258,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
     return useRender({
         defaultTagName: "div",
         props: mergeProps({
-            className: cn("text-foreground/70 ring-focus-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0", className)
+            className: cn("text-foreground/70 ring-focus-ring h-8 rounded-md px-2 text-micro font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0", className)
         }, props),
         render,
         state: {
@@ -284,7 +284,7 @@ function SidebarGroupContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "sidebar-group-content",
         "data-sidebar": "group-content",
-        className: cn("w-full text-sm", className),
+        className: cn("w-full text-small", className),
         ...props
     });
 }
@@ -305,16 +305,16 @@ function SidebarMenuItem({ className, ...props }) {
     });
 }
 const sidebarMenuButtonVariants = cva({
-    base: "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-foreground-subtle text-sm hover:bg-background-element-hover hover:text-foreground focus-visible:outline-2 active:bg-background-element-active active:text-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-background-element-hover data-active:font-medium data-active:text-foreground data-open:hover:bg-background-element-hover data-open:hover:text-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+    base: "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-foreground-subtle text-small hover:bg-background-element-hover hover:text-foreground focus-visible:outline-2 active:bg-background-element-active active:text-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-background-element-hover data-active:font-medium data-active:text-foreground data-open:hover:bg-background-element-hover data-open:hover:text-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
     variants: {
         variant: {
             default: "hover:bg-background-element-hover hover:text-foreground",
             outline: "bg-transparent shadow-[0_0_0_1px_var(--border-subtle)] hover:bg-background-element-hover hover:text-foreground hover:shadow-[0_0_0_1px_var(--background-element-hover)]"
         },
         size: {
-            default: "h-8 text-sm",
-            sm: "h-7 text-xs",
-            lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+            default: "h-8 text-small",
+            sm: "h-7",
+            lg: "h-12 text-small group-data-[collapsible=icon]:p-0!"
         }
     },
     defaultVariants: {
@@ -375,7 +375,7 @@ function SidebarMenuBadge({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "sidebar-menu-badge",
         "data-sidebar": "menu-badge",
-        className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-foreground text-xs tabular-nums peer-hover/menu-button:text-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-foreground", className),
+        className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-foreground text-micro tabular-nums peer-hover/menu-button:text-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-foreground", className),
         ...props
     });
 }
@@ -421,7 +421,7 @@ function SidebarMenuSubButton({ render, size = "md", isActive = false, className
     return useRender({
         defaultTagName: "a",
         props: mergeProps({
-            className: cn("text-foreground hover:bg-background-element-hover hover:text-foreground active:bg-background-element-active active:text-foreground [&>svg]:text-foreground data-active:bg-background-element-active data-active:text-foreground h-7 gap-2 rounded-md px-2 focus-visible:outline-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0", className)
+            className: cn("text-foreground hover:bg-background-element-hover hover:text-foreground active:bg-background-element-active active:text-foreground [&>svg]:text-foreground data-active:bg-background-element-active data-active:text-foreground h-7 gap-2 rounded-md px-2 focus-visible:outline-2 data-[size=md]:text-small data-[size=sm]:text-micro [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0", className)
         }, props),
         render,
         state: {

package/dist/tabs.js

@@ -26,7 +26,7 @@ function TabsList({ className, children, ...props }) {
 function TabsTrigger({ className, ...props }) {
     return /*#__PURE__*/ jsx(Tabs.Tab, {
         "data-slot": "tabs-trigger",
-        className: cn("flex flex-1 shrink-0 cursor-default items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-foreground-subtle text-sm transition-[color,background-color,box-shadow] focus-visible:outline-2 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-foreground data-selected:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
+        className: cn("flex flex-1 shrink-0 cursor-default items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-foreground-subtle text-small transition-[color,background-color,box-shadow] focus-visible:outline-2 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-foreground data-selected:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
         ...props
     });
 }

package/dist/textarea.js

@@ -3,7 +3,7 @@ import { cn } from "./utils.js";
 function Textarea({ className, ...props }) {
     return /*#__PURE__*/ jsx("textarea", {
         "data-slot": "textarea",
-        className: cn("scrollbar-hide field-sizing-content flex min-h-16 w-full overflow-y-auto rounded-md border bg-background-element px-2.5 pt-2 pb-6 text-sm leading-normal transition-[color,box-shadow] placeholder:text-foreground-subtle placeholder:text-sm focus-visible:outline-2 focus-visible:-outline-offset-1 disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 aria-invalid:outline aria-invalid:outline-danger", className),
+        className: cn("scrollbar-hide field-sizing-content flex min-h-16 w-full overflow-y-auto rounded-md border bg-background-element px-2.5 pt-2 pb-6 text-regular leading-normal transition-[color,box-shadow] placeholder:text-foreground-subtle placeholder:text-regular focus-visible:outline-2 focus-visible:-outline-offset-1 disabled:cursor-not-allowed disabled:resize-none disabled:opacity-50 aria-invalid:outline aria-invalid:outline-danger", className),
         ...props
     });
 }

package/dist/toast.js

@@ -48,9 +48,9 @@ function ToastList({ position = "bottom-right" }) {
                         "right",
                         isTop ? "up" : "down"
                     ],
-                    className: cn("absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-md border bg-background-element bg-clip-padding p-3 text-foreground shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)]", "data-[position*=right]:right-0 data-[position*=right]:left-auto", "data-[position*=left]:right-auto data-[position*=left]:left-0", "data-[position*=center]:right-0 data-[position*=center]:left-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-[position]:data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:[transform:translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
+                    className: cn("absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-md border border-border-subtle bg-background-element bg-clip-padding p-3 text-foreground shadow-lg [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)]", "data-[position*=right]:right-0 data-[position*=right]:left-auto", "data-[position*=left]:right-auto data-[position*=left]:left-0", "data-[position*=center]:right-0 data-[position*=center]:left-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-[position]:data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:[transform:translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:[transform:translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
                     children: /*#__PURE__*/ jsxs(Toast.Content, {
-                        className: "flex items-center justify-between gap-1.5 overflow-hidden text-sm transition-opacity duration-250 data-behind:pointer-events-none data-expanded:pointer-events-auto data-behind:opacity-0 data-expanded:opacity-100",
+                        className: "flex items-center justify-between gap-1.5 overflow-hidden text-small! transition-opacity duration-250 data-behind:pointer-events-none data-expanded:pointer-events-auto data-behind:opacity-0 data-expanded:opacity-100",
                         children: [
                             /*#__PURE__*/ jsxs("div", {
                                 className: "flex gap-2",
@@ -66,11 +66,11 @@ function ToastList({ position = "bottom-right" }) {
                                         className: "flex flex-col gap-0.5",
                                         children: [
                                             /*#__PURE__*/ jsx(Toast.Title, {
-                                                className: "font-semibold text-foreground text-sm",
+                                                className: "font-semibold text-foreground text-small",
                                                 "data-slot": "toast-title"
                                             }),
                                             /*#__PURE__*/ jsx(Toast.Description, {
-                                                className: "text-foreground-subtle text-sm",
+                                                className: "text-foreground-subtle text-small",
                                                 "data-slot": "toast-description"
                                             })
                                         ]

package/dist/toggle.js

@@ -4,7 +4,7 @@ import { Toggle } from "@base-ui/react/toggle";
 import { cva } from "cva";
 import { cn } from "./utils.js";
 const toggleVariants = cva({
-    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium text-foreground text-sm transition-[color,box-shadow] hover:bg-background-element-hover focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 aria-invalid:outline-2 aria-invalid:outline-danger aria-invalid:outline-offset-2 data-pressed:bg-background-element-active data-pressed:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-medium text-foreground text-small transition-[color,box-shadow] hover:bg-background-element-hover focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 aria-invalid:outline-2 aria-invalid:outline-danger aria-invalid:outline-offset-2 data-pressed:bg-background-element-active data-pressed:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     variants: {
         variant: {
             default: "border-border-subtle bg-background-element hover:bg-background-element-hover",

package/dist/tooltip.js

@@ -38,7 +38,7 @@ function TooltipContent({ className, children, align, side, sideOffset = 10, ...
         side: side,
         children: /*#__PURE__*/ jsxs(Tooltip.Popup, {
             "data-slot": "tooltip-content",
-            className: cn("z-100 w-fit origin-(--transform-origin) text-balance rounded-md bg-foreground px-2 py-1 text-background text-xs transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[instant]:duration-0", className),
+            className: cn("z-100 w-fit origin-(--transform-origin) text-balance rounded-md bg-foreground px-2 py-1 text-background text-mini transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[instant]:duration-0", className),
             ...props,
             children: [
                 children,

package/dist/utils.js

@@ -1,5 +1,22 @@
 import { cx } from "cva";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: [
+                "micro",
+                "mini",
+                "small",
+                "regular",
+                "large",
+                "title1",
+                "title2",
+                "title3",
+                "title4"
+            ]
+        }
+    }
+});
 function cn(...inputs) {
     return twMerge(cx(inputs));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orphos",
-  "version": "0.53.2",
+  "version": "0.53.3",
   "type": "module",
   "license": "MIT",
   "exports": {

package/theme.css

@@ -6,15 +6,9 @@
 
 :root {
   /* Base border radius */
-  --radius: 6px;
-
+  --radius: 0.375rem;
   --color-white: oklch(1 0 0);
   --color-black: oklch(0 0 0);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Theme */
@@ -28,8 +22,17 @@
     "Helvetica Neue", sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
 
-  /* Colors  */
+  --text-micro: 0.6875rem;
+  --text-mini: 0.75rem;
+  --text-small: 0.8125rem;
+  --text-regular: 0.9375rem;
+  --text-large: 1.125rem;
+  --text-title1: 2rem;
+  --text-title2: 1.5rem;
+  --text-title3: 1.25rem;
+  --text-title4: 1.125rem;
 
+  /* Colors  */
   --color-focus-ring: var(--blue-8);
 
   --color-background: var(--background);
@@ -82,26 +85,6 @@
   --radius-xs: calc(var(--radius) - 4px);
 }
 
-@utility container {
-  margin-inline: auto;
-  padding-inline: 1.5rem;
-  @media (width >= theme(--breakpoint-xs)) {
-    max-width: none;
-  }
-  @media (width >= 1400px) {
-    max-width: 1400px;
-  }
-}
-
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
 @layer base {
   * {
     @apply border-border-subtle outline-focus-ring;
@@ -117,12 +100,15 @@
   }
 
   body {
-    @apply scroll-smooth min-w-[320px] text-base font-sans;
-    font-feature-settings:
-      "liga" 1,
-      "calt" 1; /* fix for Chrome */
-    font-synthesis-weight: none;
-    text-rendering: optimizeLegibility;
+    @apply scroll-smooth min-w-[320px] leading-normal text-regular font-sans;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizelegibility;
+    -moz-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    -o-text-size-adjust: none;
+    -webkit-text-size-adjust: 100%;
+    font-feature-settings: "calt"; /* fix for Chrome */
   }
 
   textarea::-webkit-resizer {
@@ -152,9 +138,7 @@
     --prose-blockquote-border-color: var(--tomato-9);
 
     color: var(--prose-color);
-    font-size: var(--text-base);
-    line-height: 1.75;
-    white-space: normal;
+    @apply leading-[1.7] whitespace-normal text-regular;
 
     /* Spacing between elements */
     *:where(:not(.not-prose, .not-prose *))
@@ -164,36 +148,36 @@
 
     /* Headings */
     h1:where(:not(.not-prose, .not-prose *)) {
-      font-size: 1.75rem;
+      font-size: var(--text-title1);
       line-height: 1.25;
       letter-spacing: -0.025em;
       color: var(--prose-heading-color);
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-medium);
       margin-top: calc(var(--spacing) * 16);
     }
 
     h2:where(:not(.not-prose, .not-prose *)) {
-      font-size: 1.5rem;
+      font-size: var(--text-title2);
       line-height: 1.35;
       letter-spacing: -0.025em;
       color: var(--prose-heading-color);
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-medium);
       margin-top: calc(var(--spacing) * 14);
     }
 
     h3:where(:not(.not-prose, .not-prose *)) {
-      font-size: 1.25rem;
+      font-size: var(--text-title3);
       line-height: 1.4;
       color: var(--prose-heading-color);
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-medium);
       margin-top: calc(var(--spacing) * 12);
     }
 
     h4:where(:not(.not-prose, .not-prose *)) {
-      font-size: var(--text-base);
+      font-size: var(--text-large);
       line-height: 1.5;
       color: var(--prose-heading-color);
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-medium);
       margin-top: calc(var(--spacing) * 10);
     }
 
@@ -282,7 +266,7 @@
       font-variant-ligatures: none;
       font-family: var(--font-mono);
       font-weight: var(--font-weight-medium);
-      font-size: 0.875em;
+      font-size: var(--text-small);
       color: var(--prose-code-color);
       background-color: var(--background-element-hover);
       padding: 0.125rem 0.375rem;
@@ -290,7 +274,7 @@
     }
 
     :is(h2, h3, h4) code:where(:not(.not-prose, .not-prose *)) {
-      font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-medium);
     }
 
     /* Remove backticks from inline code */
@@ -310,7 +294,7 @@
       background-color: transparent;
       padding: 0;
       border-radius: 0;
-      font-size: var(--text-sm);
+      font-size: var(--text-small);
       line-height: 1.75;
     }
 
@@ -324,7 +308,7 @@
       table-layout: auto;
       margin-top: calc(var(--spacing) * 8);
       margin-bottom: calc(var(--spacing) * 8);
-      font-size: var(--text-sm);
+      font-size: var(--text-small);
       line-height: 1.5;
     }
 
@@ -403,7 +387,7 @@
     figcaption:where(:not(.not-prose, .not-prose *)) {
       margin-top: calc(var(--spacing) * 3);
       text-align: center;
-      font-size: var(--text-sm);
+      font-size: var(--text-small);
       font-style: italic;
       color: var(--prose-color);
     }
@@ -415,6 +399,10 @@
       border-radius: var(--radius-lg);
     }
 
+    kbd:where(:not(.not-prose, .not-prose *)) {
+      @apply pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-background-element-hover px-1 font-medium font-sans text-foreground-subtle text-small;
+    }
+
     /* First and last child margin reset */
     :first-child:where(:not(.not-prose, .not-prose *)) {
       margin-top: 0;
@@ -425,3 +413,23 @@
     }
   }
 }
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+  @media (width >= theme(--breakpoint-xs)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}