@a-type/ui 6.0.29 → 6.0.30

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 (6) hide show
  1. package/dist/components/divider/Divider.js +4 -5
  2. package/dist/components/divider/Divider.js.map +1 -1
  3. package/dist/components/divider/Divider.module.css +10 -0
  4. package/package.json +1 -1
  5. package/src/components/divider/Divider.module.css +10 -0
  6. package/src/components/divider/Divider.tsx +5 -9
package/dist/components/divider/Divider.js CHANGED
@@ -11,14 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { Separator as BaseSeparator } from '@base-ui/react/separator';
14
- import classNames from 'clsx';
15
- import { withClassName } from '../../hooks/withClassName.js';
16
- const DividerBase = withClassName(BaseSeparator, 'relative h-1px w-full bg-neutral-ink');
14
+ import clsx from 'clsx';
15
+ import cls from './Divider.module.css';
17
16
  export const Divider = function Divider(_a) {
18
17
  var { ref, compensate, padded, className } = _a, props = __rest(_a, ["ref", "compensate", "padded", "className"]);
19
- return (_jsx(DividerBase, Object.assign({ ref: ref, style: {
18
+ return (_jsx(BaseSeparator, Object.assign({ ref: ref, style: {
20
19
  left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
21
20
  width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
22
- } }, props, { className: classNames(padded && 'my-4', className) })));
21
+ } }, props, { "data-padded": padded ? '' : undefined, className: clsx(cls.root, className) })));
23
22
  };
24
23
  //# sourceMappingURL=Divider.js.map
package/dist/components/divider/Divider.js.map CHANGED
@@ -1 +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"}
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,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 ADDED
@@ -0,0 +1,10 @@
1
+ .root {
2
+ position: relative;
3
+ height: --fn-literal(1px);
4
+ width: 100%;
5
+ @apply --mx-bg(var(--m-color-neutral-ink));
6
+
7
+ &[data-padded] {
8
+ margin-block: var(--m-space-md);
9
+ }
10
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.29",
3
+ "version": "6.0.30",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/divider/Divider.module.css ADDED
@@ -0,0 +1,10 @@
1
+ .root {
2
+ position: relative;
3
+ height: --fn-literal(1px);
4
+ width: 100%;
5
+ @apply --mx-bg(var(--m-color-neutral-ink));
6
+
7
+ &[data-padded] {
8
+ margin-block: var(--m-space-md);
9
+ }
10
+ }
package/src/components/divider/Divider.tsx CHANGED
@@ -1,12 +1,7 @@
1
1
  import { Separator as BaseSeparator } from '@base-ui/react/separator';
2
- import classNames from 'clsx';
2
+ import clsx from 'clsx';
3
3
  import { HTMLAttributes } from 'react';
4
- import { withClassName } from '../../hooks/withClassName.js';
5
-
6
- const DividerBase = withClassName(
7
- BaseSeparator,
8
- 'relative h-1px w-full bg-neutral-ink',
9
- );
4
+ import cls from './Divider.module.css';
10
5
 
11
6
  export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
12
7
  compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -23,14 +18,15 @@ export const Divider = function Divider({
23
18
  ref?: React.Ref<HTMLDivElement>;
24
19
  }) {
25
20
  return (
26
- <DividerBase
21
+ <BaseSeparator
27
22
  ref={ref}
28
23
  style={{
29
24
  left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
30
25
  width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
31
26
  }}
32
27
  {...props}
33
- className={classNames(padded && 'my-4', className)}
28
+ data-padded={padded ? '' : undefined}
29
+ className={clsx(cls.root, className)}
34
30
  />
35
31
  );
36
32
  };