@akinon/ui-time-picker 1.1.8 → 1.1.10

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 (9) hide show
  1. package/dist/cjs/index.d.ts +18 -2
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +65 -2
  4. package/dist/cjs/types.d.ts +2 -1
  5. package/dist/esm/index.d.ts +18 -2
  6. package/dist/esm/index.d.ts.map +1 -1
  7. package/dist/esm/index.js +66 -3
  8. package/dist/esm/types.d.ts +2 -1
  9. package/package.json +5 -2
package/dist/cjs/index.d.ts CHANGED
@@ -1,6 +1,22 @@
1
+ import { IconName } from '@akinon/icons';
1
2
  import type { TimePickerProps as AntTimePickerProps } from 'antd';
2
3
  import * as React from 'react';
3
- export type TimePickerProps = AntTimePickerProps;
4
+ export type TimePickerProps = Omit<AntTimePickerProps, 'suffixIcon'> & {
5
+ /**
6
+ * The custom suffix icon. An `@akinon/icons` name renders an Akinon icon,
7
+ * any other node is rendered as is.
8
+ * @default clock
9
+ */
10
+ suffixIcon?: IconName | React.ReactNode;
11
+ /**
12
+ * The size of the suffix icon.
13
+ */
14
+ suffixIconSize?: string;
15
+ /**
16
+ * The color of the suffix icon.
17
+ */
18
+ suffixIconColor?: string;
19
+ };
4
20
  /**
5
21
  * TimePicker component for Akinon UI.
6
22
  *
@@ -19,5 +35,5 @@ export type TimePickerProps = AntTimePickerProps;
19
35
  * The TimePicker component is designed for both simple and advanced use cases, making it suitable for
20
36
  * enterprise-grade applications requiring precise time input functionality.
21
37
  */
22
- export declare const TimePicker: ({ ...restTimePickerProps }: TimePickerProps) => React.JSX.Element;
38
+ export declare const TimePicker: ({ suffixIcon, suffixIconSize, suffixIconColor, className, ...restTimePickerProps }: TimePickerProps) => React.JSX.Element;
23
39
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,GAAI,4BAA4B,eAAe,sBAMrE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,GAAG;IACrE;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAExC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,GAAI,oFAMxB,eAAe,sBAuFjB,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -12,6 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.TimePicker = void 0;
15
+ const icons_1 = require("@akinon/icons");
16
+ const ui_theme_1 = require("@akinon/ui-theme");
17
+ const cssinjs_1 = require("@ant-design/cssinjs");
15
18
  const antd_1 = require("antd");
16
19
  const React = require("react");
17
20
  /**
@@ -33,7 +36,67 @@ const React = require("react");
33
36
  * enterprise-grade applications requiring precise time input functionality.
34
37
  */
35
38
  const TimePicker = (_a) => {
36
- var restTimePickerProps = __rest(_a, []);
37
- return (React.createElement(antd_1.TimePicker, Object.assign({}, restTimePickerProps)));
39
+ var { suffixIcon = 'clock', suffixIconSize = '14px', suffixIconColor = 'var(--color-gray-500)', className } = _a, restTimePickerProps = __rest(_a, ["suffixIcon", "suffixIconSize", "suffixIconColor", "className"]);
40
+ const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
41
+ const { token, hashId } = (0, ui_theme_1.useToken)();
42
+ const timePickerToken = token.DatePicker;
43
+ const rootPrefix = getPrefixCls();
44
+ const prefixClsWithoutHash = `.${rootPrefix}-picker`;
45
+ const blockWithoutHash = `${rootPrefix}-time-picker`;
46
+ // antd styles these through the column, so match its selector depth
47
+ const timeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell ${prefixClsWithoutHash}-time-panel-cell-inner`;
48
+ const selectedTimeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell-selected ${prefixClsWithoutHash}-time-panel-cell-inner`;
49
+ const useStyle = (0, cssinjs_1.useStyleRegister)({
50
+ token: token,
51
+ path: ['TimePicker'],
52
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
53
+ theme: theme
54
+ }, () => {
55
+ const customTokens = (0, ui_theme_1.getSafeCustomTokens)(theme);
56
+ const { pickerPanel } = timePickerToken;
57
+ return {
58
+ [`:where(.${hashId})`]: {
59
+ [`&${prefixClsWithoutHash}.${blockWithoutHash}`]: {
60
+ width: customTokens.sizing.valueFull,
61
+ ['input']: {
62
+ fontWeight: timePickerToken.fontWeight
63
+ }
64
+ },
65
+ [`&${prefixClsWithoutHash}-dropdown`]: {
66
+ [`${prefixClsWithoutHash}-time-panel-container`]: {
67
+ // antd draws every panel divider with these two variables
68
+ [`--${rootPrefix}-color-split`]: pickerPanel.dividerColor,
69
+ [`--${rootPrefix}-line-width`]: customTokens.border.borderWidthThin,
70
+ background: timePickerToken.general.bgDarkBlue,
71
+ border: timePickerToken.general.wideBorder,
72
+ boxShadow: pickerPanel.shadow,
73
+ [`${timeCellCls}`]: {
74
+ fontSize: timePickerToken.general.fontSize,
75
+ fontWeight: pickerPanel.row.cellFontWeight,
76
+ color: pickerPanel.row.cellTextColor,
77
+ paddingInline: customTokens.sizing.valueZero,
78
+ textAlign: customTokens.typography.textAlignCenter
79
+ },
80
+ [`${selectedTimeCellCls}`]: {
81
+ background: pickerPanel.row.cellBg,
82
+ border: pickerPanel.row.cellBorder,
83
+ borderRadius: pickerPanel.row.cellBorderRadius
84
+ },
85
+ [`${prefixClsWithoutHash}-footer`]: {
86
+ [`${prefixClsWithoutHash}-now-btn`]: {
87
+ fontSize: pickerPanel.footer.fontSize,
88
+ fontWeight: customTokens.typography.fontWeightBold,
89
+ color: token.colorWhite,
90
+ padding: pickerPanel.footer.padding,
91
+ border: pickerPanel.footer.border,
92
+ borderRadius: pickerPanel.footer.borderRadius
93
+ }
94
+ }
95
+ }
96
+ }
97
+ }
98
+ };
99
+ });
100
+ return useStyle(React.createElement(antd_1.TimePicker, Object.assign({}, restTimePickerProps, { className: [blockWithoutHash, className].filter(Boolean).join(' '), suffixIcon: typeof suffixIcon === 'string' ? (React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } })) : (suffixIcon) })));
38
101
  };
39
102
  exports.TimePicker = TimePicker;
package/dist/cjs/types.d.ts CHANGED
@@ -149,7 +149,8 @@ export interface ITimePickerProps extends React.HTMLAttributes<HTMLDivElement> {
149
149
  showNow?: boolean;
150
150
 
151
151
  /**
152
- * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px
152
+ * To determine the size of the picker. Heights match the Input sizes: 40px
153
+ * for large and 26px for small, while the default middle size is 32px
153
154
  */
154
155
  size?: 'small' | 'middle' | 'large';
155
156
 
package/dist/esm/index.d.ts CHANGED
@@ -1,6 +1,22 @@
1
+ import { IconName } from '@akinon/icons';
1
2
  import type { TimePickerProps as AntTimePickerProps } from 'antd';
2
3
  import * as React from 'react';
3
- export type TimePickerProps = AntTimePickerProps;
4
+ export type TimePickerProps = Omit<AntTimePickerProps, 'suffixIcon'> & {
5
+ /**
6
+ * The custom suffix icon. An `@akinon/icons` name renders an Akinon icon,
7
+ * any other node is rendered as is.
8
+ * @default clock
9
+ */
10
+ suffixIcon?: IconName | React.ReactNode;
11
+ /**
12
+ * The size of the suffix icon.
13
+ */
14
+ suffixIconSize?: string;
15
+ /**
16
+ * The color of the suffix icon.
17
+ */
18
+ suffixIconColor?: string;
19
+ };
4
20
  /**
5
21
  * TimePicker component for Akinon UI.
6
22
  *
@@ -19,5 +35,5 @@ export type TimePickerProps = AntTimePickerProps;
19
35
  * The TimePicker component is designed for both simple and advanced use cases, making it suitable for
20
36
  * enterprise-grade applications requiring precise time input functionality.
21
37
  */
22
- export declare const TimePicker: ({ ...restTimePickerProps }: TimePickerProps) => React.JSX.Element;
38
+ export declare const TimePicker: ({ suffixIcon, suffixIconSize, suffixIconColor, className, ...restTimePickerProps }: TimePickerProps) => React.JSX.Element;
23
39
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,GAAI,4BAA4B,eAAe,sBAMrE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,GAAG;IACrE;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IAExC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,GAAI,oFAMxB,eAAe,sBAuFjB,CAAC"}
package/dist/esm/index.js CHANGED
@@ -9,7 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { TimePicker as AntTimePicker } from 'antd';
12
+ import { Icon } from '@akinon/icons';
13
+ import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
14
+ import { useStyleRegister } from '@ant-design/cssinjs';
15
+ import { ConfigProvider, TimePicker as AntTimePicker } from 'antd';
13
16
  import * as React from 'react';
14
17
  /**
15
18
  * TimePicker component for Akinon UI.
@@ -30,6 +33,66 @@ import * as React from 'react';
30
33
  * enterprise-grade applications requiring precise time input functionality.
31
34
  */
32
35
  export const TimePicker = (_a) => {
33
- var restTimePickerProps = __rest(_a, []);
34
- return (React.createElement(AntTimePicker, Object.assign({}, restTimePickerProps)));
36
+ var { suffixIcon = 'clock', suffixIconSize = '14px', suffixIconColor = 'var(--color-gray-500)', className } = _a, restTimePickerProps = __rest(_a, ["suffixIcon", "suffixIconSize", "suffixIconColor", "className"]);
37
+ const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
38
+ const { token, hashId } = useToken();
39
+ const timePickerToken = token.DatePicker;
40
+ const rootPrefix = getPrefixCls();
41
+ const prefixClsWithoutHash = `.${rootPrefix}-picker`;
42
+ const blockWithoutHash = `${rootPrefix}-time-picker`;
43
+ // antd styles these through the column, so match its selector depth
44
+ const timeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell ${prefixClsWithoutHash}-time-panel-cell-inner`;
45
+ const selectedTimeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell-selected ${prefixClsWithoutHash}-time-panel-cell-inner`;
46
+ const useStyle = useStyleRegister({
47
+ token: token,
48
+ path: ['TimePicker'],
49
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
50
+ theme: theme
51
+ }, () => {
52
+ const customTokens = getSafeCustomTokens(theme);
53
+ const { pickerPanel } = timePickerToken;
54
+ return {
55
+ [`:where(.${hashId})`]: {
56
+ [`&${prefixClsWithoutHash}.${blockWithoutHash}`]: {
57
+ width: customTokens.sizing.valueFull,
58
+ ['input']: {
59
+ fontWeight: timePickerToken.fontWeight
60
+ }
61
+ },
62
+ [`&${prefixClsWithoutHash}-dropdown`]: {
63
+ [`${prefixClsWithoutHash}-time-panel-container`]: {
64
+ // antd draws every panel divider with these two variables
65
+ [`--${rootPrefix}-color-split`]: pickerPanel.dividerColor,
66
+ [`--${rootPrefix}-line-width`]: customTokens.border.borderWidthThin,
67
+ background: timePickerToken.general.bgDarkBlue,
68
+ border: timePickerToken.general.wideBorder,
69
+ boxShadow: pickerPanel.shadow,
70
+ [`${timeCellCls}`]: {
71
+ fontSize: timePickerToken.general.fontSize,
72
+ fontWeight: pickerPanel.row.cellFontWeight,
73
+ color: pickerPanel.row.cellTextColor,
74
+ paddingInline: customTokens.sizing.valueZero,
75
+ textAlign: customTokens.typography.textAlignCenter
76
+ },
77
+ [`${selectedTimeCellCls}`]: {
78
+ background: pickerPanel.row.cellBg,
79
+ border: pickerPanel.row.cellBorder,
80
+ borderRadius: pickerPanel.row.cellBorderRadius
81
+ },
82
+ [`${prefixClsWithoutHash}-footer`]: {
83
+ [`${prefixClsWithoutHash}-now-btn`]: {
84
+ fontSize: pickerPanel.footer.fontSize,
85
+ fontWeight: customTokens.typography.fontWeightBold,
86
+ color: token.colorWhite,
87
+ padding: pickerPanel.footer.padding,
88
+ border: pickerPanel.footer.border,
89
+ borderRadius: pickerPanel.footer.borderRadius
90
+ }
91
+ }
92
+ }
93
+ }
94
+ }
95
+ };
96
+ });
97
+ return useStyle(React.createElement(AntTimePicker, Object.assign({}, restTimePickerProps, { className: [blockWithoutHash, className].filter(Boolean).join(' '), suffixIcon: typeof suffixIcon === 'string' ? (React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } })) : (suffixIcon) })));
35
98
  };
package/dist/esm/types.d.ts CHANGED
@@ -149,7 +149,8 @@ export interface ITimePickerProps extends React.HTMLAttributes<HTMLDivElement> {
149
149
  showNow?: boolean;
150
150
 
151
151
  /**
152
- * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px
152
+ * To determine the size of the picker. Heights match the Input sizes: 40px
153
+ * for large and 26px for small, while the default middle size is 32px
153
154
  */
154
155
  size?: 'small' | 'middle' | 'large';
155
156
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-time-picker",
3
- "version": "1.1.8",
3
+ "version": "1.1.10",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -9,7 +9,10 @@
9
9
  "dist"
10
10
  ],
11
11
  "dependencies": {
12
- "antd": "^5.27.0"
12
+ "@ant-design/cssinjs": "^1.24.0",
13
+ "antd": "^5.27.0",
14
+ "@akinon/icons": "1.5.0",
15
+ "@akinon/ui-theme": "1.3.3"
13
16
  },
14
17
  "devDependencies": {
15
18
  "clean-package": "2.2.0",