moduix 0.11.0 → 0.11.2

package/dist/components/Radio/Radio.css

@@ -0,0 +1,141 @@
+@layer ui.components {
+  .-lu0yq_field {
+    align-items: center;
+    gap: var(--radio-gap, var(--spacing-2));
+    vertical-align: middle;
+    cursor: pointer;
+    display: inline-flex;
+
+    &:has(.-lu0yq_radio[data-disabled]), &:has(.-lu0yq_radio[data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  .-lu0yq_radio {
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--_radio-size, 1.25rem);
+    height: var(--_radio-size, 1.25rem);
+    border: var(--radio-border-width, var(--border-width-sm)) solid
+      var(--radio-border-color, var(--color-border));
+    border-radius: var(--radius-full);
+    background-color: var(--radio-bg, var(--color-background));
+    color: var(--radio-indicator-color, var(--color-primary-foreground));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--radio-transition, var(--transition-default)),
+      border-color var(--radio-transition, var(--transition-default)),
+      color var(--radio-transition, var(--transition-default)),
+      opacity var(--radio-transition, var(--transition-default));
+    outline: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+
+    &[data-checked] {
+      border-color: var(--radio-border-color-checked, var(--color-primary));
+      background-color: var(--radio-bg-checked, var(--color-primary));
+    }
+
+    &:focus-visible {
+      outline: var(--radio-focus-ring-width, var(--border-width-sm)) solid
+        var(--radio-focus-ring-color, var(--color-ring));
+      outline-offset: var(--radio-focus-ring-offset, var(--border-width-sm));
+    }
+
+    @media (hover: hover) {
+      &[data-unchecked]:not([data-readonly]):hover {
+        background-color: var(--radio-bg-hover, var(--color-accent));
+      }
+    }
+
+    &[data-readonly] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      opacity: var(--radio-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-size="xs"] {
+      --_radio-size: var(--radio-size-xs, .875rem);
+      --_radio-indicator-size: var(--radio-indicator-size-xs, .25rem);
+    }
+
+    &[data-size="sm"] {
+      --_radio-size: var(--radio-size-sm, 1rem);
+      --_radio-indicator-size: var(--radio-indicator-size-sm, .375rem);
+    }
+
+    &[data-size="md"] {
+      --_radio-size: var(--radio-size-md, 1.25rem);
+      --_radio-indicator-size: var(--radio-indicator-size-md, .5rem);
+    }
+
+    &[data-size="lg"] {
+      --_radio-size: var(--radio-size-lg, 1.5rem);
+      --_radio-indicator-size: var(--radio-indicator-size-lg, .625rem);
+    }
+
+    &[data-size="xl"] {
+      --_radio-size: var(--radio-size-xl, 1.75rem);
+      --_radio-indicator-size: var(--radio-indicator-size-xl, .75rem);
+    }
+  }
+
+  .-lu0yq_indicator {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    &[data-unchecked] {
+      display: none;
+    }
+  }
+
+  .-lu0yq_icon {
+    width: var(--_radio-indicator-size, .5rem);
+    height: var(--_radio-indicator-size, .5rem);
+    border: var(--radio-indicator-border-width, 0) solid
+      var(--radio-indicator-border-color, currentColor);
+    border-radius: var(--radio-indicator-radius, var(--radius-full));
+    background-color: currentColor;
+    display: block;
+  }
+
+  .-lu0yq_label {
+    color: var(--radio-label-color, var(--color-foreground));
+    font-size: var(--radio-label-font-size, var(--text-sm));
+    font-weight: var(--radio-label-font-weight, var(--weight-medium));
+    line-height: var(--radio-label-line-height, var(--line-height-text-sm));
+  }
+
+  .-lu0yq_group {
+    gap: var(--radio-group-gap, var(--spacing-2));
+    color: var(--radio-group-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .-lu0yq_groupLabel {
+    color: var(--radio-group-label-color, var(--radio-group-color, var(--color-foreground)));
+    font-size: var(--radio-group-label-font-size, var(--text-sm));
+    font-weight: var(--radio-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--radio-group-label-line-height, var(--line-height-text-sm));
+  }
+
+  .-lu0yq_groupList {
+    align-items: flex-start;
+    gap: var(--radio-group-list-gap, var(--spacing-2));
+    flex-direction: column;
+    display: flex;
+  }
+}

package/dist/components/Radio/Radio.d.ts

@@ -1,15 +1,40 @@
-import { Radio as RadioPrimitive } from '@base-ui/react/radio';
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+
+//#region src/components/Radio/Radio.d.ts
 type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-declare const Radio: import('react').ForwardRefExoticComponent<Omit<RadioPrimitive.Root.Props<any> & {
-    size?: RadioSize;
-}, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-declare function RadioIndicator({ className, children, ...props }: RadioPrimitive.Indicator.Props): import("react").JSX.Element;
-declare function RadioIndicatorIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function RadioField({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
-declare function RadioLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react").JSX.Element;
-declare function RadioGroupLabel({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function RadioGroupList({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export { Radio, RadioIndicator, RadioIndicatorIcon, RadioField, RadioLabel, RadioGroup, RadioGroupLabel, RadioGroupList, };
+declare const Radio$1: import("react").ForwardRefExoticComponent<Omit<Radio.Root.Props<any> & {
+  size?: RadioSize;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare function RadioIndicator({
+  className,
+  children,
+  ...props
+}: Radio.Indicator.Props): import("react").JSX.Element;
+declare function RadioIndicatorIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function RadioField({
+  className,
+  ...props
+}: ComponentProps<'label'>): import("react").JSX.Element;
+declare function RadioLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function RadioGroup$1({
+  className,
+  ...props
+}: RadioGroup.Props): import("react").JSX.Element;
+declare function RadioGroupLabel({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function RadioGroupList({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Radio$1 as Radio, RadioField, RadioGroup$1 as RadioGroup, RadioGroupLabel, RadioGroupList, RadioIndicator, RadioIndicatorIcon, RadioLabel };

package/dist/components/Radio/Radio.js

@@ -0,0 +1,71 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Radio_module_default from "./Radio.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/Radio/Radio.tsx
+const Radio$1 = forwardRef(function Radio$2({ className, size = "md", children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		ref,
+		"data-slot": "radio-root",
+		"data-size": size,
+		className: mergeClassName(className, Radio_module_default.radio),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(RadioIndicator, {})
+	});
+});
+function RadioIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Indicator, {
+		"data-slot": "radio-indicator",
+		className: mergeClassName(className, Radio_module_default.indicator),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(RadioIndicatorIcon, {})
+	});
+}
+function RadioIndicatorIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "radio-indicator-icon",
+		className: clsx(Radio_module_default.icon, className),
+		...props
+	});
+}
+function RadioField({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "radio-field",
+		className: clsx(Radio_module_default.field, className),
+		...props
+	});
+}
+function RadioLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "radio-label",
+		className: clsx(Radio_module_default.label, className),
+		...props
+	});
+}
+function RadioGroup$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group-root",
+		className: mergeClassName(className, Radio_module_default.group),
+		...props
+	});
+}
+function RadioGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "radio-group-label",
+		className: clsx(Radio_module_default.groupLabel, className),
+		...props
+	});
+}
+function RadioGroupList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "radio-group-list",
+		className: clsx(Radio_module_default.groupList, className),
+		...props
+	});
+}
+//#endregion
+export { Radio$1 as Radio, RadioField, RadioGroup$1 as RadioGroup, RadioGroupLabel, RadioGroupList, RadioIndicator, RadioIndicatorIcon, RadioLabel };

package/dist/components/Radio/Radio.module.js

@@ -0,0 +1,14 @@
+import './Radio.css';
+//#region src/components/Radio/Radio.module.css
+var Radio_module_default = {
+	"field": "-lu0yq_field",
+	"group": "-lu0yq_group",
+	"groupLabel": "-lu0yq_groupLabel",
+	"groupList": "-lu0yq_groupList",
+	"icon": "-lu0yq_icon",
+	"indicator": "-lu0yq_indicator",
+	"label": "-lu0yq_label",
+	"radio": "-lu0yq_radio"
+};
+//#endregion
+export { Radio_module_default as default };

package/dist/components/Radio/index.d.ts

@@ -1 +1 @@
-export { Radio, RadioIndicator, RadioIndicatorIcon, RadioField, RadioLabel, RadioGroup, RadioGroupLabel, RadioGroupList, } from './Radio';
+import { Radio, RadioField, RadioGroup, RadioGroupLabel, RadioGroupList, RadioIndicator, RadioIndicatorIcon, RadioLabel } from "./Radio.js";

package/dist/components/Rating/Rating.css

@@ -0,0 +1,79 @@
+@layer ui.components {
+  .wQtr8G_root {
+    align-items: center;
+    gap: var(--rating-gap, var(--spacing-1));
+    color: var(--rating-color, var(--color-muted-foreground));
+    display: inline-flex;
+  }
+
+  .wQtr8G_root[data-disabled] {
+    opacity: var(--rating-disabled-opacity, var(--opacity-disabled));
+  }
+
+  .wQtr8G_item {
+    border-radius: var(--radius-sm);
+    color: inherit;
+    cursor: pointer;
+    transition: color var(--rating-transition, var(--transition-default)),
+      opacity var(--rating-transition, var(--transition-default));
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+  }
+
+  .wQtr8G_item[data-filled] {
+    color: var(--rating-active-color, var(--color-primary));
+  }
+
+  .wQtr8G_item[data-readonly] {
+    cursor: default;
+  }
+
+  .wQtr8G_item[data-disabled] {
+    pointer-events: none;
+  }
+
+  .wQtr8G_item:focus-visible {
+    outline: var(--rating-focus-ring-width, var(--border-width-sm)) solid
+      var(--rating-focus-ring-color, var(--color-ring));
+    outline-offset: var(--rating-focus-ring-offset, .125rem);
+  }
+
+  .wQtr8G_root[data-size="xs"] {
+    --_rating-icon-size: var(--rating-icon-size-xs, .875rem);
+  }
+
+  .wQtr8G_root[data-size="sm"] {
+    --_rating-icon-size: var(--rating-icon-size-sm, 1rem);
+  }
+
+  .wQtr8G_root[data-size="md"] {
+    --_rating-icon-size: var(--rating-icon-size-md, 1.25rem);
+  }
+
+  .wQtr8G_root[data-size="lg"] {
+    --_rating-icon-size: var(--rating-icon-size-lg, 1.5rem);
+  }
+
+  .wQtr8G_root[data-size="xl"] {
+    --_rating-icon-size: var(--rating-icon-size-xl, 1.75rem);
+  }
+
+  .wQtr8G_icon {
+    width: var(--_rating-icon-size, var(--rating-icon-size-md, 1.25rem));
+    height: var(--_rating-icon-size, var(--rating-icon-size-md, 1.25rem));
+    fill: #0000;
+    stroke: currentColor;
+    transition: fill var(--rating-transition, var(--transition-default)),
+      stroke var(--rating-transition, var(--transition-default));
+  }
+
+  .wQtr8G_item[data-filled] .wQtr8G_icon {
+    fill: currentColor;
+  }
+}

package/dist/components/Rating/Rating.d.ts

@@ -1,12 +1,14 @@
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { RadioGroup } from "@base-ui/react/radio-group";
+
+//#region src/components/Rating/Rating.d.ts
 type RatingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type RatingProps = Omit<RadioGroupPrimitive.Props, 'children' | 'defaultValue' | 'orientation' | 'onValueChange' | 'value'> & {
-    defaultValue?: number;
-    max?: number;
-    onValueChange?: (value: number) => void;
-    size?: RatingSize;
-    value?: number;
+type RatingProps = Omit<RadioGroup.Props, 'children' | 'defaultValue' | 'orientation' | 'onValueChange' | 'value'> & {
+  defaultValue?: number;
+  max?: number;
+  onValueChange?: (value: number) => void;
+  size?: RatingSize;
+  value?: number;
 };
-declare const Rating: import('react').ForwardRefExoticComponent<Omit<RatingProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Rating };
-export type { RatingProps, RatingSize };
+declare const Rating: import("react").ForwardRefExoticComponent<Omit<RatingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Rating, type RatingProps, type RatingSize };

package/dist/components/Rating/Rating.js

@@ -0,0 +1,61 @@
+import { RatingStarIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import Rating_module_default from "./Rating.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/Rating/Rating.tsx
+const DEFAULT_MAX = 5;
+const Rating = forwardRef(function Rating({ className, defaultValue, disabled, max = DEFAULT_MAX, onValueChange, readOnly, size = "md", value, ...props }, ref) {
+	const normalizedMax = normalizeMax(max);
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => normalizeRatingValue(defaultValue, normalizedMax));
+	const currentValue = normalizeRatingValue(value ?? uncontrolledValue, normalizedMax);
+	const handleValueChange = (nextValue) => {
+		const normalizedValue = normalizeRatingValue(Number(nextValue), normalizedMax);
+		if (normalizedValue == null) return;
+		if (value === void 0) setUncontrolledValue(normalizedValue);
+		onValueChange?.(normalizedValue);
+	};
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		ref,
+		"data-slot": "rating-root",
+		"data-size": size,
+		className: mergeClassName(className, Rating_module_default.root),
+		disabled,
+		onValueChange: handleValueChange,
+		readOnly,
+		value: currentValue?.toString(),
+		...props,
+		children: Array.from({ length: normalizedMax }, (_, index) => {
+			const ratingValue = index + 1;
+			const isFilled = currentValue != null && ratingValue <= currentValue;
+			return /* @__PURE__ */ jsx(Radio.Root, {
+				"aria-label": readOnly ? `${ratingValue} out of ${normalizedMax}` : `Rate ${ratingValue} out of ${normalizedMax}`,
+				"data-empty": isFilled ? void 0 : "",
+				"data-filled": isFilled ? "" : void 0,
+				"data-slot": "rating-item",
+				className: Rating_module_default.item,
+				disabled,
+				readOnly,
+				value: ratingValue.toString(),
+				children: /* @__PURE__ */ jsx(RatingStarIcon, {
+					"data-slot": "rating-icon",
+					className: Rating_module_default.icon
+				})
+			}, ratingValue);
+		})
+	});
+});
+function normalizeMax(max) {
+	if (!Number.isFinite(max)) return DEFAULT_MAX;
+	return Math.max(1, Math.floor(max));
+}
+function normalizeRatingValue(value, max) {
+	if (value == null || !Number.isFinite(value)) return;
+	const normalizedValue = Math.floor(value);
+	if (normalizedValue < 1) return;
+	return Math.min(normalizedValue, max);
+}
+//#endregion
+export { Rating };

package/dist/components/Rating/Rating.module.js

@@ -0,0 +1,9 @@
+import './Rating.css';
+//#region src/components/Rating/Rating.module.css
+var Rating_module_default = {
+	"icon": "wQtr8G_icon",
+	"item": "wQtr8G_item",
+	"root": "wQtr8G_root"
+};
+//#endregion
+export { Rating_module_default as default };

package/dist/components/Rating/index.d.ts

@@ -1,2 +1 @@
-export { Rating } from './Rating';
-export type { RatingProps, RatingSize } from './Rating';
+import { Rating, RatingProps, RatingSize } from "./Rating.js";

package/dist/components/ScrollArea/ScrollArea.css

@@ -0,0 +1,205 @@
+@layer ui.components {
+  .cjUAMq_root {
+    box-sizing: border-box;
+    width: var(--scroll-area-width, 100%);
+    height: var(--scroll-area-height, 100%);
+    color: var(--scroll-area-color, var(--color-foreground));
+    position: relative;
+  }
+
+  .cjUAMq_viewport {
+    box-sizing: border-box;
+    border-radius: var(--scroll-area-radius, var(--radius-md));
+    background-color: var(--scroll-area-bg, transparent);
+    outline: 0;
+    width: 100%;
+    height: 100%;
+
+    .cjUAMq_root[data-fade="vertical"] &, .cjUAMq_root[data-fade="both"] & {
+      mask-image: linear-gradient(to bottom,
+        transparent 0,
+        black
+          min(var(--scroll-area-fade-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+            var(--scroll-area-overflow-y-start, 0px)),
+        black
+          calc(100% -
+              min(var(--scroll-area-fade-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                var(--scroll-area-overflow-y-end, 0px))),
+        transparent 100%);
+      mask-repeat: no-repeat;
+    }
+
+    .cjUAMq_root[data-fade="horizontal"] & {
+      mask-image: linear-gradient(to right,
+        transparent 0,
+        black
+          min(var(--scroll-area-fade-inline-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+            var(--scroll-area-overflow-x-start, 0px)),
+        black
+          calc(100% -
+              min(var(--scroll-area-fade-inline-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                var(--scroll-area-overflow-x-end, 0px))),
+        transparent 100%);
+      mask-repeat: no-repeat;
+    }
+
+    .cjUAMq_root:dir(rtl)[data-fade="horizontal"] & {
+      mask-image: linear-gradient(to left,
+        transparent 0,
+        black
+          min(var(--scroll-area-fade-inline-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+            var(--scroll-area-overflow-x-start, 0px)),
+        black
+          calc(100% -
+              min(var(--scroll-area-fade-inline-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                var(--scroll-area-overflow-x-end, 0px))),
+        transparent 100%);
+    }
+
+    .cjUAMq_root[data-fade="both"] & {
+      mask-image: linear-gradient(to bottom,
+          transparent 0,
+          black
+            min(var(--scroll-area-fade-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+              var(--scroll-area-overflow-y-start, 0px)),
+          black
+            calc(100% -
+                min(var(--scroll-area-fade-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                  var(--scroll-area-overflow-y-end, 0px))),
+          transparent 100%),
+        linear-gradient(to right,
+          transparent 0,
+          black
+            min(var(--scroll-area-fade-inline-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+              var(--scroll-area-overflow-x-start, 0px)),
+          black
+            calc(100% -
+                min(var(--scroll-area-fade-inline-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                  var(--scroll-area-overflow-x-end, 0px))),
+          transparent 100%);
+      mask-composite: intersect;
+    }
+
+    .cjUAMq_root:dir(rtl)[data-fade="both"] & {
+      mask-image: linear-gradient(to bottom,
+          transparent 0,
+          black
+            min(var(--scroll-area-fade-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+              var(--scroll-area-overflow-y-start, 0px)),
+          black
+            calc(100% -
+                min(var(--scroll-area-fade-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                  var(--scroll-area-overflow-y-end, 0px))),
+          transparent 100%),
+        linear-gradient(to left,
+          transparent 0,
+          black
+            min(var(--scroll-area-fade-inline-start-size, var(--scroll-area-fade-size, var(--spacing-10))),
+              var(--scroll-area-overflow-x-start, 0px)),
+          black
+            calc(100% -
+                min(var(--scroll-area-fade-inline-end-size, var(--scroll-area-fade-size, var(--spacing-10))),
+                  var(--scroll-area-overflow-x-end, 0px))),
+          transparent 100%);
+    }
+
+    &:focus-visible {
+      outline: var(--scroll-area-focus-ring-width, var(--border-width-sm)) solid
+        var(--scroll-area-focus-ring-color, var(--color-ring));
+      outline-offset: var(--scroll-area-focus-ring-offset, -1px);
+    }
+  }
+
+  .cjUAMq_content {
+    box-sizing: border-box;
+    padding: var(--scroll-area-content-padding, 0);
+    display: block;
+  }
+
+  .cjUAMq_scrollbar {
+    --_scroll-area-scrollbar-margin: var(--scroll-area-scrollbar-margin, calc(var(--spacing-1) / 2));
+    --_scroll-area-scrollbar-hit-area-size: var(--scroll-area-scrollbar-hit-area-size, 1.25rem);
+    box-sizing: border-box;
+    padding: var(--scroll-area-scrollbar-padding, 0);
+    border-radius: var(--scroll-area-scrollbar-radius, var(--radius-md));
+    background-color: var(--scroll-area-scrollbar-bg, transparent);
+    opacity: var(--scroll-area-scrollbar-hidden-opacity, 0);
+    pointer-events: none;
+    user-select: none;
+    touch-action: none;
+    transition: opacity var(--scroll-area-transition, var(--transition-default));
+    justify-content: center;
+    display: flex;
+    position: absolute;
+
+    &:before {
+      content: "";
+      position: absolute;
+    }
+
+    &[data-orientation="vertical"] {
+      top: 0;
+      inset-inline-end: 0;
+      bottom: var(--scroll-area-corner-height, 0px);
+      width: var(--scroll-area-scrollbar-size, .375rem);
+      margin-block: var(--_scroll-area-scrollbar-margin);
+      margin-inline-end: var(--_scroll-area-scrollbar-margin);
+
+      &:before {
+        width: var(--_scroll-area-scrollbar-hit-area-size);
+        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &[data-orientation="horizontal"] {
+      inset-inline-start: 0;
+      inset-inline-end: var(--scroll-area-corner-width, 0px);
+      height: var(--scroll-area-scrollbar-size, .375rem);
+      margin-inline: var(--_scroll-area-scrollbar-margin);
+      flex-direction: column;
+      margin-block-end: var(--_scroll-area-scrollbar-margin);
+      bottom: 0;
+
+      &:before {
+        width: 100%;
+        height: var(--_scroll-area-scrollbar-hit-area-size);
+        bottom: 50%;
+        left: 0;
+        right: 0;
+        transform: translateY(50%);
+      }
+    }
+
+    &[data-hovering], &[data-scrolling] {
+      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      pointer-events: auto;
+    }
+
+    &[data-scrolling] {
+      transition-duration: 0s;
+    }
+  }
+
+  .cjUAMq_thumb {
+    box-sizing: border-box;
+    border-radius: var(--scroll-area-thumb-radius, var(--radius-full));
+    background-color: var(--scroll-area-thumb-bg, var(--color-border));
+
+    &[data-orientation="vertical"] {
+      width: var(--scroll-area-thumb-width, 100%);
+      min-height: var(--scroll-area-thumb-min-size, 1.5rem);
+    }
+
+    &[data-orientation="horizontal"] {
+      height: var(--scroll-area-thumb-height, 100%);
+      min-width: var(--scroll-area-thumb-min-size, 1.5rem);
+    }
+  }
+
+  .cjUAMq_corner {
+    box-sizing: border-box;
+    background-color: var(--scroll-area-corner-bg, var(--scroll-area-scrollbar-bg, transparent));
+  }
+}