@a-type/ui 6.0.28 → 6.0.30

package/dist/components/divider/Divider.js

@@ -11,14 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
-import classNames from 'clsx';
-import { withClassName } from '../../hooks/withClassName.js';
-const DividerBase = withClassName(BaseSeparator, 'relative h-1px w-full bg-neutral-ink');
+import clsx from 'clsx';
+import cls from './Divider.module.css';
 export const Divider = function Divider(_a) {
     var { ref, compensate, padded, className } = _a, props = __rest(_a, ["ref", "compensate", "padded", "className"]);
-    return (_jsx(DividerBase, Object.assign({ ref: ref, style: {
+    return (_jsx(BaseSeparator, Object.assign({ ref: ref, style: {
             left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
             width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
-        } }, props, { className: classNames(padded && 'my-4', className) })));
+        } }, props, { "data-padded": padded ? '' : undefined, className: clsx(cls.root, className) })));
 };
 //# sourceMappingURL=Divider.js.map

package/dist/components/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/divider/Divider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,WAAW,GAAG,aAAa,CAChC,aAAa,EACb,sCAAsC,CACtC,CAAC;AAOF,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,EAQvC;QARuC,EACvC,GAAG,EACH,UAAU,EACV,MAAM,EACN,SAAS,OAIT,EAHG,KAAK,cAL+B,4CAMvC,CADQ;IAIR,OAAO,CACN,KAAC,WAAW,kBACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACN,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,aAAa,CAAC,CAAC,CAAC,SAAS;YAC9D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,YAAY,CAAC,CAAC,CAAC,SAAS;SACrE,IACG,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,MAAM,IAAI,MAAM,EAAE,SAAS,CAAC,IACjD,CACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/divider/Divider.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAOvC,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,EAQvC;QARuC,EACvC,GAAG,EACH,UAAU,EACV,MAAM,EACN,SAAS,OAIT,EAHG,KAAK,cAL+B,4CAMvC,CADQ;IAIR,OAAO,CACN,KAAC,aAAa,kBACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACN,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,aAAa,CAAC,CAAC,CAAC,SAAS;YAC9D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,eAAe,UAAU,YAAY,CAAC,CAAC,CAAC,SAAS;SACrE,IACG,KAAK,mBACI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IACnC,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/divider/Divider.module.css

@@ -0,0 +1,10 @@
+.root {
+	position: relative;
+	height: --fn-literal(1px);
+	width: 100%;
+	@apply --mx-bg(var(--m-color-neutral-ink));
+
+	&[data-padded] {
+		margin-block: var(--m-space-md);
+	}
+}

package/dist/css/arbor.css

@@ -347,19 +347,19 @@
 	--m-global-typography-baseLetterSpacing: 0;
 	--m-global-typography-darkModeWeightAdjustment: 0;
 	--m-global-typography-boldness: 0.5;
-	--m-easing-tight: cubic-bezier(calc(max(0, calc(1 * 0.5 * pow(2, -1)))), 0, calc(calc(1 * 0.5 * pow(2, -1)) / 2), 1);
-	--m-easing-medium: cubic-bezier(calc(max(0, calc(1 * 0.5 * pow(2, 0)))), 0, calc(calc(1 * 0.5 * pow(2, 0)) / 2), 1);
+	--m-easing-tight: cubic-bezier(0.7000000000000001, calc(0 - max(0, 0.5 - 0.5) * 0.6000000000000001), 0.05, calc(1 + max(0, 0.5 - 0.5) * 0.6000000000000001 * 2));
+	--m-easing-medium: cubic-bezier(0.55, calc(0 - max(0, 0.5 - 0.5) * 0.4), 0.1, calc(1 + max(0, 0.5 - 0.5) * 0.4 * 2));
 	--m-easing: var(--m-easing-medium);
-	--m-easing-loose: cubic-bezier(calc(max(0, calc(1 * 0.5 * pow(2, 1)))), 0, calc(calc(1 * 0.5 * pow(2, 1)) / 2), 1);
-	--m-easing-in-tight: cubic-bezier(calc(max(0, calc(1 * 0.5 * pow(2, -1)))), 0, calc(calc(1 * 0.5 * pow(2, -1))), 1);
-	--m-easing-in-medium: cubic-bezier(calc(max(0, calc(1 * 0.5 * pow(2, 0)))), 0, calc(calc(1 * 0.5 * pow(2, 0))), 1);
+	--m-easing-loose: cubic-bezier(0.4, calc(0 - max(0, 0.5 - 0.5) * 0.2), 0.15000000000000002, calc(1 + max(0, 0.5 - 0.5) * 0.2 * 2));
+	--m-easing-in-tight: cubic-bezier(0.6000000000000001, calc(0 - max(0, 0.5 - 0.5) * 0.4), 1, 1);
+	--m-easing-in-medium: cubic-bezier(0.4, calc(0 - max(0, 0.5 - 0.5) * 0.3), 1, 1);
 	--m-easing-in: var(--m-easing-in-medium);
-	--m-easing-in-loose: cubic-bezier(calc(max(0, calc(1 * 0.5 * pow(2, 1)))), 0, calc(calc(1 * 0.5 * pow(2, 1))), 1);
-	--m-easing-out-tight: cubic-bezier(0, 0, calc(calc(1 * 0.5 * pow(2, -1)) / 2), 1);
-	--m-easing-out-medium: cubic-bezier(0, 0, calc(calc(1 * 0.5 * pow(2, 0)) / 2), 1);
+	--m-easing-in-loose: cubic-bezier(0.2, calc(0 - max(0, 0.5 - 0.5) * 0.19999999999999998), 1, 1);
+	--m-easing-out-tight: cubic-bezier(0.30000000000000004, calc(1 + max(0, 0.5 - 0.5) * 2.2), 0.65, 1);
+	--m-easing-out-medium: cubic-bezier(0.2, calc(1 + max(0, 0.5 - 0.5) * 1.1), 0.55, 1);
 	--m-easing-out: var(--m-easing-out-medium);
-	--m-easing-out-loose: cubic-bezier(0, 0, calc(calc(1 * 0.5 * pow(2, 1)) / 2), 1);
-	--m-global-easing-bounciness: 1;
+	--m-easing-out-loose: cubic-bezier(0.1, calc(1 + max(0, 0.5 - 0.5) * 0.55), 0.45000000000000007, 1);
+	--m-global-easing-bounciness: 0.5;
 	--m-duration-short: calc(200ms * pow(2, -1) * 1);
 	--m-duration-medium: calc(200ms * pow(2, 0) * 1);
 	--m-duration: var(--m-duration-medium);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.28",
+  "version": "6.0.30",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.9",
-    "@arbor-css/core": "^0.0.132",
-    "@arbor-css/postcss": "^0.0.132",
+    "@arbor-css/core": "^0.0.133",
+    "@arbor-css/postcss": "^0.0.133",
     "@base-ui/react": "^1.4.1",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",

package/src/components/divider/Divider.module.css

@@ -0,0 +1,10 @@
+.root {
+	position: relative;
+	height: --fn-literal(1px);
+	width: 100%;
+	@apply --mx-bg(var(--m-color-neutral-ink));
+
+	&[data-padded] {
+		margin-block: var(--m-space-md);
+	}
+}

package/src/components/divider/Divider.tsx

@@ -1,12 +1,7 @@
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { HTMLAttributes } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-
-const DividerBase = withClassName(
-	BaseSeparator,
-	'relative h-1px w-full bg-neutral-ink',
-);
+import cls from './Divider.module.css';
 
 export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
 	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -23,14 +18,15 @@ export const Divider = function Divider({
 	ref?: React.Ref<HTMLDivElement>;
 }) {
 	return (
-		<DividerBase
+		<BaseSeparator
 			ref={ref}
 			style={{
 				left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
 				width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
 			}}
 			{...props}
-			className={classNames(padded && 'my-4', className)}
+			data-padded={padded ? '' : undefined}
+			className={clsx(cls.root, className)}
 		/>
 	);
 };