npm - @akinon/ui-divider - Versions diffs - 0.3.0 → 0.5.0 - Mend

@akinon/ui-divider 0.3.0 → 0.5.0

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 (11) hide show

package/dist/cjs/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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/cjs/types.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+export type DividerProps = {
+  /**
+   * Select the type of divider.
+   * @default 'horizontal'
+   */
+  type?: 'horizontal' | 'vertical';
+  /**
+   * Select the orientation of divider.
+   * @default 'left'
+   */
+  orientation?: 'left' | 'right' | 'center';
+  /**
+   * The margin of divider relative to orientation.
+   */
+  orientationMargin?: string | number;
+  /**
+   * Whether the divider is plain.
+   * @default false
+   */
+  plain?: boolean;
+  /**
+   * Whether the divider is dashed.
+   * @default false
+   */
+  dashed?: boolean;
+  /**
+   * The negative offset of plain divider.
+   * Use this prop to set the negative inline margin of plain divider.
+   */
+  plainOffset?: number;
+  /**
+   * The class name of the divider.
+   */
+  className?: string;
+  /**
+   * The root class name of the divider.
+   */
+  rootClassName?: string;
+  /**
+   * The children of the divider.
+   */
+  children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+};

package/dist/esm/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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/dist/esm/types.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+export type DividerProps = {
+  /**
+   * Select the type of divider.
+   * @default 'horizontal'
+   */
+  type?: 'horizontal' | 'vertical';
+  /**
+   * Select the orientation of divider.
+   * @default 'left'
+   */
+  orientation?: 'left' | 'right' | 'center';
+  /**
+   * The margin of divider relative to orientation.
+   */
+  orientationMargin?: string | number;
+  /**
+   * Whether the divider is plain.
+   * @default false
+   */
+  plain?: boolean;
+  /**
+   * Whether the divider is dashed.
+   * @default false
+   */
+  dashed?: boolean;
+  /**
+   * The negative offset of plain divider.
+   * Use this prop to set the negative inline margin of plain divider.
+   */
+  plainOffset?: number;
+  /**
+   * The class name of the divider.
+   */
+  className?: string;
+  /**
+   * The root class name of the divider.
+   */
+  rootClassName?: string;
+  /**
+   * The children of the divider.
+   */
+  children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-divider",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -16,9 +16,8 @@
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/typescript-config": "0.2.0"
+    "@akinon/ui-theme": "0.7.0",
+    "@akinon/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,12 +37,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" 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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;
-  }
-}