@tiny-design/react 1.3.0 → 1.4.0

package/es/time-picker/time-picker.js

@@ -8,6 +8,11 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/time-picker/time-picker.tsx
+const EMPTY_PENDING = {
+	h: null,
+	m: null,
+	s: null
+};
 function formatTime(date, format, use12Hours) {
 	let h = date.getHours();
 	const m = String(date.getMinutes()).padStart(2, "0");
@@ -35,6 +40,7 @@ const TimePicker = (props) => {
 	const { defaultValue, value, open: controlledOpen, format = "HH:mm:ss", use12Hours = false, hourStep = 1, minuteStep = 1, secondStep = 1, disabled = false, placeholder = locale.TimePicker.selectTime, allowClear = true, size = "md", inputReadOnly = true, disabledTime, hideDisabledOptions = false, loop = false, showNow = true, renderExtraFooter, suffixIcon, onChange, onOpenChange, className, style, prefixCls: customisedCls } = props;
 	const prefixCls = getPrefixCls("time-picker", useContext(ConfigContext).prefixCls, customisedCls);
 	const [date, setDate] = useState(value ?? defaultValue ?? null);
+	const [pending, setPending] = useState(EMPTY_PENDING);
 	const [open, setOpen] = useState(false);
 	const wrapperRef = useRef(null);
 	const dropdownRef = useRef(null);
@@ -51,6 +57,7 @@ const TimePicker = (props) => {
 			if (wrapperRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
 			if (controlledOpen === void 0) setOpen(false);
 			onOpenChange?.(false);
+			setPending(EMPTY_PENDING);
 		};
 		document.addEventListener("click", listener);
 		return () => document.removeEventListener("click", listener);
@@ -58,43 +65,51 @@ const TimePicker = (props) => {
 	const toggleOpen = useCallback((val) => {
 		if (controlledOpen === void 0) setOpen(val);
 		onOpenChange?.(val);
+		if (!val) setPending(EMPTY_PENDING);
 	}, [controlledOpen, onOpenChange]);
-	const updateTime = useCallback((type, num) => {
+	/** Build a Date from committed date + pending overrides */
+	const buildDate = useCallback((p) => {
 		const base = date ? new Date(date) : new Date(0, 0, 0, 0, 0, 0, 0);
-		if (type === "h") base.setHours(num);
-		else if (type === "m") base.setMinutes(num);
-		else base.setSeconds(num);
-		if (value === void 0) setDate(base);
-		onChange?.(base);
-	}, [
-		date,
-		value,
-		onChange
-	]);
+		if (p.h !== null) base.setHours(p.h);
+		if (p.m !== null) base.setMinutes(p.m);
+		if (p.s !== null) base.setSeconds(p.s);
+		return base;
+	}, [date]);
+	const updatePending = useCallback((type, num) => {
+		setPending((prev) => ({
+			...prev,
+			[type]: num
+		}));
+	}, []);
+	const commit = useCallback((newDate) => {
+		if (value === void 0) setDate(newDate);
+		onChange?.(newDate);
+		setPending(EMPTY_PENDING);
+	}, [value, onChange]);
 	const handleClear = (e) => {
 		e.stopPropagation();
 		if (value === void 0) setDate(null);
 		onChange?.(null);
+		setPending(EMPTY_PENDING);
 		toggleOpen(false);
 	};
 	const handleNow = () => {
-		const now = /* @__PURE__ */ new Date();
-		if (value === void 0) setDate(now);
-		onChange?.(now);
+		commit(/* @__PURE__ */ new Date());
 		toggleOpen(false);
 	};
 	const handleOk = () => {
+		if (pending.h !== null || pending.m !== null || pending.s !== null) commit(buildDate(pending));
 		toggleOpen(false);
 	};
+	const effectiveHour = pending.h ?? date?.getHours() ?? 0;
+	const effectiveMinute = pending.m ?? date?.getMinutes() ?? 0;
 	const disabled12 = useMemo(() => disabledTime?.() ?? {}, [disabledTime]);
 	const disabledHours = useMemo(() => disabled12.disabledHours?.() ?? [], [disabled12]);
-	const currentHour = date?.getHours() ?? 0;
-	const disabledMinutes = useMemo(() => disabled12.disabledMinutes?.(currentHour) ?? [], [disabled12, currentHour]);
-	const currentMinute = date?.getMinutes() ?? 0;
-	const disabledSeconds = useMemo(() => disabled12.disabledSeconds?.(currentHour, currentMinute) ?? [], [
+	const disabledMinutes = useMemo(() => disabled12.disabledMinutes?.(effectiveHour) ?? [], [disabled12, effectiveHour]);
+	const disabledSeconds = useMemo(() => disabled12.disabledSeconds?.(effectiveHour, effectiveMinute) ?? [], [
 		disabled12,
-		currentHour,
-		currentMinute
+		effectiveHour,
+		effectiveMinute
 	]);
 	const hours = generateSteps(24, hourStep);
 	const minutes = generateSteps(60, minuteStep);
@@ -102,12 +117,15 @@ const TimePicker = (props) => {
 	const filteredHours = hideDisabledOptions ? hours.filter((h) => !disabledHours.includes(h)) : hours;
 	const filteredMinutes = hideDisabledOptions ? minutes.filter((m) => !disabledMinutes.includes(m)) : minutes;
 	const filteredSeconds = hideDisabledOptions ? seconds.filter((s) => !disabledSeconds.includes(s)) : seconds;
-	const hasValue = date !== null;
-	const displayValue = hasValue ? formatTime(date, format, use12Hours) : "";
+	const hasPending = pending.h !== null || pending.m !== null || pending.s !== null;
+	const effectiveDate = (hasPending ? buildDate(pending) : null) ?? date;
+	const hasValue = effectiveDate !== null;
+	const displayValue = hasValue ? formatTime(effectiveDate, format, use12Hours) : "";
 	const cls = classNames(prefixCls, className, `${prefixCls}_${size}`, {
 		[`${prefixCls}_disabled`]: disabled,
 		[`${prefixCls}_open`]: isOpen,
-		[`${prefixCls}_has-value`]: hasValue
+		[`${prefixCls}_has-value`]: hasValue,
+		[`${prefixCls}_pending`]: hasPending
 	});
 	const renderOverlay = () => /* @__PURE__ */ jsxs("div", {
 		className: `${prefixCls}__dropdown`,
@@ -117,27 +135,30 @@ const TimePicker = (props) => {
 			children: [
 				/* @__PURE__ */ jsx(TimePanel, {
 					prefixCls,
-					value: date?.getHours() ?? 0,
+					value: date?.getHours() ?? null,
+					pendingValue: pending.h,
 					items: filteredHours,
 					disabledItems: hideDisabledOptions ? [] : disabledHours,
 					loop,
-					onChange: (h) => updateTime("h", h)
+					onChange: (h) => updatePending("h", h)
 				}),
 				showsMinutes(format) && /* @__PURE__ */ jsx(TimePanel, {
 					prefixCls,
-					value: date?.getMinutes() ?? 0,
+					value: date?.getMinutes() ?? null,
+					pendingValue: pending.m,
 					items: filteredMinutes,
 					disabledItems: hideDisabledOptions ? [] : disabledMinutes,
 					loop,
-					onChange: (m) => updateTime("m", m)
+					onChange: (m) => updatePending("m", m)
 				}),
 				showsSeconds(format) && /* @__PURE__ */ jsx(TimePanel, {
 					prefixCls,
-					value: date?.getSeconds() ?? 0,
+					value: date?.getSeconds() ?? null,
+					pendingValue: pending.s,
 					items: filteredSeconds,
 					disabledItems: hideDisabledOptions ? [] : disabledSeconds,
 					loop,
-					onChange: (s) => updateTime("s", s)
+					onChange: (s) => updatePending("s", s)
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {

package/es/time-picker/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","names":["Popup"],"sources":["../../src/time-picker/time-picker.tsx"],"sourcesContent":["import { useEffect, useState, useRef, useCallback, useContext, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useLocale } from '../_utils/use-locale';\nimport { ClockIcon, ClearIcon } from '../_utils/components';\nimport Popup from '../popup';\nimport TimePanel from './time-panel';\nimport { TimePickerProps } from './types';\n\nfunction formatTime(date: Date, format: string, use12Hours: boolean): string {\n  let h = date.getHours();\n  const m = String(date.getMinutes()).padStart(2, '0');\n  const s = String(date.getSeconds()).padStart(2, '0');\n  let period = '';\n\n  if (use12Hours) {\n    period = h >= 12 ? ' PM' : ' AM';\n    h = h % 12 || 12;\n  }\n\n  return format\n    .replace('HH', String(h).padStart(2, '0'))\n    .replace('H', String(h))\n    .replace('mm', m)\n    .replace('ss', s) + period;\n}\n\nfunction generateSteps(count: number, step: number): number[] {\n  const items: number[] = [];\n  for (let i = 0; i < count; i += step) {\n    items.push(i);\n  }\n  return items;\n}\n\nfunction showsSeconds(format: string): boolean {\n  return format.includes('ss') || format.includes('s');\n}\n\nfunction showsMinutes(format: string): boolean {\n  return format.includes('mm') || format.includes('m');\n}\n\nconst TimePicker = (props: TimePickerProps): React.ReactElement => {\n  const locale = useLocale();\n  const {\n    defaultValue,\n    value,\n    open: controlledOpen,\n    format = 'HH:mm:ss',\n    use12Hours = false,\n    hourStep = 1,\n    minuteStep = 1,\n    secondStep = 1,\n    disabled = false,\n    placeholder = locale.TimePicker.selectTime,\n    allowClear = true,\n    size = 'md',\n    inputReadOnly = true,\n    disabledTime,\n    hideDisabledOptions = false,\n    loop = false,\n    showNow = true,\n    renderExtraFooter,\n    suffixIcon,\n    onChange,\n    onOpenChange,\n    className,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('time-picker', configContext.prefixCls, customisedCls);\n\n  const [date, setDate] = useState<Date | null>(value ?? defaultValue ?? null);\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const isOpen = controlledOpen ?? open;\n\n  // Controlled value\n  useEffect(() => {\n    if (value !== undefined) setDate(value);\n  }, [value]);\n\n  useEffect(() => {\n    if (controlledOpen !== undefined) setOpen(controlledOpen);\n  }, [controlledOpen]);\n\n  useEffect(() => {\n    const listener = (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n      if (wrapperRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;\n      if (controlledOpen === undefined) setOpen(false);\n      onOpenChange?.(false);\n    };\n    document.addEventListener('click', listener);\n    return () => document.removeEventListener('click', listener);\n  }, [controlledOpen, onOpenChange]);\n\n  const toggleOpen = useCallback((val: boolean) => {\n    if (controlledOpen === undefined) setOpen(val);\n    onOpenChange?.(val);\n  }, [controlledOpen, onOpenChange]);\n\n  const updateTime = useCallback((type: 'h' | 'm' | 's', num: number) => {\n    const base = date ? new Date(date) : new Date(0, 0, 0, 0, 0, 0, 0);\n    if (type === 'h') base.setHours(num);\n    else if (type === 'm') base.setMinutes(num);\n    else base.setSeconds(num);\n\n    if (value === undefined) setDate(base);\n    onChange?.(base);\n  }, [date, value, onChange]);\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (value === undefined) setDate(null);\n    onChange?.(null);\n    toggleOpen(false);\n  };\n\n  const handleNow = () => {\n    const now = new Date();\n    if (value === undefined) setDate(now);\n    onChange?.(now);\n    toggleOpen(false);\n  };\n\n  const handleOk = () => {\n    toggleOpen(false);\n  };\n\n  // Disabled time calculation\n  const disabled12 = useMemo(() => disabledTime?.() ?? {}, [disabledTime]);\n  const disabledHours = useMemo(() => disabled12.disabledHours?.() ?? [], [disabled12]);\n  const currentHour = date?.getHours() ?? 0;\n  const disabledMinutes = useMemo(\n    () => disabled12.disabledMinutes?.(currentHour) ?? [],\n    [disabled12, currentHour]\n  );\n  const currentMinute = date?.getMinutes() ?? 0;\n  const disabledSeconds = useMemo(\n    () => disabled12.disabledSeconds?.(currentHour, currentMinute) ?? [],\n    [disabled12, currentHour, currentMinute]\n  );\n\n  const hours = generateSteps(24, hourStep);\n  const minutes = generateSteps(60, minuteStep);\n  const seconds = generateSteps(60, secondStep);\n\n  const filteredHours = hideDisabledOptions ? hours.filter((h) => !disabledHours.includes(h)) : hours;\n  const filteredMinutes = hideDisabledOptions ? minutes.filter((m) => !disabledMinutes.includes(m)) : minutes;\n  const filteredSeconds = hideDisabledOptions ? seconds.filter((s) => !disabledSeconds.includes(s)) : seconds;\n\n  const hasValue = date !== null;\n  const displayValue = hasValue ? formatTime(date, format, use12Hours) : '';\n\n  const cls = classNames(prefixCls, className, `${prefixCls}_${size}`, {\n    [`${prefixCls}_disabled`]: disabled,\n    [`${prefixCls}_open`]: isOpen,\n    [`${prefixCls}_has-value`]: hasValue,\n  });\n\n  const renderOverlay = () => (\n    <div className={`${prefixCls}__dropdown`} ref={dropdownRef}>\n      <div className={`${prefixCls}__panel`}>\n        <TimePanel\n          prefixCls={prefixCls}\n          value={date?.getHours() ?? 0}\n          items={filteredHours}\n          disabledItems={hideDisabledOptions ? [] : disabledHours}\n          loop={loop}\n          onChange={(h) => updateTime('h', h)}\n        />\n        {showsMinutes(format) && (\n          <TimePanel\n            prefixCls={prefixCls}\n            value={date?.getMinutes() ?? 0}\n            items={filteredMinutes}\n            disabledItems={hideDisabledOptions ? [] : disabledMinutes}\n            loop={loop}\n            onChange={(m) => updateTime('m', m)}\n          />\n        )}\n        {showsSeconds(format) && (\n          <TimePanel\n            prefixCls={prefixCls}\n            value={date?.getSeconds() ?? 0}\n            items={filteredSeconds}\n            disabledItems={hideDisabledOptions ? [] : disabledSeconds}\n            loop={loop}\n            onChange={(s) => updateTime('s', s)}\n          />\n        )}\n      </div>\n      <div className={`${prefixCls}__footer`}>\n        {renderExtraFooter && <div className={`${prefixCls}__extra-footer`}>{renderExtraFooter()}</div>}\n        <div className={`${prefixCls}__footer-actions`}>\n          {showNow && <a className={`${prefixCls}__now-btn`} onClick={handleNow}>{locale.TimePicker.now}</a>}\n          <button type=\"button\" className={`${prefixCls}__ok-btn`} onClick={handleOk}>{locale.TimePicker.okText}</button>\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={cls} style={style} ref={wrapperRef}>\n      <Popup\n        trigger=\"manual\"\n        placement=\"bottom-start\"\n        arrow={false}\n        visible={isOpen}\n        content={renderOverlay()}>\n        <div\n          className={`${prefixCls}__input`}\n          onClick={() => !disabled && toggleOpen(!isOpen)}>\n          <input\n            className={`${prefixCls}__input-field`}\n            readOnly={inputReadOnly}\n            disabled={disabled}\n            placeholder={placeholder}\n            value={displayValue}\n            aria-expanded={isOpen}\n            aria-haspopup=\"dialog\"\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && isOpen) toggleOpen(false);\n            }}\n          />\n          <span className={`${prefixCls}__suffix`}>\n            {allowClear && hasValue && !disabled ? (\n              <button type=\"button\" className={`${prefixCls}__clear`} onClick={handleClear} aria-label=\"Clear time\">\n                <ClearIcon size=\"1em\" />\n              </button>\n            ) : null}\n            <span className={`${prefixCls}__icon`}>\n              {suffixIcon ?? <ClockIcon size=\"1em\" />}\n            </span>\n          </span>\n        </div>\n      </Popup>\n    </div>\n  );\n};\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}
+{"version":3,"file":"time-picker.js","names":["Popup"],"sources":["../../src/time-picker/time-picker.tsx"],"sourcesContent":["import { useEffect, useState, useRef, useCallback, useContext, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useLocale } from '../_utils/use-locale';\nimport { ClockIcon, ClearIcon } from '../_utils/components';\nimport Popup from '../popup';\nimport TimePanel from './time-panel';\nimport { TimePickerProps } from './types';\n\ninterface PendingTime {\n  h: number | null;\n  m: number | null;\n  s: number | null;\n}\n\nconst EMPTY_PENDING: PendingTime = { h: null, m: null, s: null };\n\nfunction formatTime(date: Date, format: string, use12Hours: boolean): string {\n  let h = date.getHours();\n  const m = String(date.getMinutes()).padStart(2, '0');\n  const s = String(date.getSeconds()).padStart(2, '0');\n  let period = '';\n\n  if (use12Hours) {\n    period = h >= 12 ? ' PM' : ' AM';\n    h = h % 12 || 12;\n  }\n\n  return format\n    .replace('HH', String(h).padStart(2, '0'))\n    .replace('H', String(h))\n    .replace('mm', m)\n    .replace('ss', s) + period;\n}\n\nfunction generateSteps(count: number, step: number): number[] {\n  const items: number[] = [];\n  for (let i = 0; i < count; i += step) {\n    items.push(i);\n  }\n  return items;\n}\n\nfunction showsSeconds(format: string): boolean {\n  return format.includes('ss') || format.includes('s');\n}\n\nfunction showsMinutes(format: string): boolean {\n  return format.includes('mm') || format.includes('m');\n}\n\nconst TimePicker = (props: TimePickerProps): React.ReactElement => {\n  const locale = useLocale();\n  const {\n    defaultValue,\n    value,\n    open: controlledOpen,\n    format = 'HH:mm:ss',\n    use12Hours = false,\n    hourStep = 1,\n    minuteStep = 1,\n    secondStep = 1,\n    disabled = false,\n    placeholder = locale.TimePicker.selectTime,\n    allowClear = true,\n    size = 'md',\n    inputReadOnly = true,\n    disabledTime,\n    hideDisabledOptions = false,\n    loop = false,\n    showNow = true,\n    renderExtraFooter,\n    suffixIcon,\n    onChange,\n    onOpenChange,\n    className,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('time-picker', configContext.prefixCls, customisedCls);\n\n  const [date, setDate] = useState<Date | null>(value ?? defaultValue ?? null);\n  const [pending, setPending] = useState<PendingTime>(EMPTY_PENDING);\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const isOpen = controlledOpen ?? open;\n\n  // Controlled value\n  useEffect(() => {\n    if (value !== undefined) setDate(value);\n  }, [value]);\n\n  useEffect(() => {\n    if (controlledOpen !== undefined) setOpen(controlledOpen);\n  }, [controlledOpen]);\n\n  useEffect(() => {\n    const listener = (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n      if (wrapperRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;\n      if (controlledOpen === undefined) setOpen(false);\n      onOpenChange?.(false);\n      setPending(EMPTY_PENDING);\n    };\n    document.addEventListener('click', listener);\n    return () => document.removeEventListener('click', listener);\n  }, [controlledOpen, onOpenChange]);\n\n  const toggleOpen = useCallback((val: boolean) => {\n    if (controlledOpen === undefined) setOpen(val);\n    onOpenChange?.(val);\n    if (!val) setPending(EMPTY_PENDING);\n  }, [controlledOpen, onOpenChange]);\n\n  /** Build a Date from committed date + pending overrides */\n  const buildDate = useCallback((p: PendingTime): Date => {\n    const base = date ? new Date(date) : new Date(0, 0, 0, 0, 0, 0, 0);\n    if (p.h !== null) base.setHours(p.h);\n    if (p.m !== null) base.setMinutes(p.m);\n    if (p.s !== null) base.setSeconds(p.s);\n    return base;\n  }, [date]);\n\n  const updatePending = useCallback((type: 'h' | 'm' | 's', num: number) => {\n    setPending((prev) => ({ ...prev, [type]: num }));\n  }, []);\n\n  const commit = useCallback((newDate: Date) => {\n    if (value === undefined) setDate(newDate);\n    onChange?.(newDate);\n    setPending(EMPTY_PENDING);\n  }, [value, onChange]);\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (value === undefined) setDate(null);\n    onChange?.(null);\n    setPending(EMPTY_PENDING);\n    toggleOpen(false);\n  };\n\n  const handleNow = () => {\n    const now = new Date();\n    commit(now);\n    toggleOpen(false);\n  };\n\n  const handleOk = () => {\n    if (pending.h !== null || pending.m !== null || pending.s !== null) {\n      commit(buildDate(pending));\n    }\n    toggleOpen(false);\n  };\n\n  // Disabled time calculation — use pending values when available\n  const effectiveHour = pending.h ?? date?.getHours() ?? 0;\n  const effectiveMinute = pending.m ?? date?.getMinutes() ?? 0;\n\n  const disabled12 = useMemo(() => disabledTime?.() ?? {}, [disabledTime]);\n  const disabledHours = useMemo(() => disabled12.disabledHours?.() ?? [], [disabled12]);\n  const disabledMinutes = useMemo(\n    () => disabled12.disabledMinutes?.(effectiveHour) ?? [],\n    [disabled12, effectiveHour]\n  );\n  const disabledSeconds = useMemo(\n    () => disabled12.disabledSeconds?.(effectiveHour, effectiveMinute) ?? [],\n    [disabled12, effectiveHour, effectiveMinute]\n  );\n\n  const hours = generateSteps(24, hourStep);\n  const minutes = generateSteps(60, minuteStep);\n  const seconds = generateSteps(60, secondStep);\n\n  const filteredHours = hideDisabledOptions ? hours.filter((h) => !disabledHours.includes(h)) : hours;\n  const filteredMinutes = hideDisabledOptions ? minutes.filter((m) => !disabledMinutes.includes(m)) : minutes;\n  const filteredSeconds = hideDisabledOptions ? seconds.filter((s) => !disabledSeconds.includes(s)) : seconds;\n\n  const hasPending = pending.h !== null || pending.m !== null || pending.s !== null;\n  const previewDate = hasPending ? buildDate(pending) : null;\n  const effectiveDate = previewDate ?? date;\n  const hasValue = effectiveDate !== null;\n  const displayValue = hasValue ? formatTime(effectiveDate, format, use12Hours) : '';\n\n  const cls = classNames(prefixCls, className, `${prefixCls}_${size}`, {\n    [`${prefixCls}_disabled`]: disabled,\n    [`${prefixCls}_open`]: isOpen,\n    [`${prefixCls}_has-value`]: hasValue,\n    [`${prefixCls}_pending`]: hasPending,\n  });\n\n  const renderOverlay = () => (\n    <div className={`${prefixCls}__dropdown`} ref={dropdownRef}>\n      <div className={`${prefixCls}__panel`}>\n        <TimePanel\n          prefixCls={prefixCls}\n          value={date?.getHours() ?? null}\n          pendingValue={pending.h}\n          items={filteredHours}\n          disabledItems={hideDisabledOptions ? [] : disabledHours}\n          loop={loop}\n          onChange={(h) => updatePending('h', h)}\n        />\n        {showsMinutes(format) && (\n          <TimePanel\n            prefixCls={prefixCls}\n            value={date?.getMinutes() ?? null}\n            pendingValue={pending.m}\n            items={filteredMinutes}\n            disabledItems={hideDisabledOptions ? [] : disabledMinutes}\n            loop={loop}\n            onChange={(m) => updatePending('m', m)}\n          />\n        )}\n        {showsSeconds(format) && (\n          <TimePanel\n            prefixCls={prefixCls}\n            value={date?.getSeconds() ?? null}\n            pendingValue={pending.s}\n            items={filteredSeconds}\n            disabledItems={hideDisabledOptions ? [] : disabledSeconds}\n            loop={loop}\n            onChange={(s) => updatePending('s', s)}\n          />\n        )}\n      </div>\n      <div className={`${prefixCls}__footer`}>\n        {renderExtraFooter && <div className={`${prefixCls}__extra-footer`}>{renderExtraFooter()}</div>}\n        <div className={`${prefixCls}__footer-actions`}>\n          {showNow && <a className={`${prefixCls}__now-btn`} onClick={handleNow}>{locale.TimePicker.now}</a>}\n          <button type=\"button\" className={`${prefixCls}__ok-btn`} onClick={handleOk}>{locale.TimePicker.okText}</button>\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={cls} style={style} ref={wrapperRef}>\n      <Popup\n        trigger=\"manual\"\n        placement=\"bottom-start\"\n        arrow={false}\n        visible={isOpen}\n        content={renderOverlay()}>\n        <div\n          className={`${prefixCls}__input`}\n          onClick={() => !disabled && toggleOpen(!isOpen)}>\n          <input\n            className={`${prefixCls}__input-field`}\n            readOnly={inputReadOnly}\n            disabled={disabled}\n            placeholder={placeholder}\n            value={displayValue}\n            aria-expanded={isOpen}\n            aria-haspopup=\"dialog\"\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && isOpen) toggleOpen(false);\n            }}\n          />\n          <span className={`${prefixCls}__suffix`}>\n            {allowClear && hasValue && !disabled ? (\n              <button type=\"button\" className={`${prefixCls}__clear`} onClick={handleClear} aria-label=\"Clear time\">\n                <ClearIcon size=\"1em\" />\n              </button>\n            ) : null}\n            <span className={`${prefixCls}__icon`}>\n              {suffixIcon ?? <ClockIcon size=\"1em\" />}\n            </span>\n          </span>\n        </div>\n      </Popup>\n    </div>\n  );\n};\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}

package/lib/button/style/_index.scss

@@ -24,7 +24,7 @@ $btn-prefix: #{$prefix}-btn;
   line-height: $btn-line-height;
 
   &__loader {
-    @include loader();
+    @include loader;
   }
 
   &__icon-container, &__loader {
@@ -91,19 +91,27 @@ $btn-prefix: #{$prefix}-btn;
   }
 
   &_info {
-    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info));
+    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info),
+      var(--ty-color-info-hover), var(--ty-color-info-hover), #fff,
+      var(--ty-color-info-active), var(--ty-color-info-active), #fff);
   }
 
   &_success {
-    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success));
+    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success),
+      var(--ty-color-success-hover), var(--ty-color-success-hover), #fff,
+      var(--ty-color-success-active), var(--ty-color-success-active), #fff);
   }
 
   &_warning {
-    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning));
+    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning),
+      var(--ty-color-warning-hover), var(--ty-color-warning-hover), #fff,
+      var(--ty-color-warning-active), var(--ty-color-warning-active), #fff);
   }
 
   &_danger {
-    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger));
+    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger),
+      var(--ty-color-danger-hover), var(--ty-color-danger-hover), #fff,
+      var(--ty-color-danger-active), var(--ty-color-danger-active), #fff);
   }
 
   // Sizes
@@ -135,13 +143,10 @@ $btn-prefix: #{$prefix}-btn;
     position: relative;
     pointer-events: none;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
-      top: -1px;
-      right: -1px;
-      bottom: -1px;
-      left: -1px;
+      inset: -1px;
       z-index: 1;
       display: block;
       background: var(--ty-btn-loading-bg);
@@ -208,7 +213,7 @@ $btn-prefix: #{$prefix}-btn;
   &_danger {
     .#{$btn-prefix} {
       &:not(:first-child) {
-        border-left-color: rgba(255, 255, 255, 0.2);
+        border-left-color: rgb(255 255 255 / 20%);
       }
     }
   }

package/lib/button/style/index.css

@@ -212,13 +212,19 @@
 }
 .ty-btn_info:hover {
   color: #fff;
+  background: var(--ty-color-info-hover);
+  border-color: var(--ty-color-info-hover);
 }
 .ty-btn_info:focus {
   color: #fff;
+  background: var(--ty-color-info-hover);
+  border-color: var(--ty-color-info-hover);
   z-index: 1;
 }
 .ty-btn_info:active {
   color: #fff;
+  background: var(--ty-color-info-active);
+  border-color: var(--ty-color-info-active);
 }
 .ty-btn_info:disabled {
   color: var(--ty-btn-disabled-color);
@@ -232,13 +238,19 @@
 }
 .ty-btn_success:hover {
   color: #fff;
+  background: var(--ty-color-success-hover);
+  border-color: var(--ty-color-success-hover);
 }
 .ty-btn_success:focus {
   color: #fff;
+  background: var(--ty-color-success-hover);
+  border-color: var(--ty-color-success-hover);
   z-index: 1;
 }
 .ty-btn_success:active {
   color: #fff;
+  background: var(--ty-color-success-active);
+  border-color: var(--ty-color-success-active);
 }
 .ty-btn_success:disabled {
   color: var(--ty-btn-disabled-color);
@@ -252,13 +264,19 @@
 }
 .ty-btn_warning:hover {
   color: #fff;
+  background: var(--ty-color-warning-hover);
+  border-color: var(--ty-color-warning-hover);
 }
 .ty-btn_warning:focus {
   color: #fff;
+  background: var(--ty-color-warning-hover);
+  border-color: var(--ty-color-warning-hover);
   z-index: 1;
 }
 .ty-btn_warning:active {
   color: #fff;
+  background: var(--ty-color-warning-active);
+  border-color: var(--ty-color-warning-active);
 }
 .ty-btn_warning:disabled {
   color: var(--ty-btn-disabled-color);
@@ -272,13 +290,19 @@
 }
 .ty-btn_danger:hover {
   color: #fff;
+  background: var(--ty-color-danger-hover);
+  border-color: var(--ty-color-danger-hover);
 }
 .ty-btn_danger:focus {
   color: #fff;
+  background: var(--ty-color-danger-hover);
+  border-color: var(--ty-color-danger-hover);
   z-index: 1;
 }
 .ty-btn_danger:active {
   color: #fff;
+  background: var(--ty-color-danger-active);
+  border-color: var(--ty-color-danger-active);
 }
 .ty-btn_danger:disabled {
   color: var(--ty-btn-disabled-color);
@@ -313,13 +337,10 @@
   position: relative;
   pointer-events: none;
 }
-.ty-btn_loading:before {
+.ty-btn_loading::before {
   content: "";
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px;
   z-index: 1;
   display: block;
   background: var(--ty-btn-loading-bg);

package/lib/pop-confirm/style/_index.scss

@@ -15,6 +15,10 @@
   }
 
   &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
     text-align: right;
   }
 

package/lib/pop-confirm/style/index.css

@@ -11,6 +11,10 @@
   align-items: center;
 }
 .ty-pop-confirm__buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
   text-align: right;
 }
 .ty-pop-confirm__title {

package/lib/slider/style/_index.scss

@@ -5,21 +5,13 @@
   box-sizing: border-box;
   cursor: pointer;
 
-  &_horizontal.#{$prefix}-slider {
-    margin-bottom: $slider-margin-bottom-with-marks;
-  }
-
-  &_vertical.#{$prefix}-slider {
-    margin-right: $slider-margin-bottom-with-marks;
-  }
-
   &_horizontal {
+    width: 100%;
     min-height: $slider-size;
     margin: 13px 7px;
     padding: 4px 0;
 
     .#{$prefix}-slider {
-
       &__rail {
         width: 100%;
         height: $slider-track-size;

package/lib/slider/style/index.css

@@ -3,13 +3,8 @@
   box-sizing: border-box;
   cursor: pointer;
 }
-.ty-slider_horizontal.ty-slider {
-  margin-bottom: 30px;
-}
-.ty-slider_vertical.ty-slider {
-  margin-right: 30px;
-}
 .ty-slider_horizontal {
+  width: 100%;
   min-height: 12px;
   margin: 13px 7px;
   padding: 4px 0;

package/lib/speed-dial/style/_index.scss

@@ -1,5 +1,4 @@
 @use "../../style/variables" as *;
-@use "sass:color";
 
 $speed-dial-fab-size: 56px;
 $speed-dial-action-size: 40px;
@@ -18,8 +17,8 @@ $speed-dial-actions-gap: 16px;
     height: $speed-dial-fab-size;
     border-radius: 50%;
     border: none;
-    background-color: var(--ty-speed-dial-bg, #{$primary-color});
-    color: var(--ty-speed-dial-color, #{$white-color});
+    background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
+    color: var(--ty-speed-dial-color, #fff);
     font-size: 24px;
     cursor: pointer;
     box-shadow: $box-shadow;
@@ -27,11 +26,11 @@ $speed-dial-actions-gap: 16px;
     outline: none;
 
     &:hover:not(.#{$prefix}-speed-dial__button_disabled) {
-      background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)});
+      background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow;
+      box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow;
     }
 
     &_open {
@@ -59,7 +58,7 @@ $speed-dial-actions-gap: 16px;
       position: absolute;
       top: 50%;
       left: 50%;
-      background-color: currentColor;
+      background-color: currentcolor;
       border-radius: 1px;
       translate: -50% -50%;
     }
@@ -183,7 +182,7 @@ $speed-dial-actions-gap: 16px;
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm;
+      box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow-sm;
     }
 
     &_disabled {

package/lib/speed-dial/style/index.css

@@ -10,7 +10,7 @@
   height: 56px;
   border-radius: 50%;
   border: none;
-  background-color: var(--ty-speed-dial-bg, #6e41bf);
+  background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
   color: var(--ty-speed-dial-color, #fff);
   font-size: 24px;
   cursor: pointer;
@@ -19,10 +19,10 @@
   outline: none;
 }
 .ty-speed-dial__button:hover:not(.ty-speed-dial__button_disabled) {
-  background-color: var(--ty-speed-dial-bg-hover, rgb(92.3496062992, 54.2236220472, 160.9763779528));
+  background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
 }
 .ty-speed-dial__button:focus-visible {
-  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .ty-speed-dial__button_open .ty-speed-dial__icon-default {
   transform: rotate(45deg);
@@ -43,7 +43,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  background-color: currentColor;
+  background-color: currentcolor;
   border-radius: 1px;
   translate: -50% -50%;
 }
@@ -145,7 +145,7 @@
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .ty-speed-dial__action:focus-visible {
-  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 .ty-speed-dial__action_disabled {
   opacity: 0.5;

package/lib/style/base.css

@@ -27,19 +27,26 @@
   --ty-color-fill-secondary: #f5f5f5;
   --ty-color-fill-tertiary: #f0f0f0;
   --ty-color-success: #52c41a;
+  --ty-color-success-hover: #73d13d;
+  --ty-color-success-active: #389e0d;
   --ty-color-success-bg: #f6ffed;
   --ty-color-success-border: #b7eb8f;
   --ty-color-success-text: #49b10e;
   --ty-color-warning: #ff9800;
+  --ty-color-warning-hover: #ffad33;
+  --ty-color-warning-active: #e68a00;
   --ty-color-warning-bg: #fffbe6;
   --ty-color-warning-border: #ffe58f;
   --ty-color-warning-text: #d48806;
   --ty-color-danger: #f44336;
+  --ty-color-danger-hover: #ff7875;
+  --ty-color-danger-active: #cf1322;
   --ty-color-danger-bg: #fff1f0;
   --ty-color-danger-border: #ffa39e;
   --ty-color-danger-text: #cf1322;
-  --ty-color-danger-hover: #ff7875;
   --ty-color-info: #1890ff;
+  --ty-color-info-hover: #40a9ff;
+  --ty-color-info-active: #096dd9;
   --ty-color-info-bg: #e6f7ff;
   --ty-color-info-border: #91d5ff;
   --ty-color-info-text: #096dd9;
@@ -294,19 +301,26 @@ html[data-tiny-theme=dark] {
   --ty-color-fill-secondary: #2a2a2a;
   --ty-color-fill-tertiary: #303030;
   --ty-color-success: #49aa19;
+  --ty-color-success-hover: #6abe39;
+  --ty-color-success-active: #3c8c14;
   --ty-color-success-bg: #162312;
   --ty-color-success-border: #274916;
   --ty-color-success-text: #6abe39;
   --ty-color-warning: #d89614;
+  --ty-color-warning-hover: #e8b339;
+  --ty-color-warning-active: #b37a10;
   --ty-color-warning-bg: #2b2111;
   --ty-color-warning-border: #594214;
   --ty-color-warning-text: #e8b339;
   --ty-color-danger: #d32029;
+  --ty-color-danger-hover: #e84749;
+  --ty-color-danger-active: #ab1a20;
   --ty-color-danger-bg: #2a1215;
   --ty-color-danger-border: #58181c;
   --ty-color-danger-text: #e84749;
-  --ty-color-danger-hover: #e84749;
   --ty-color-info: #177ddc;
+  --ty-color-info-hover: #3c9ae8;
+  --ty-color-info-active: #1268b3;
   --ty-color-info-bg: #111d2c;
   --ty-color-info-border: #15395b;
   --ty-color-info-text: #3c9ae8;
@@ -562,19 +576,26 @@ html[data-tiny-theme=dark] {
     --ty-color-fill-secondary: #2a2a2a;
     --ty-color-fill-tertiary: #303030;
     --ty-color-success: #49aa19;
+    --ty-color-success-hover: #6abe39;
+    --ty-color-success-active: #3c8c14;
     --ty-color-success-bg: #162312;
     --ty-color-success-border: #274916;
     --ty-color-success-text: #6abe39;
     --ty-color-warning: #d89614;
+    --ty-color-warning-hover: #e8b339;
+    --ty-color-warning-active: #b37a10;
     --ty-color-warning-bg: #2b2111;
     --ty-color-warning-border: #594214;
     --ty-color-warning-text: #e8b339;
     --ty-color-danger: #d32029;
+    --ty-color-danger-hover: #e84749;
+    --ty-color-danger-active: #ab1a20;
     --ty-color-danger-bg: #2a1215;
     --ty-color-danger-border: #58181c;
     --ty-color-danger-text: #e84749;
-    --ty-color-danger-hover: #e84749;
     --ty-color-info: #177ddc;
+    --ty-color-info-hover: #3c9ae8;
+    --ty-color-info-active: #1268b3;
     --ty-color-info-bg: #111d2c;
     --ty-color-info-border: #15395b;
     --ty-color-info-text: #3c9ae8;

package/lib/tag/style/_index.scss

@@ -102,6 +102,30 @@
     background: var(--ty-tag-purple-bg);
     border-color: var(--ty-tag-purple-border);
   }
+
+  &_success {
+    color: var(--ty-color-success);
+    background: var(--ty-color-success-bg);
+    border-color: var(--ty-color-success-border);
+  }
+
+  &_info {
+    color: var(--ty-color-info);
+    background: var(--ty-color-info-bg);
+    border-color: var(--ty-color-info-border);
+  }
+
+  &_warning {
+    color: var(--ty-color-warning);
+    background: var(--ty-color-warning-bg);
+    border-color: var(--ty-color-warning-border);
+  }
+
+  &_danger {
+    color: var(--ty-color-danger);
+    background: var(--ty-color-danger-bg);
+    border-color: var(--ty-color-danger-border);
+  }
 }
 
 .#{$prefix}-checkable-tag {