@akinon/ui-divider 0.2.0 → 0.4.0

package/dist/cjs/index.d.ts

@@ -1,9 +1,4 @@
-import './index.css';
-import type { DividerProps as AntDividerProps } from 'antd/lib/divider';
 import * as React from 'react';
-type DividerProps = Omit<AntDividerProps, 'prefixCls' | 'className' | 'classNames' | 'rootClassName' | 'style' | 'styles'> & {
-    margin?: boolean;
-};
-export declare const Divider: ({ children, margin, type, ...antdProps }: DividerProps) => React.JSX.Element;
-export {};
+import type { DividerProps } from './types';
+export declare const Divider: ({ children, plainOffset, ...antdProps }: DividerProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,YAAY,GAAG,IAAI,CACtB,eAAe,EACb,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,OAAO,GACP,QAAQ,CACX,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAGzB,eAAO,MAAM,OAAO,6CAKjB,YAAY,sBAUd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,4CAIjB,YAAY,sBA6Cd,CAAC"}

package/dist/cjs/index.js

@@ -12,12 +12,44 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
-require("./index.css");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
-// TODO better handle classname injection
 const Divider = (_a) => {
-    var { children, margin, type } = _a, antdProps = __rest(_a, ["children", "margin", "type"]);
-    return (React.createElement(antd_1.Divider, Object.assign({}, antdProps, { type: type, className: `ant-divider-custom ${margin === false && 'no-margin'}` }), children));
+    var { children, plainOffset } = _a, antdProps = __rest(_a, ["children", "plainOffset"]);
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const dividerToken = token.Divider;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Divider'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixClsWithoutHash = `.${getPrefixCls()}-divider`;
+        const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+        return {
+            [`${prefixCls}-plain`]: {
+                [`&${prefixCls}-horizontal${prefixClsWithoutHash}-with-text-left`]: {
+                    '&:before': {
+                        width: plainOffset
+                            ? `${plainOffset - dividerToken.textPaddingInline}px`
+                            : 'auto',
+                        marginInlineStart: plainOffset ? `-${plainOffset}px` : '-40px'
+                    },
+                    '&:after': {
+                        width: '100%',
+                        marginInlineStart: 0,
+                        marginInlineEnd: plainOffset ? `-${plainOffset}px` : '-40px'
+                    }
+                },
+                [`${prefixClsWithoutHash}-with-text`]: {
+                    fontWeight: dividerToken === null || dividerToken === void 0 ? void 0 : dividerToken.fontWeight
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(antd_1.Divider, Object.assign({}, antdProps), children));
 };
 exports.Divider = Divider;

package/dist/esm/index.d.ts

@@ -1,9 +1,4 @@
-import './index.css';
-import type { DividerProps as AntDividerProps } from 'antd/lib/divider';
 import * as React from 'react';
-type DividerProps = Omit<AntDividerProps, 'prefixCls' | 'className' | 'classNames' | 'rootClassName' | 'style' | 'styles'> & {
-    margin?: boolean;
-};
-export declare const Divider: ({ children, margin, type, ...antdProps }: DividerProps) => React.JSX.Element;
-export {};
+import type { DividerProps } from './types';
+export declare const Divider: ({ children, plainOffset, ...antdProps }: DividerProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,YAAY,GAAG,IAAI,CACtB,eAAe,EACb,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,OAAO,GACP,QAAQ,CACX,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAGzB,eAAO,MAAM,OAAO,6CAKjB,YAAY,sBAUd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,4CAIjB,YAAY,sBA6Cd,CAAC"}

package/dist/esm/index.js

@@ -9,11 +9,43 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import './index.css';
-import { Divider as AntDivider } from 'antd';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Divider as AntDivider } from 'antd';
 import * as React from 'react';
-// TODO better handle classname injection
 export const Divider = (_a) => {
-    var { children, margin, type } = _a, antdProps = __rest(_a, ["children", "margin", "type"]);
-    return (React.createElement(AntDivider, Object.assign({}, antdProps, { type: type, className: `ant-divider-custom ${margin === false && 'no-margin'}` }), children));
+    var { children, plainOffset } = _a, antdProps = __rest(_a, ["children", "plainOffset"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const dividerToken = token.Divider;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Divider'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixClsWithoutHash = `.${getPrefixCls()}-divider`;
+        const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
+        return {
+            [`${prefixCls}-plain`]: {
+                [`&${prefixCls}-horizontal${prefixClsWithoutHash}-with-text-left`]: {
+                    '&:before': {
+                        width: plainOffset
+                            ? `${plainOffset - dividerToken.textPaddingInline}px`
+                            : 'auto',
+                        marginInlineStart: plainOffset ? `-${plainOffset}px` : '-40px'
+                    },
+                    '&:after': {
+                        width: '100%',
+                        marginInlineStart: 0,
+                        marginInlineEnd: plainOffset ? `-${plainOffset}px` : '-40px'
+                    }
+                },
+                [`${prefixClsWithoutHash}-with-text`]: {
+                    fontWeight: dividerToken === null || dividerToken === void 0 ? void 0 : dividerToken.fontWeight
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(AntDivider, Object.assign({}, antdProps), children));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-divider",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.11.0"
+    "antd": "5.17.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.3.0",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/typescript-config": "0.1.0"
+    "@akinon/ui-theme": "0.6.0",
+    "@akinon/typescript-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -40,10 +39,6 @@
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
     "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/cjs/index.css

@@ -1,13 +0,0 @@
-.akinon-divider-custom {
-  height: 1.5em;
-  border-color: var(--color-gray-900);
-
-  &::after,
-  &::before {
-    background-color: var(--color-gray-900);
-  }
-
-  &.no-margin {
-    margin: 0;
-  }
-}

package/dist/esm/index.css

@@ -1,13 +0,0 @@
-.akinon-divider-custom {
-  height: 1.5em;
-  border-color: var(--color-gray-900);
-
-  &::after,
-  &::before {
-    background-color: var(--color-gray-900);
-  }
-
-  &.no-margin {
-    margin: 0;
-  }
-}