@akinon/ui-checkbox 0.3.0 → 0.5.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,6 @@
-import type { CheckboxProps as AntCheckboxProps } from 'antd';
 import * as React from 'react';
-export type CheckboxProps = AntCheckboxProps;
+import type { CheckboxGroupProps, CheckboxProps } from './types';
 export declare const Checkbox: ({ children, ...restCheckboxProps }: CheckboxProps) => React.JSX.Element;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export type * from './types';
 //# 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,KAAK,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAE9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAE7C,eAAO,MAAM,QAAQ,uCAAwC,aAAa,sBAMzE,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,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEjE,eAAO,MAAM,QAAQ,uCAAwC,aAAa,sBAgCzE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAwB,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAE/E,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -11,11 +11,31 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
+exports.CheckboxGroup = exports.Checkbox = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const Checkbox = (_a) => {
     var { children } = _a, restCheckboxProps = __rest(_a, ["children"]);
-    return (React.createElement(antd_1.Checkbox, Object.assign({}, restCheckboxProps), children));
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const checkboxToken = token.Checkbox;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Checkbox'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-checkbox`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-checkbox`;
+        return {
+            [`${prefixCls}-wrapper:has(${prefixClsWithoutHash}-checked)`]: {
+                color: checkboxToken.colorChecked
+            }
+        };
+    });
+    return useStyle(React.createElement(antd_1.Checkbox, Object.assign({}, restCheckboxProps), children));
 };
 exports.Checkbox = Checkbox;
+exports.CheckboxGroup = antd_1.Checkbox.Group;

package/dist/cjs/types.d.ts

@@ -0,0 +1,68 @@
+import { type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+
+export type CheckboxValueType = string | number | boolean;
+
+export interface CheckboxProps {
+  className?: string;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  title?: string;
+  onChange?: (e: CheckboxChangeEvent) => void;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+  onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  value?: CheckboxValueType;
+  tabIndex?: number;
+  name?: string;
+  children?: React.ReactNode;
+  id?: string;
+  autoFocus?: boolean;
+  type?: string;
+  skipGroup?: boolean;
+  required?: boolean;
+  indeterminate?: boolean;
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+  checked: boolean;
+}
+
+export interface CheckboxChangeEvent {
+  target: CheckboxChangeEventTarget;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  nativeEvent: MouseEvent;
+}
+
+export interface CheckboxOptionType<
+  T extends CheckboxValueType = CheckboxValueType
+> {
+  label: React.ReactNode;
+  value: T;
+  disabled?: boolean;
+  title?: string;
+  id?: string;
+  onChange?: (e: CheckboxChangeEvent) => void;
+  required?: boolean;
+}
+
+export interface CheckboxGroupProps<
+  T extends CheckboxValueType = CheckboxValueType
+> {
+  className?: string;
+  options?: (CheckboxOptionType<T> | string | number)[];
+  disabled?: boolean;
+  name?: string;
+  defaultValue?: T[];
+  value?: T[];
+  onChange?: (checkedValue: T[]) => void;
+  children?: React.ReactNode;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,6 @@
-import type { CheckboxProps as AntCheckboxProps } from 'antd';
 import * as React from 'react';
-export type CheckboxProps = AntCheckboxProps;
+import type { CheckboxGroupProps, CheckboxProps } from './types';
 export declare const Checkbox: ({ children, ...restCheckboxProps }: CheckboxProps) => React.JSX.Element;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export type * from './types';
 //# 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,KAAK,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAE9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAE7C,eAAO,MAAM,QAAQ,uCAAwC,aAAa,sBAMzE,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,kBAAkB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEjE,eAAO,MAAM,QAAQ,uCAAwC,aAAa,sBAgCzE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAwB,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAE/E,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -9,9 +9,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Checkbox as AntCheckbox } from 'antd';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { Checkbox as AntCheckbox, ConfigProvider } from 'antd';
 import * as React from 'react';
 export const Checkbox = (_a) => {
     var { children } = _a, restCheckboxProps = __rest(_a, ["children"]);
-    return (React.createElement(AntCheckbox, Object.assign({}, restCheckboxProps), children));
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const checkboxToken = token.Checkbox;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Checkbox'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-checkbox`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-checkbox`;
+        return {
+            [`${prefixCls}-wrapper:has(${prefixClsWithoutHash}-checked)`]: {
+                color: checkboxToken.colorChecked
+            }
+        };
+    });
+    return useStyle(React.createElement(AntCheckbox, Object.assign({}, restCheckboxProps), children));
 };
+export const CheckboxGroup = AntCheckbox.Group;

package/dist/esm/types.d.ts

@@ -0,0 +1,68 @@
+import { type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+
+export type CheckboxValueType = string | number | boolean;
+
+export interface CheckboxProps {
+  className?: string;
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  title?: string;
+  onChange?: (e: CheckboxChangeEvent) => void;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+  onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  value?: CheckboxValueType;
+  tabIndex?: number;
+  name?: string;
+  children?: React.ReactNode;
+  id?: string;
+  autoFocus?: boolean;
+  type?: string;
+  skipGroup?: boolean;
+  required?: boolean;
+  indeterminate?: boolean;
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+  checked: boolean;
+}
+
+export interface CheckboxChangeEvent {
+  target: CheckboxChangeEventTarget;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  nativeEvent: MouseEvent;
+}
+
+export interface CheckboxOptionType<
+  T extends CheckboxValueType = CheckboxValueType
+> {
+  label: React.ReactNode;
+  value: T;
+  disabled?: boolean;
+  title?: string;
+  id?: string;
+  onChange?: (e: CheckboxChangeEvent) => void;
+  required?: boolean;
+}
+
+export interface CheckboxGroupProps<
+  T extends CheckboxValueType = CheckboxValueType
+> {
+  className?: string;
+  options?: (CheckboxOptionType<T> | string | number)[];
+  disabled?: boolean;
+  name?: string;
+  defaultValue?: T[];
+  value?: T[];
+  onChange?: (checkedValue: T[]) => void;
+  children?: React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-checkbox",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.17.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/typescript-config": "0.2.0",
-    "@akinon/eslint-config": "0.1.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"
   }
 }