npm - prime-ui-kit - Versions diffs - 0.6.0 → 0.7.1 - Mend

prime-ui-kit 0.6.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (311) hide show

package/src/components/color-picker/examples/brand-kit.tsx CHANGED Viewed

@@ -11,12 +11,12 @@ export function BrandKitExample() {
     <ColorPicker.Root defaultValue="#1d4ed8">
       <Popover.Root onOpenChange={setOpen} open={open}>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             <ColorPicker.TriggerSwatch />
             Brand color
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+        <Popover.Content align="start" side="bottom">
           <ColorPicker.FormatProvider>
             <ColorPicker.FormatSelect />
             <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
@@ -39,7 +39,7 @@ export function BrandKitExample() {
                 </ColorPicker.SwatchPickerItem>
               ))}
             </ColorPicker.SwatchPicker>
-            <ColorPicker.HexInput label="Hex" size="m" />
+            <ColorPicker.HexInput label="Hex" />
           </ColorPicker.FormatProvider>
         </Popover.Content>
       </Popover.Root>

package/src/components/color-picker/examples/controlled-form-field.tsx CHANGED Viewed

@@ -8,18 +8,16 @@ export function ControlledFormFieldExample() {
   return (
     <div>
-      <Label.Root htmlFor="product-color-trigger" size="m">
-        Product color
-      </Label.Root>
+      <Label.Root htmlFor="product-color-trigger">Product color</Label.Root>
       <ColorPicker.Root onChange={setColor} value={color}>
         <Popover.Root onOpenChange={setOpen} open={open}>
           <Popover.Trigger asChild>
-            <Button.Root id="product-color-trigger" mode="stroke" size="m" variant="neutral">
+            <Button.Root id="product-color-trigger" mode="stroke" variant="neutral">
               <ColorPicker.TriggerSwatch />
               Pick
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+          <Popover.Content align="start" side="bottom">
             <ColorPicker.FormatProvider>
               <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">
                 <ColorPicker.AreaThumb />
@@ -33,7 +31,7 @@ export function ControlledFormFieldExample() {
             </ColorPicker.FormatProvider>
           </Popover.Content>
         </Popover.Root>
-        <ColorPicker.HexInput label="Hex value" size="m" />
+        <ColorPicker.HexInput label="Hex value" />
       </ColorPicker.Root>
     </div>
   );

package/src/components/color-picker/examples/field-eyedropper.tsx CHANGED Viewed

@@ -11,12 +11,12 @@ export function FieldEyedropperExample() {
     <ColorPicker.Root defaultValue="hsl(340, 82%, 52%)">
       <Popover.Root onOpenChange={setOpen} open={open}>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             <ColorPicker.TriggerSwatch />
             Field + eyedropper
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+        <Popover.Content align="start" side="bottom">
           <div style={{ width: "19.5rem", maxWidth: "100%", minWidth: 0 }}>
             <ColorPicker.FormatProvider>
               <Typography.Root as="p" tone="muted" variant="body-small" weight="medium">

package/src/components/color-picker/examples/format-variants.tsx CHANGED Viewed

@@ -19,12 +19,12 @@ function FormatPopover({
       <ColorPicker.Root defaultValue="hsl(200, 75%, 52%)">
         <Popover.Root onOpenChange={setOpen} open={open}>
           <Popover.Trigger asChild>
-            <Button.Root mode="stroke" size="m" variant="neutral">
+            <Button.Root mode="stroke" variant="neutral">
               <ColorPicker.TriggerSwatch />
               Open ({defaultFormat.toUpperCase()})
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+          <Popover.Content align="start" side="bottom">
             <ColorPicker.FormatProvider defaultFormat={defaultFormat}>
               <ColorPicker.FormatSelect />
               <ColorPicker.ChannelStrip

package/src/components/color-picker/examples/full-width.tsx CHANGED Viewed

@@ -10,12 +10,12 @@ export function FullWidthPanelExample() {
     <ColorPicker.Root defaultValue="hsl(30, 85%, 52%)">
       <Popover.Root onOpenChange={setOpen} open={open}>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             <ColorPicker.TriggerSwatch />
             Full-width panel
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+        <Popover.Content align="start" side="bottom">
           <div style={{ minWidth: "min(100vw - 2rem, 28rem)" }}>
             <ColorPicker.FormatProvider>
               <div

package/src/components/color-picker/examples/minimal-popover.tsx CHANGED Viewed

@@ -6,12 +6,12 @@ export function MinimalPopoverExample() {
     <ColorPicker.Root defaultValue="#3b82f6">
       <Popover.Root>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             <ColorPicker.TriggerSwatch />
             Color
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+        <Popover.Content align="start" side="bottom">
           <ColorPicker.FormatProvider>
             <ColorPicker.FormatSelect />
             <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">

package/src/components/color-picker/examples/panel-placement.tsx CHANGED Viewed

@@ -39,12 +39,12 @@ export function PanelPlacementExample() {
       <ColorPicker.Root defaultValue="hsl(265, 80%, 55%)">
         <Popover.Root>
           <Popover.Trigger asChild>
-            <Button.Root mode="stroke" size="m" variant="neutral">
+            <Button.Root mode="stroke" variant="neutral">
               <ColorPicker.TriggerSwatch />
               Bottom
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+          <Popover.Content align="start" side="bottom">
             <Panel />
           </Popover.Content>
         </Popover.Root>
@@ -53,12 +53,12 @@ export function PanelPlacementExample() {
       <ColorPicker.Root defaultValue="hsl(200, 70%, 48%)">
         <Popover.Root>
           <Popover.Trigger asChild>
-            <Button.Root mode="stroke" size="m" variant="neutral">
+            <Button.Root mode="stroke" variant="neutral">
               <ColorPicker.TriggerSwatch />
               Top
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="top">
+          <Popover.Content align="start" side="top">
             <Panel />
           </Popover.Content>
         </Popover.Root>

package/src/components/color-picker/examples/product-variant-swatch.tsx CHANGED Viewed

@@ -16,12 +16,12 @@ export function ProductVariantSwatchExample() {
     <ColorPicker.Root defaultValue={VARIANTS[0]?.color ?? "#000000"}>
       <Popover.Root onOpenChange={setOpen} open={open}>
         <Popover.Trigger asChild>
-          <Button.Root mode="stroke" size="m" variant="neutral">
+          <Button.Root mode="stroke" variant="neutral">
             <ColorPicker.TriggerSwatch />
             Color
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+        <Popover.Content align="start" side="bottom">
           <ColorPicker.FormatProvider defaultFormat="hex">
             <ColorPicker.SwatchPicker aria-label="Product color">
               {VARIANTS.map((v) => (

package/src/components/color-picker/examples/readout-trigger.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ export function ReadoutTriggerExample() {
   return (
     <Popover.Root onOpenChange={setOpen} open={open}>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           <span
             aria-hidden
             style={{
@@ -36,7 +36,7 @@ export function ReadoutTriggerExample() {
           {colorString}
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+      <Popover.Content align="start" side="bottom">
         <ColorPicker.Root onChange={setColor} value={color}>
           <ColorPicker.FormatProvider>
             <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">

package/src/components/color-picker/examples/states.tsx CHANGED Viewed

@@ -18,12 +18,12 @@ export function StatesExample() {
         <ColorPicker.Root defaultValue="#22c55e">
           <Popover.Root onOpenChange={setOpenSwatch} open={openSwatch}>
             <Popover.Trigger asChild>
-              <Button.Root mode="stroke" size="m" variant="neutral">
+              <Button.Root mode="stroke" variant="neutral">
                 <ColorPicker.TriggerSwatch />
                 Palette
               </Button.Root>
             </Popover.Trigger>
-            <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+            <Popover.Content align="start" side="bottom">
               <ColorPicker.FormatProvider>
                 <ColorPicker.SwatchPicker aria-label="Palette with one disabled swatch">
                   {PRESETS.map((c, i) => (
@@ -44,12 +44,12 @@ export function StatesExample() {
         <ColorPicker.Root defaultValue="hsl(200, 75%, 52%)">
           <Popover.Root onOpenChange={setOpenSlider} open={openSlider}>
             <Popover.Trigger asChild>
-              <Button.Root mode="stroke" size="m" variant="neutral">
+              <Button.Root mode="stroke" variant="neutral">
                 <ColorPicker.TriggerSwatch />
                 Disabled slider
               </Button.Root>
             </Popover.Trigger>
-            <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+            <Popover.Content align="start" side="bottom">
               <ColorPicker.FormatProvider>
                 <div
                   style={{

package/src/components/color-picker/examples/theme-accent.tsx CHANGED Viewed

@@ -14,17 +14,12 @@ export function ThemeAccentExample() {
       <ColorPicker.Root value={color} onChange={setColor}>
         <Popover.Root onOpenChange={setOpen} open={open}>
           <Popover.Trigger asChild>
-            <Button.Root
-              aria-label="Choose theme accent color"
-              mode="stroke"
-              size="m"
-              variant="neutral"
-            >
+            <Button.Root aria-label="Choose theme accent color" mode="stroke" variant="neutral">
               <ColorPicker.TriggerSwatch />
               Accent
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" insetGap="x3" insetPadding="x2" side="bottom">
+          <Popover.Content align="start" side="bottom">
             <ColorPicker.FormatProvider>
               <ColorPicker.FormatSelect />
               <ColorPicker.Area colorSpace="hsl" xChannel="saturation" yChannel="lightness">

package/src/components/command-menu/examples/app-palette.tsx CHANGED Viewed

@@ -49,7 +49,7 @@ export default function CommandMenuExampleAppPalette() {
   return (
     <>
-      <Button.Root size="m" variant="primary" onClick={() => setOpen(true)}>
+      <Button.Root variant="primary" onClick={() => setOpen(true)}>
         Open palette (⌘K / Ctrl+K)
       </Button.Root>

package/src/components/command-menu/examples/composition-tags-footer.tsx CHANGED Viewed

@@ -35,7 +35,7 @@ export default function CommandMenuExampleCompositionTagsFooter() {
   return (
     <>
-      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
         Full composition
       </Button.Root>
@@ -66,7 +66,6 @@ export default function CommandMenuExampleCompositionTagsFooter() {
             <>
               <Kbd.Root aria-label="Open shortcut">⌘K</Kbd.Root>
               <Button.Root
-                size="m"
                 variant="neutral"
                 mode="ghost"
                 aria-label="Close"
@@ -90,11 +89,7 @@ export default function CommandMenuExampleCompositionTagsFooter() {
           </CommandMenu.TagSectionLabel>
           <CommandMenu.TagRow>
             {scopes.map((s) => (
-              <Tag.Root
-                key={s}
-                size="m"
-                onRemove={() => setScopes((p) => p.filter((x) => x !== s))}
-              >
+              <Tag.Root key={s} onRemove={() => setScopes((p) => p.filter((x) => x !== s))}>
                 {s}
               </Tag.Root>
             ))}

package/src/components/command-menu/examples/controlled-open-search.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ export default function CommandMenuExampleControlledOpenSearch() {
         <Typography.Root variant="body-small" tone="muted">
           External query: «{query || "…"}»
         </Typography.Root>
-        <Button.Root size="m" variant="primary" onClick={() => setOpen(true)}>
+        <Button.Root variant="primary" onClick={() => setOpen(true)}>
           Open with external search string
         </Button.Root>
       </div>

package/src/components/command-menu/examples/disabled-items.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ export default function CommandMenuExampleDisabledItems() {
   return (
     <>
-      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
         Disabled items behavior
       </Button.Root>

package/src/components/command-menu/examples/file-search.tsx CHANGED Viewed

@@ -49,7 +49,7 @@ export default function CommandMenuExampleFileSearch() {
   return (
     <>
-      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
         Search files
       </Button.Root>

package/src/components/command-menu/examples/full-width-panel.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ export default function CommandMenuExampleFullWidthPanel() {
   return (
     <>
-      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
         Wide panel
       </Button.Root>

package/src/components/command-menu/examples/item-icon-as.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ export default function CommandMenuExampleItemIconAs() {
   return (
     <>
-      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
         ItemIcon polymorphism
       </Button.Root>

package/src/components/command-menu/examples/quick-actions.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ export default function CommandMenuExampleQuickActions() {
   return (
     <>
-      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+      <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
         Quick actions
       </Button.Root>

package/src/components/command-menu/examples/variants-density-items.tsx CHANGED Viewed

@@ -31,7 +31,6 @@ export default function CommandMenuExampleVariantsDensityItems() {
     <>
       <div style={triggerRowStyle}>
         <Button.Root
-          size="m"
           variant="neutral"
           mode="stroke"
           onClick={() => {
@@ -42,7 +41,6 @@ export default function CommandMenuExampleVariantsDensityItems() {
           Compact density
         </Button.Root>
         <Button.Root
-          size="m"
           variant="neutral"
           mode="stroke"
           onClick={() => {
@@ -71,10 +69,10 @@ export default function CommandMenuExampleVariantsDensityItems() {
             </CommandMenu.Item>
           </CommandMenu.Group>
           <CommandMenu.Group heading='Items size="m"'>
-            <CommandMenu.Item value="tall row" size="m" onSelect={() => setOpen(false)}>
+            <CommandMenu.Item value="tall row" onSelect={() => setOpen(false)}>
               Taller list row
             </CommandMenu.Item>
-            <CommandMenu.Item value="another m" size="m" onSelect={() => setOpen(false)}>
+            <CommandMenu.Item value="another m" onSelect={() => setOpen(false)}>
               Another size m item
             </CommandMenu.Item>
           </CommandMenu.Group>

package/src/components/data-table/COMPONENT.md CHANGED Viewed

@@ -12,6 +12,7 @@
 - **Do not use** when you need arbitrary column pinning, resizable columns, or spreadsheet-style keyboard grid navigation — the table does not implement those.
 - **Do not use** when sorting or filtering must run on the server only without mirroring logic in the parent — sorting is applied in memory to the `rows` you pass; supply pre-sorted data or control `sort` yourself and replace `rows` accordingly.
 - **Do not use** when you need a loading overlay on top of already rendered rows — `loading` only affects the body when there are zero rows to display.
+- **Empty state:** for a **plain** message in the table body use **`emptyText`**. For an **illustrated** empty state (icon, **`h2`**, actions) render [`EmptyPage`](../empty-page/COMPONENT.md) in the surrounding layout or conditionally **instead of** the table when `rows.length === 0` and not `loading`.
 ## Composition
@@ -135,4 +136,5 @@ Exported types: `DataTableSortState`, `DataTableOrder`, `DataTableSize`, `DataTa
 ## Related
 - [Pagination](../pagination/COMPONENT.md) — used under the table for page navigation.
+- [EmptyPage](../empty-page/COMPONENT.md) — rich empty state (icon, title, CTA) outside or instead of `emptyText`.
 - [LinkButton](../link-button/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Tag](../tag/COMPONENT.md) — common cell content; they pick up size from the table’s `ControlSizeProvider` unless overridden.

package/src/components/datepicker/examples/birthdate.tsx CHANGED Viewed

@@ -17,11 +17,11 @@ export function BirthdateSingleExample() {
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           {triggerLabel}
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetPadding="none" side="bottom">
+      <Popover.Content align="start" side="bottom">
         <Datepicker.Shell>
           <Datepicker.Calendar
             disabled={(date) => date >= startOfTomorrow()}

package/src/components/datepicker/examples/booking.tsx CHANGED Viewed

@@ -37,11 +37,11 @@ export function BookingDateRangeExample() {
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           Заезд и выезд
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetPadding="none" side="bottom">
+      <Popover.Content align="start" side="bottom">
         <Datepicker.Shell
           presets={<Datepicker.Presets mode="range" presets={stayPresets()} onSelect={setRange} />}
         >

package/src/components/datepicker/examples/full-width-form.tsx CHANGED Viewed

@@ -23,21 +23,14 @@ export function FullWidthFormDateExample() {
   return (
     <div style={fieldStack}>
-      <Label.Root htmlFor="fw-date-trigger" size="m">
-        Дата визита
-      </Label.Root>
+      <Label.Root htmlFor="fw-date-trigger">Дата визита</Label.Root>
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.Trigger asChild>
-          <Button.Root fullWidth id="fw-date-trigger" mode="stroke" size="m" variant="neutral">
+          <Button.Root fullWidth id="fw-date-trigger" mode="stroke" variant="neutral">
             {triggerText}
           </Button.Root>
         </Popover.Trigger>
-        <Popover.Content
-          align="start"
-          className="min-w-[min(100vw-2rem,36rem)]"
-          insetPadding="none"
-          side="bottom"
-        >
+        <Popover.Content align="start" className="min-w-[min(100vw-2rem,36rem)]" side="bottom">
           <Datepicker.Shell className="min-w-0">
             <Datepicker.Calendar
               locale={ru}

package/src/components/datepicker/examples/range-report.tsx CHANGED Viewed

@@ -30,11 +30,11 @@ export function ReportRangeExample() {
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
-        <Button.Root mode="stroke" size="m" variant="neutral">
+        <Button.Root mode="stroke" variant="neutral">
           Report period
         </Button.Root>
       </Popover.Trigger>
-      <Popover.Content align="start" insetPadding="none" side="bottom">
+      <Popover.Content align="start" side="bottom">
         <Datepicker.Shell
           presets={
             <Datepicker.Presets mode="range" presets={reportPresets()} onSelect={setRange} />

package/src/components/digit-input/examples/composition.tsx CHANGED Viewed

@@ -14,9 +14,9 @@ export default function DigitInputCompositionExample() {
         gap: "var(--prime-sys-spacing-m)",
       }}
     >
-      <Label.Root size="m">Код из сообщения</Label.Root>
-      <DigitInput.Root length={4} size="m" />
-      <Hint.Root size="m" variant="default">
+      <Label.Root>Код из сообщения</Label.Root>
+      <DigitInput.Root length={4} />
+      <Hint.Root variant="default">
         Вставьте код из буфера: цифры распределятся по ячейкам с текущей позиции.
       </Hint.Root>
     </div>

package/src/components/digit-input/examples/error-state.tsx CHANGED Viewed

@@ -4,11 +4,9 @@ import { DigitInput, Hint, Label } from "prime-ui-kit";
 export default function ErrorStateExample() {
   return (
     <>
-      <Label.Root size="m">Код подтверждения</Label.Root>
-      <DigitInput.Root defaultValue="1230" hasError length={4} size="m" />
-      <Hint.Root size="m" variant="error">
-        Неверный код. Запросите новый или проверьте ввод.
-      </Hint.Root>
+      <Label.Root>Код подтверждения</Label.Root>
+      <DigitInput.Root defaultValue="1230" hasError length={4} />
+      <Hint.Root variant="error">Неверный код. Запросите новый или проверьте ввод.</Hint.Root>
     </>
   );
 }

package/src/components/digit-input/examples/otp-login.tsx CHANGED Viewed

@@ -7,9 +7,9 @@ export default function OtpLoginExample() {
   return (
     <>
-      <Label.Root size="m">Код из SMS</Label.Root>
-      <DigitInput.Root length={6} size="m" value={code} onChange={setCode} />
-      <Hint.Root size="m" variant="default">
+      <Label.Root>Код из SMS</Label.Root>
+      <DigitInput.Root length={6} value={code} onChange={setCode} />
+      <Hint.Root variant="default">
         Вставьте код из сообщения — цифры заполнят ячейки с текущей позиции.
       </Hint.Root>
     </>

package/src/components/digit-input/examples/resend-and-clear.tsx CHANGED Viewed

@@ -7,15 +7,9 @@ export default function ResendAndClearExample() {
   return (
     <>
-      <Label.Root size="m">Код</Label.Root>
-      <DigitInput.Root length={4} size="m" value={code} onChange={setCode} />
-      <Button.Root
-        mode="stroke"
-        size="m"
-        type="button"
-        variant="neutral"
-        onClick={() => setCode("")}
-      >
+      <Label.Root>Код</Label.Root>
+      <DigitInput.Root length={4} value={code} onChange={setCode} />
+      <Button.Root mode="stroke" type="button" variant="neutral" onClick={() => setCode("")}>
         Отправить снова
       </Button.Root>
     </>

package/src/components/digit-input/examples/verification-step.tsx CHANGED Viewed

@@ -8,12 +8,12 @@ export default function VerificationStepExample() {
   return (
     <>
-      <Label.Root size="m">Код из письма</Label.Root>
-      <DigitInput.Root length={6} size="m" value={code} onChange={setCode} />
-      <Button.Root disabled={!isComplete} size="m" type="button" variant="primary">
+      <Label.Root>Код из письма</Label.Root>
+      <DigitInput.Root length={6} value={code} onChange={setCode} />
+      <Button.Root disabled={!isComplete} type="button" variant="primary">
         Продолжить
       </Button.Root>
-      <Hint.Root size="m" variant="default">
+      <Hint.Root variant="default">
         Введите шестизначный код со страницы подтверждения email.
       </Hint.Root>
     </>

package/src/components/divider/examples/card-splits.tsx CHANGED Viewed

@@ -12,14 +12,14 @@ export default function DividerCardSplitsExample() {
           <p className={s.muted}>Ships in 2–3 business days</p>
         </div>
-        <Divider.Root size="m" />
+        <Divider.Root />
         <p className={s.body}>
           Subtotal, shipping, and tax are estimated until checkout. You can edit the cart before
           paying.
         </p>
-        <Divider.Root size="m">Total</Divider.Root>
+        <Divider.Root>Total</Divider.Root>
         <p className={s.body}>$128.00 USD</p>
       </div>
     </section>

package/src/components/divider/examples/inset-stack.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ export default function DividerInsetStackExample() {
           </div>
         </div>
-        <Divider.Root size="m" />
+        <Divider.Root />
         <div className={s.rowWithIcon}>
           <span className={s.iconStub} aria-hidden />

package/src/components/divider/examples/line-spacing-column.tsx CHANGED Viewed

@@ -10,14 +10,14 @@ export default function DividerLineSpacingColumnExample() {
   return (
     <div className={`${s.shell} ${s.stack}`}>
       <p className={s.body}>First block in a column with gap-driven spacing.</p>
-      <Divider.Root variant="line-spacing" size="m" />
+      <Divider.Root variant="line-spacing" />
       <p className={s.body}>Second block — the divider is only a marker between siblings.</p>
-      <Divider.Root variant="line-spacing" size="m" />
+      <Divider.Root variant="line-spacing" />
       <div className={s.toolbar}>
         <button className={s.toolbarBtn} type="button">
           One
         </button>
-        <Divider.Root orientation="vertical" size="m" />
+        <Divider.Root orientation="vertical" />
         <button className={s.toolbarBtn} type="button">
           Two
         </button>

package/src/components/divider/examples/section-breaks.tsx CHANGED Viewed

@@ -12,14 +12,10 @@ export default function DividerSectionBreaksExample() {
           <p className={s.muted}>Profile and security</p>
         </header>
-        <Divider.Root variant="text" size="m">
-          General
-        </Divider.Root>
+        <Divider.Root variant="text">General</Divider.Root>
         <p className={s.body}>Name, email, and language preferences apply across all workspaces.</p>
-        <Divider.Root variant="text" size="m">
-          Notifications
-        </Divider.Root>
+        <Divider.Root variant="text">Notifications</Divider.Root>
         <p className={s.body}>Choose channels for product updates and billing alerts.</p>
       </div>
     </article>

package/src/components/drawer/COMPONENT.md CHANGED Viewed

@@ -31,7 +31,7 @@ export function DrawerMinimal() {
   return (
     <Drawer.Root>
       <Drawer.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Open
         </Button.Root>
       </Drawer.Trigger>