@fibery/ui-kit 4.1.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @fibery/ui-kit
 
+## 4.3.0
+
+### Minor Changes
+
+- d7293fd: updated banner component styles and colors.ts
+- 8b11936: updated green dot indicator in ui-kit
+- d08e68d: new token for required asterisk in colors.ts
+- e35e5ec: icons refactoring, renaming, deduping
+
+### Patch Changes
+
+- f49a044: icons refactoring, renaming and deduplication
+- 4ac3476: final updates to icons refactoring
+
+## 4.2.0
+
+### Minor Changes
+
+- eef68ad: Sync dark theme color tokens correction
+
 ## 4.1.0
 
 ### Minor Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
-    "@linaria/core": "7.0.0",
-    "@linaria/react": "7.0.1",
+    "@linaria/core": "8.0.0",
+    "@linaria/react": "8.0.0",
     "@popperjs/core": "2.11.6",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
@@ -24,7 +24,6 @@
     "@types/react-select-country-list": "2.2.3",
     "@types/setimmediate": "1.0.4",
     "apca-w3": "0.1.9",
-    "apcach": "github:antiflasher/apcach#54077b3",
     "chrono-node": "2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
@@ -39,12 +38,11 @@
     "node-types-local": "npm:@types/node@^24",
     "photoswipe": "5.4.4",
     "popper-max-size-modifier": "0.2.0",
-    "prop-types": "15.7.2",
     "rc-dialog": "9.0.4",
     "rc-input": "0.1.4",
     "rc-input-number": "8.5.0",
     "rc-input-number-v7": "npm:rc-input-number@7.3.11",
-    "rc-progress": "3.4.1",
+    "rc-progress": "4.0.0",
     "rc-select": "14.1.18",
     "rc-tabs": "12.5.10",
     "rc-textarea": "0.4.7",
@@ -58,6 +56,7 @@
     "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
+    "vaul": "1.1.2",
     "virtua": "0.48.8",
     "@fibery/emoji-data": "2.7.3",
     "@fibery/helpers": "3.1.0",
@@ -74,19 +73,16 @@
     "@types/culori": "4.0.1",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
-    "@types/prop-types": "15.7.5",
     "@types/react": "18.3.12",
     "@types/react-color": "2.13.5",
     "@types/react-dom": "18.3.1",
-    "@typescript/native-preview": "beta",
-    "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "13.0.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "6.0.1-rc",
+    "typescript": "rc",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.2"
   },
@@ -98,10 +94,10 @@
     "test": "../../scripts/test.sh",
     "test:ci": "../../scripts/test.sh --ci",
     "test:coverage": "../../scripts/test.sh --ci --coverage",
-    "check": "../../scripts/check.sh",
-    "lint": "pnpm -w lint .",
     "generate-icons": "node scripts/generate-icons.mjs",
     "show-colors": "cd ../.. && SHOW_COLORS=1 ./node_modules/.bin/vitest run --project ui-kit --disable-console-intercept -t 'show all current colors'",
-    "typecheck": "../../scripts/typecheck.sh"
+    "lint": "pnpm -w lint .",
+    "typecheck": "../../scripts/typecheck.sh",
+    "check": "../../scripts/check.sh"
   }
 }

package/src/antd/ant-upload.tsx

@@ -64,7 +64,7 @@ export const antUploadStyle = css`
       alignItems: "stretch",
       alignContent: "stretch",
     },
-    "& .ant-upload": {
+    ":where(&) .ant-upload": {
       boxSizing: "border-box",
       margin: 0,
       padding: 0,
@@ -73,30 +73,30 @@ export const antUploadStyle = css`
       listStyle: "none",
       outline: "none",
     },
-    "& .ant-upload p": {
+    ":where(&) .ant-upload p": {
       margin: 0,
     },
-    "& .ant-upload-btn": {
+    ":where(&) .ant-upload-btn": {
       display: "block",
       width: "100%",
       outline: "none",
     },
-    "& .ant-upload input[type='file']": {
+    ":where(&) .ant-upload input[type='file']": {
       cursor: "pointer",
     },
-    "& .ant-upload.ant-upload-disabled": {
+    ":where(&) .ant-upload.ant-upload-disabled": {
       color: themeVars.disabledTextColor,
       cursor: "not-allowed",
     },
-    "& .ant-upload.ant-upload-disabled input[type='file']": {
+    ":where(&) .ant-upload.ant-upload-disabled input[type='file']": {
       cursor: "not-allowed",
     },
-    "& .ant-upload-select": {
+    ":where(&) .ant-upload-select": {
       display: "inline-flex",
       alignItems: "stretch",
       maxWidth: "100%",
     },
-    "& .ant-upload-select > .ant-upload": {
+    ":where(&) .ant-upload-select > .ant-upload": {
       display: "inline-flex",
       alignItems: "center",
       outline: "none",
@@ -139,23 +139,23 @@ export const antUploadStyle = css`
         transition: "none",
       },
     },
-    "& .ant-upload.ant-upload-drag .ant-upload-btn": {
+    ":where(&) .ant-upload.ant-upload-drag .ant-upload-btn": {
       display: "table",
       height: "100%",
     },
-    "& .ant-upload.ant-upload-drag .ant-upload-drag-container": {
+    ":where(&) .ant-upload.ant-upload-drag .ant-upload-drag-container": {
       display: "table-cell",
       verticalAlign: "middle",
     },
-    "& .ant-upload-picture-card-wrapper": {
+    ":where(&) .ant-upload-picture-card-wrapper": {
       display: "inline-block",
       width: "100%",
     },
-    "& .ant-upload-picture-card-wrapper::before": {
+    ":where(&) .ant-upload-picture-card-wrapper::before": {
       display: "table",
       content: "''",
     },
-    "& .ant-upload-picture-card-wrapper::after": {
+    ":where(&) .ant-upload-picture-card-wrapper::after": {
       display: "table",
       clear: "both",
       content: "''",

package/src/antd/auto-complete.tsx

@@ -13,14 +13,14 @@ import {wrapWithPopupContainer} from "./utils";
 const autoCompleteStyles = css`
   ${{
     position: "relative",
-    "& .ant-select": {
+    ":where(&) .ant-select": {
       ...textStyles.regular,
       boxSizing: "border-box",
       display: "inline-block",
       width: "100%",
       cursor: "text",
     },
-    "& .ant-select-selector": {
+    ":where(&) .ant-select-selector": {
       boxSizing: "border-box",
       display: "flex",
       alignItems: "center",
@@ -29,7 +29,7 @@ const autoCompleteStyles = css`
       position: "relative",
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-select-selection-search": {
+    ":where(&) .ant-select-selection-search": {
       flex: 1,
       minWidth: 0,
     },
@@ -45,7 +45,7 @@ const autoCompleteStyles = css`
       appearance: "none",
       ...textStyles.regular,
     },
-    "& .ant-select-dropdown": {
+    ":where(&) .ant-select-dropdown": {
       boxSizing: "border-box",
       position: "absolute",
       zIndex: 1050,
@@ -55,16 +55,16 @@ const autoCompleteStyles = css`
       paddingTop: space.s8,
       paddingBottom: space.s8,
     },
-    "& .ant-select-dropdown-hidden": {
+    ":where(&) .ant-select-dropdown-hidden": {
       display: "none",
     },
-    "& .ant-select-item-empty": {
+    ":where(&) .ant-select-item-empty": {
       minHeight: 32,
       padding: "5px 12px",
       lineHeight: "22px",
       color: themeVars.colorTextListItemGeneralDisabled,
     },
-    "& .ant-select-item": {
+    ":where(&) .ant-select-item": {
       ...textStyles.regular,
       color: themeVars.textColor,
       minHeight: 32,
@@ -75,16 +75,16 @@ const autoCompleteStyles = css`
       cursor: "pointer",
       transition: `background-color ${transitions.slow}`,
     },
-    "& .ant-select-item-option-content": {
+    ":where(&) .ant-select-item-option-content": {
       flex: 1,
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
     },
-    "& .ant-select-item-option-state": {
+    ":where(&) .ant-select-item-option-state": {
       display: "none",
     },
-    "& .ant-select-item-option": {
+    ":where(&) .ant-select-item-option": {
       display: "flex",
       alignItems: "center",
       "&:hover": {

package/src/antd/input-number.tsx

@@ -4,8 +4,8 @@ import type {ComponentProps} from "react";
 import {forwardRef} from "react";
 
 import {textStyles, themeVars, transitionDuration} from "../design-system";
-import ArrowBottomIcon from "../icons/react/arrow-bottom";
-import ArrowTopIcon from "../icons/react/arrow-top";
+import ArrowDownIcon from "../icons/react/arrow-down";
+import ArrowUpIcon from "../icons/react/arrow-up";
 import {getWrapper} from "./get-wrapper";
 import {inputOverrides} from "./styles";
 import {wrapWith} from "./utils";
@@ -14,8 +14,8 @@ type InputNumberPropsAny = ComponentProps<typeof InputNumber>;
 
 // rc-input-number renders empty .ant-input-number-handler-up/-down-inner spans unless
 // upNode/downNode are passed. antd's wrapper supplied chevron icons; we do the same.
-const upNode = <ArrowTopIcon className="ant-input-number-handler-up-inner" iconSize={12} />;
-const downNode = <ArrowBottomIcon className="ant-input-number-handler-down-inner" iconSize={12} />;
+const upNode = <ArrowUpIcon className="ant-input-number-handler-up-inner" iconSize={12} />;
+const downNode = <ArrowDownIcon className="ant-input-number-handler-down-inner" iconSize={12} />;
 
 const PrefixedInputNumber = forwardRef<HTMLInputElement, InputNumberPropsAny>(function PrefixedInputNumber(props, ref) {
   return <InputNumber prefixCls="ant-input-number" upHandler={upNode} downHandler={downNode} {...props} ref={ref} />;
@@ -23,64 +23,97 @@ const PrefixedInputNumber = forwardRef<HTMLInputElement, InputNumberPropsAny>(fu
 
 const inputNumberStyles = css`
   ${{
-    "& .ant-input-number": {
+    ":where(&) .ant-input-number": {
       boxSizing: "border-box",
       position: "relative",
       display: "inline-flex",
       alignItems: "stretch",
       width: "90px",
+    },
+    "& .ant-input-number": {
       height: "auto",
       border: "none",
       ...textStyles.regular,
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-input-number-input-wrap": {
+    ":where(&) .ant-input-number-input-wrap": {
       flex: 1,
       minWidth: 0,
     },
-    "& .ant-input-number-input": {
-      ...inputOverrides.main,
+    ":where(&) .ant-input-number-input": {
       boxSizing: "border-box",
       width: "100%",
       height: "100%",
       appearance: "textfield",
     },
-    "& .ant-input-number-input:placeholder-shown": {
-      textOverflow: "ellipsis",
+    "& .ant-input-number-input": {
+      ...inputOverrides.main,
     },
-    "& .ant-input-number-input::-webkit-inner-spin-button, & .ant-input-number-input::-webkit-outer-spin-button": {
-      margin: 0,
-      appearance: "none",
+    ":where(&) .ant-input-number-input:placeholder-shown": {
+      textOverflow: "ellipsis",
     },
-    "& .ant-input-number-handler-wrap": {
+    ":where(&) .ant-input-number-input::-webkit-inner-spin-button, :where(&) .ant-input-number-input::-webkit-outer-spin-button":
+      {
+        margin: 0,
+        appearance: "none",
+      },
+    ":where(&) .ant-input-number-handler-wrap": {
       position: "absolute",
-      top: 1,
-      bottom: 1,
-      right: 1,
       width: 22,
-      backgroundColor: themeVars.transparent,
-      background: themeVars.transparent,
-      // antd hid the stepper arrows until hover/focus; reproduce that (dropped with the vendored CSS)
       opacity: 0,
       transition: `opacity ${transitionDuration.normal} linear ${transitionDuration.faster}`,
     },
-    "& .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
+    ":where(&) .ant-input-number-handler-wrap:hover .ant-input-number-handler": {
       height: "40%",
     },
-    "& .ant-input-number:hover .ant-input-number-handler-wrap, & .ant-input-number-focused .ant-input-number-handler-wrap":
+    ":where(&) .ant-input-number:hover .ant-input-number-handler-wrap, :where(&) .ant-input-number-focused .ant-input-number-handler-wrap":
       {
         opacity: 1,
       },
-    "& .ant-input-number-focused": {boxShadow: "none"},
-    "& .ant-input-number-handler-up, & .ant-input-number-handler-down": {
+    ":where(&) .ant-input-number-handler-up, :where(&) .ant-input-number-handler-down": {
       cursor: "pointer",
     },
-    "& .ant-input-number-handler-up:hover, & .ant-input-number-handler-down:hover": {
+    ":where(&) .ant-input-number-handler-up:hover, :where(&) .ant-input-number-handler-down:hover": {
       height: "60% !important",
     },
-    "& .ant-input-number-handler-up-disabled, & .ant-input-number-handler-down-disabled": {
+    ":where(&) .ant-input-number-handler-up-disabled, :where(&) .ant-input-number-handler-down-disabled": {
       cursor: "not-allowed",
     },
+    ":where(&) .ant-input-number-handler-up-inner, :where(&) .ant-input-number-handler-down-inner": {
+      position: "absolute",
+      right: 4,
+      width: 12,
+      height: 12,
+      lineHeight: "12px",
+      transition: `all ${transitionDuration.faster} linear`,
+      userSelect: "none",
+    },
+    ":where(&) .ant-input-number-handler-up-inner": {
+      top: "50%",
+      marginTop: -5,
+    },
+    ":where(&) .ant-input-number-handler-down-inner": {
+      top: "50%",
+      transform: "translateY(-50%)",
+    },
+    ":where(&) .ant-input-number-handler": {
+      position: "relative",
+      display: "block",
+      width: "100%",
+      height: "50%",
+      overflow: "hidden",
+      lineHeight: 0,
+      textAlign: "center",
+      transition: `all ${transitionDuration.faster} linear`,
+    },
+    "& .ant-input-number-handler-wrap": {
+      top: 1,
+      bottom: 1,
+      right: 1,
+      backgroundColor: themeVars.transparent,
+      background: themeVars.transparent,
+    },
+    "& .ant-input-number-focused": {boxShadow: "none"},
     "& .ant-input-number-handler-up-disabled .ant-input-number-handler-up-inner, & .ant-input-number-handler-down-disabled .ant-input-number-handler-down-inner":
       {
         color: themeVars.disabledTextColor,
@@ -101,33 +134,10 @@ const inputNumberStyles = css`
       },
     "& .ant-input-number-handler-up-inner, &  .ant-input-number-handler-down-inner": {
       color: themeVars.iconColor,
-      position: "absolute",
-      right: 4,
-      width: 12,
-      height: 12,
-      lineHeight: "12px",
-      transition: `all ${transitionDuration.faster} linear`,
-      userSelect: "none",
-    },
-    "& .ant-input-number-handler-up-inner": {
-      top: "50%",
-      marginTop: -5,
-    },
-    "& .ant-input-number-handler-down-inner": {
-      top: "50%",
-      transform: "translateY(-50%)",
     },
     "& .ant-input-number-handler": {
-      position: "relative",
-      display: "block",
-      width: "100%",
-      height: "50%",
-      overflow: "hidden",
       color: themeVars.iconColor,
-      lineHeight: 0,
-      textAlign: "center",
       borderLeft: themeVars.borderSolidSeparator,
-      transition: `all ${transitionDuration.faster} linear`,
       "&:active": {
         backgroundColor: themeVars.transparent,
       },

package/src/antd/input.tsx

@@ -7,7 +7,7 @@ import type {ResizableTextAreaRef} from "rc-textarea/lib/ResizableTextArea";
 import {forwardRef, useImperativeHandle, useMemo, useRef} from "react";
 
 import {space, tabularNumsOff, textStyles, themeVars} from "../design-system";
-import CloseCircleFilledIcon from "../icons/react/cross-circle";
+import CloseCircleFilledIcon from "../icons/react/circle-cross";
 import {mobileRootSelector} from "../mobile-styles";
 import {getWrapper} from "./get-wrapper";
 import {inputStyles} from "./styles";

package/src/antd/styles.ts

@@ -5,7 +5,7 @@ import {border, layout, shadows, space, textStyles, themeVars, transitions} from
 const inputVariables = {
   default: {
     "--input-border": `${themeVars.inputBorderColor} inset`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.colorAccentStrokeHover} inset`,
+    "--input-hover-border": `${themeVars.inputBorderHoverColor} inset`,
     "--input-focus-border": `0 0 0 1px ${themeVars.colorAccentStrokeFocus} inset`,
     "--input-focus-shadow": `0 0 0 2px ${themeVars.colorAccentStroke}`,
   },
@@ -40,7 +40,7 @@ export const inputOverrides = {
     },
   },
   hover: {
-    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.colorAccentStrokeHover}) !important`,
+    boxShadow: `var(--input-hover-border, ${themeVars.inputBorderHoverColor}) !important`,
     transition: `box-shadow ${transitions.faster}`,
   },
   focus: {
@@ -69,10 +69,12 @@ export const inputStyles = css`
   }
   ${{
     ...textStyles.regular,
-    "& .ant-input, & .ant-input-affix-wrapper, & .ant-input-group-wrapper, & .ant-input-wrapper": {
+    ":where(&) .ant-input, :where(&) .ant-input-affix-wrapper, :where(&) .ant-input-group-wrapper, :where(&) .ant-input-wrapper":
+      {
+        boxSizing: "border-box",
+      },
+    ":where(&) .ant-input-affix-wrapper": {
       boxSizing: "border-box",
-    },
-    "& .ant-input-affix-wrapper": {
       display: "inline-flex",
       alignItems: "center",
       width: "100%",
@@ -83,40 +85,40 @@ export const inputStyles = css`
       boxShadow: "none",
       backgroundColor: themeVars.transparent,
     },
-    "& .ant-input-affix-wrapper > input.ant-input": {
+    ":where(&) .ant-input-affix-wrapper > input.ant-input": {
       minWidth: 0,
       flex: 1,
       padding: "0 12px",
       border: "inherit",
       outline: "inherit",
     },
-    "& .ant-input-prefix, & .ant-input-suffix": {
+    ":where(&) .ant-input-prefix, :where(&) .ant-input-suffix": {
       display: "flex",
       flex: "none",
       alignItems: "center",
     },
     // antd source: spacing between adjacent icons when prefix/suffix holds multiple nodes.
-    "& .ant-input-prefix > *:not(:last-child), & .ant-input-suffix > *:not(:last-child)": {
+    ":where(&) .ant-input-prefix > *:not(:last-child), :where(&) .ant-input-suffix > *:not(:last-child)": {
       marginRight: space.s8,
     },
-    "& .ant-input-suffix": {
+    ":where(&) .ant-input-suffix": {
       marginLeft: space.s6,
     },
-    "& .ant-input-clear-icon": {
+    ":where(&) .ant-input-clear-icon": {
       display: "inline-flex",
       alignItems: "center",
       color: themeVars.iconColor,
       cursor: "pointer",
       lineHeight: 1,
     },
-    "& .ant-input-clear-icon-hidden": {
+    ":where(&) .ant-input-clear-icon-hidden": {
       visibility: "hidden",
     },
-    "& .ant-input-group-wrapper": {
+    ":where(&) .ant-input-group-wrapper": {
       display: "inline-block",
       width: "100%",
     },
-    "& .ant-input-wrapper.ant-input-group": {
+    ":where(&) .ant-input-wrapper.ant-input-group": {
       display: "inline-flex",
       width: "100%",
       alignItems: "stretch",
@@ -130,9 +132,8 @@ export const inputStyles = css`
       "&:hover": inputOverrides.hover,
       "&:focus": inputOverrides.focus,
     },
-    "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
-    "& .ant-input": {
-      ...inputOverrides.main,
+    ":where(&) .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
+    ":where(&) .ant-input": {
       // antd source: .ant-input { width: 100%; min-width: 0 } — without it, bare <AntInput>
       // doesn't fill its container and can't shrink inside a flex parent. AutoComplete's
       // .ant-select-selection-search .ant-input rule (two-class selector) beats this on
@@ -140,8 +141,11 @@ export const inputStyles = css`
       width: "100%",
       minWidth: 0,
     },
+    "& .ant-input": {
+      ...inputOverrides.main,
+    },
     // antd source: long placeholders get ellipsis instead of wrap-clip.
-    "& .ant-input:placeholder-shown": {
+    ":where(&) .ant-input:placeholder-shown": {
       textOverflow: "ellipsis",
     },
     // bordered={false} → wrap with `ant-input-borderless` class; strip the box-shadow ring + bg.
@@ -155,7 +159,7 @@ export const inputStyles = css`
     // antd source: inner input inside affix-wrapper must not paint its own focus ring —
     // the wrapper owns the visual focus state. Without this prefix/suffix usage shows a
     // double ring.
-    "& .ant-input-affix-wrapper > .ant-input:focus": {
+    ":where(&) .ant-input-affix-wrapper > .ant-input:focus": {
       boxShadow: "none !important",
     },
     "& .ant-input-status-error": inputVariables.error,
@@ -170,13 +174,15 @@ export const inputStyles = css`
     "& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
       borderColor: "transparent",
     },
-    // antd source: textarea defaults — min-height anchors empty <AntTextArea> to a sane
-    // height, max-width prevents user-resize from blowing out the container, and
-    // vertical-align: bottom matches the baseline of a single-line <input> next to it.
+    // Textarea padding must beat inputOverrides.main's zero vertical padding so rc-textarea
+    // autosize measures the same row height as the rendered control.
     "& textarea.ant-input": {
       paddingTop: space.s8,
       paddingBottom: space.s8,
-      minHeight: layout.inputHeight,
+    },
+    // antd source: textarea defaults — max-width prevents user-resize from blowing out the
+    // container, and vertical-align: bottom matches the baseline of a single-line <input> next to it.
+    ":where(&) textarea.ant-input": {
       maxWidth: "100%",
       verticalAlign: "bottom",
     },