@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import { type MenuProps, type MenuSemanticPart } from '../menu/menu-render';
+import './context-menu.css';
+export type ContextMenuSemanticPart = MenuSemanticPart;
+export interface ContextMenuProps {
+    menu: MenuProps;
+    /** Element whose right-click (long-press on touch) opens the menu. */
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Merged onto the floating content. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<ContextMenuSemanticPart>;
+    styles?: SemanticStyles<ContextMenuSemanticPart>;
+}
+export declare function ContextMenu({ menu, children, open, onOpenChange, disabled, className, style, classNames, styles, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import { useMenuController } from "../menu/menu-render.js";
+import "./context-menu.css";
+import * as __rspack_external__radix_ui_react_context_menu_293d36e3 from "@radix-ui/react-context-menu";
+const CM = {
+    Item: __rspack_external__radix_ui_react_context_menu_293d36e3.Item,
+    CheckboxItem: __rspack_external__radix_ui_react_context_menu_293d36e3.CheckboxItem,
+    RadioGroup: __rspack_external__radix_ui_react_context_menu_293d36e3.RadioGroup,
+    RadioItem: __rspack_external__radix_ui_react_context_menu_293d36e3.RadioItem,
+    Label: __rspack_external__radix_ui_react_context_menu_293d36e3.Label,
+    Separator: __rspack_external__radix_ui_react_context_menu_293d36e3.Separator,
+    Group: __rspack_external__radix_ui_react_context_menu_293d36e3.Group,
+    Sub: __rspack_external__radix_ui_react_context_menu_293d36e3.Sub,
+    SubTrigger: __rspack_external__radix_ui_react_context_menu_293d36e3.SubTrigger,
+    SubContent: __rspack_external__radix_ui_react_context_menu_293d36e3.SubContent,
+    Portal: __rspack_external__radix_ui_react_context_menu_293d36e3.Portal,
+    ItemIndicator: __rspack_external__radix_ui_react_context_menu_293d36e3.ItemIndicator
+};
+function ContextMenu(t0) {
+    const $ = c(22);
+    const { menu, children, open, onOpenChange, disabled, className, style, classNames, styles } = t0;
+    const { size, disabled: ctxDisabled } = useTaoConfig();
+    const resolvedDisabled = disabled ?? ctxDisabled;
+    let t1;
+    if ($[0] !== classNames || $[1] !== styles) {
+        t1 = {
+            classNames,
+            styles
+        };
+        $[0] = classNames;
+        $[1] = styles;
+        $[2] = t1;
+    } else t1 = $[2];
+    const content = useMenuController(menu, CM, t1);
+    let t2;
+    if ($[3] !== children || $[4] !== resolvedDisabled) {
+        t2 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Trigger, {
+            disabled: resolvedDisabled,
+            "data-tao-context-menu-trigger": "",
+            children: children
+        });
+        $[3] = children;
+        $[4] = resolvedDisabled;
+        $[5] = t2;
+    } else t2 = $[5];
+    const t3 = classNames?.content;
+    let t4;
+    if ($[6] !== className || $[7] !== t3) {
+        t4 = cx(t3, className);
+        $[6] = className;
+        $[7] = t3;
+        $[8] = t4;
+    } else t4 = $[8];
+    const t5 = styles?.content;
+    let t6;
+    if ($[9] !== style || $[10] !== t5) {
+        t6 = {
+            ...t5,
+            ...style
+        };
+        $[9] = style;
+        $[10] = t5;
+        $[11] = t6;
+    } else t6 = $[11];
+    let t7;
+    if ($[12] !== content || $[13] !== size || $[14] !== t4 || $[15] !== t6) {
+        t7 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Portal, {
+            children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Content, {
+                    "data-tao-menu-content": "",
+                    "data-tao-context-menu": "",
+                    "data-tao-size": size,
+                    className: t4,
+                    style: t6,
+                    children: content
+                })
+            })
+        });
+        $[12] = content;
+        $[13] = size;
+        $[14] = t4;
+        $[15] = t6;
+        $[16] = t7;
+    } else t7 = $[16];
+    let t8;
+    if ($[17] !== onOpenChange || $[18] !== open || $[19] !== t2 || $[20] !== t7) {
+        t8 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_context_menu_293d36e3.Root, {
+            open: open,
+            onOpenChange: onOpenChange,
+            children: [
+                t2,
+                t7
+            ]
+        });
+        $[17] = onOpenChange;
+        $[18] = open;
+        $[19] = t2;
+        $[20] = t7;
+        $[21] = t8;
+    } else t8 = $[21];
+    return t8;
+}
+export { ContextMenu };

package/dist/components/date-picker/calendar/month-grid.d.ts

@@ -5,5 +5,5 @@ interface MonthGridProps {
     onSelect: (date: Dayjs) => void;
     disabledDate?: (date: Dayjs) => boolean;
 }
-export declare function MonthGrid({ viewDate, value, onSelect, disabledDate }: MonthGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthGrid({ viewDate, value, onSelect, disabledDate, }: MonthGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/calendar/time-panel.d.ts

@@ -8,5 +8,5 @@ interface TimePanelProps {
     /** Increment to force scroll-to-selected even when the value hasn't changed */
     scrollKey?: number;
 }
-export declare function TimePanel({ hour, minute, second, onChange, config, scrollKey }: TimePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePanel({ hour, minute, second, onChange, config, scrollKey, }: TimePanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/calendar/year-grid.d.ts

@@ -5,5 +5,5 @@ interface YearGridProps {
     onSelect: (date: Dayjs) => void;
     disabledDate?: (date: Dayjs) => boolean;
 }
-export declare function YearGrid({ viewDate, value, onSelect, disabledDate }: YearGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function YearGrid({ viewDate, value, onSelect, disabledDate, }: YearGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/date-picker.css

@@ -87,7 +87,6 @@
       --tao-color-fill-quaternary: color-mix(in oklch, var(--tao-color-text-base) 3%, var(--tao-color-bg-base));
       --tao-color-bg-layout: color-mix(in oklch, var(--tao-color-text-base) 4%, var(--tao-color-bg-base));
       --tao-color-border: color-mix(in oklch, var(--tao-color-text-base) 18%, var(--tao-color-bg-base));
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
       --tao-control-outline: color-mix(in oklch, var(--tao-color-primary) 10%, transparent);
       --tao-color-error-outline: color-mix(in oklch, var(--tao-color-error) 10%, transparent);
       --tao-color-warning-outline: color-mix(in oklch, var(--tao-color-warning) 10%, transparent);
@@ -350,11 +349,16 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -572,8 +576,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -584,16 +588,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -676,6 +671,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -758,6 +757,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -770,6 +773,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -785,6 +792,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -814,6 +829,24 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
+}
+
+[data-tao-control] {
+  box-sizing: border-box;
+  width: var(--tao-control-width);
+}
+
+[data-tao-control][data-tao-range-trigger] {
+  width: var(--tao-control-range-width);
+}
+
+[data-tao-form-field] [data-tao-control] {
+  width: 100%;
 }
 
 [data-tao-control] {
@@ -821,8 +854,8 @@
 }
 
 [data-tao-control][data-tao-variant="outlined"] {
-  background: var(--tao-color-bg-container);
   border: var(--tao-line-width) solid var(--tao-color-border);
+  background: none;
 }
 
 [data-tao-control][data-tao-variant="outlined"]:hover:not([data-disabled]):not(:focus-within):not([data-state="open"]) {
@@ -848,6 +881,25 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
+  border-color: var(--tao-warning);
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    border-color: color-mix(in oklch, var(--tao-color-warning) 80%, white);
+  }
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -892,6 +944,26 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="filled"][data-tao-warning] {
+  background: var(--tao-warning-bg);
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    background: color-mix(in oklch, var(--tao-color-warning) 10%, var(--tao-color-bg-base));
+  }
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
+  background: var(--tao-color-bg-container);
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -923,7 +995,6 @@
 button[data-tao-picker-trigger] {
   align-items: center;
   gap: var(--tao-padding-xs);
-  width: 100%;
   font-family: var(--tao-font-family);
   cursor: pointer;
   appearance: none;
@@ -1009,7 +1080,7 @@ button[data-tao-picker-trigger][data-tao-size="large"] {
   border: var(--tao-line-width) solid var(--tao-color-border);
   border-radius: var(--tao-radius-lg);
   box-shadow: var(--tao-box-shadow-secondary);
-  z-index: 1000;
+  z-index: var(--tao-z-index-popup);
   width: auto;
   animation: tao-picker-in var(--tao-motion-duration-fast) cubic-bezier(.16, 1, .3, 1);
   overflow: hidden;
@@ -1451,7 +1522,6 @@ button[data-tao-picker-footer-btn][data-tao-primary]:hover {
 }
 
 button[data-tao-range-trigger] {
-  width: 100%;
   font-family: var(--tao-font-family);
   cursor: pointer;
   appearance: none;

package/dist/components/date-picker/date-picker.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
 import { Drawer } from "../drawer/drawer.js";
 import { useIsMobile } from "../select/use-is-mobile.js";
 import { CalendarGrid } from "./calendar/calendar-grid.js";
@@ -568,12 +568,14 @@ function DatePicker(t0) {
     let t42;
     if ($[145] !== panelContent) {
         t42 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Portal, {
-            children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
-                "data-tao-picker-dropdown": "",
-                sideOffset: 4,
-                align: "start",
-                onOpenAutoFocus: _temp3,
-                children: panelContent
+            children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                    "data-tao-picker-dropdown": "",
+                    sideOffset: 4,
+                    align: "start",
+                    onOpenAutoFocus: _temp3,
+                    children: panelContent
+                })
             })
         });
         $[145] = panelContent;

package/dist/components/date-picker/range-picker.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import dayjs from "dayjs";
 import { useCallback, useState } from "react";
-import { useTaoConfig } from "../../provider/tao-provider.js";
+import { TaoPortalScope, useTaoConfig } from "../../provider/tao-provider.js";
 import { Drawer } from "../drawer/drawer.js";
 import { useIsMobile } from "../select/use-is-mobile.js";
 import { CalendarGrid } from "./calendar/calendar-grid.js";
@@ -270,12 +270,14 @@ function RangePicker({ value, onChange, picker = 'date', showTime, format: forma
                 children: trigger
             }),
             /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Portal, {
-                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
-                    "data-tao-picker-dropdown": "",
-                    sideOffset: 4,
-                    align: "start",
-                    onOpenAutoFocus: (e_1)=>e_1.preventDefault(),
-                    children: panelContent
+                children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                    children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                        "data-tao-picker-dropdown": "",
+                        sideOffset: 4,
+                        align: "start",
+                        onOpenAutoFocus: (e_1)=>e_1.preventDefault(),
+                        children: panelContent
+                    })
                 })
             })
         ]

package/dist/components/drawer/drawer.css

@@ -307,11 +307,16 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -529,8 +534,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -541,16 +546,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -633,6 +629,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +715,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +731,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -742,6 +750,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -771,16 +787,31 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
 }
 
 [data-tao-drawer-overlay] {
-  z-index: 999;
+  z-index: var(--tao-z-index-drawer);
   animation: tao-fade-in var(--tao-motion-duration-mid) ease-out;
-  background: oklch(0% 0 0 / .4);
+  background: oklch(0% 0 0 / .1);
   position: fixed;
   inset: 0;
 }
 
+@supports (backdrop-filter: blur(4px)) {
+  [data-tao-drawer-overlay] {
+    backdrop-filter: blur(4px);
+  }
+}
+
+[data-tao-drawer][data-state="closed"], [data-tao-drawer-overlay][data-state="closed"] {
+  display: none;
+}
+
 @keyframes tao-fade-in {
   0% {
     opacity: 0;
@@ -792,7 +823,7 @@
 }
 
 [data-tao-drawer] {
-  z-index: 1000;
+  z-index: calc(var(--tao-z-index-drawer) + 1);
   background: var(--tao-color-bg-elevated);
   box-shadow: var(--tao-box-shadow-secondary);
   font-family: var(--tao-font-family);
@@ -894,6 +925,18 @@
   line-height: 1.4;
 }
 
+[data-tao-drawer-actions] {
+  align-items: center;
+  gap: var(--tao-padding-xs);
+  margin-inline-start: auto;
+  display: flex;
+}
+
+[data-tao-drawer-extra] {
+  align-items: center;
+  display: flex;
+}
+
 button[data-tao-drawer-close] {
   border-radius: var(--tao-radius-sm);
   width: 32px;
@@ -928,6 +971,76 @@ button[data-tao-drawer-close]:focus-visible {
   overflow-y: auto;
 }
 
+[data-tao-drawer-dragger] {
+  z-index: 1;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  transition: background-color var(--tao-motion-duration-fast) ease-out;
+  background-color: #0000;
+  position: absolute;
+}
+
+[data-tao-drawer-dragger]:hover {
+  background-color: var(--tao-color-primary);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-drawer-dragger]:hover {
+    background-color: color-mix(in oklch, var(--tao-color-primary) 20%, transparent);
+  }
+}
+
+[data-tao-drawer-dragger]:active {
+  background-color: var(--tao-color-primary);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-drawer-dragger]:active {
+    background-color: color-mix(in oklch, var(--tao-color-primary) 30%, transparent);
+  }
+}
+
+[data-tao-drawer-dragger][data-tao-placement="right"], [data-tao-drawer-dragger][data-tao-placement="left"] {
+  cursor: col-resize;
+  width: 4px;
+  top: 0;
+  bottom: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="right"] {
+  left: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="left"] {
+  right: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="bottom"], [data-tao-drawer-dragger][data-tao-placement="top"] {
+  cursor: row-resize;
+  height: 4px;
+  left: 0;
+  right: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="bottom"] {
+  top: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="top"] {
+  bottom: 0;
+}
+
+[data-tao-drawer-footer] {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--tao-padding-xs);
+  padding: var(--tao-padding) var(--tao-padding-lg);
+  border-block-start: var(--tao-line-width) solid var(--tao-color-border-secondary);
+  flex-shrink: 0;
+  display: flex;
+}
+
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false