@fibery/ui-kit 1.39.1 → 1.40.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @fibery/ui-kit
 
+## 1.40.1
+
+### Patch Changes
+
+- f44f43b: add asChild to <Button/>
+
+## 1.40.0
+
+### Minor Changes
+
+- 589e0f6: add new icon TypeId
+
 ## 1.39.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.39.1",
+  "version": "1.40.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -11,6 +11,7 @@
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-navigation-menu": "1.2.1",
+    "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
@@ -39,7 +40,6 @@
     "react-color": "2.19.3",
     "react-day-picker": "8.10.1",
     "react-intersection-observer": "9.3.5",
-    "react-medium-image-zoom": "5.2.10",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
@@ -58,10 +58,10 @@
   "devDependencies": {
     "@babel/core": "7.28.5",
     "@babel/runtime": "7.28.4",
-    "@testing-library/dom": "8.19.1",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/react": "16.3.1",
+    "@testing-library/user-event": "14.6.1",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/history": "4.7.11",
@@ -83,8 +83,8 @@
     "svgo": "2.8.0",
     "typescript": "5.9.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.1",
-    "@fibery/eslint-config": "8.6.2"
+    "@fibery/eslint-config": "8.6.2",
+    "@fibery/babel-preset": "7.4.1"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/appIcons.json

@@ -13063,6 +13063,16 @@
     "imageUrl": "https://images-temp.fibery.io/ui/appIcons/linear.svg",
     "file": "linear.svg"
   },
+  {
+    "name": "Stripe",
+    "short_names": ["stripe"],
+    "customCategory": "Integrations",
+    "text": "",
+    "emoticons": [],
+    "keywords": ["logo", "brand", "integration", "stripe"],
+    "imageUrl": "https://images-temp.fibery.io/ui/appIcons/stripe.svg",
+    "file": "stripe.svg"
+  },
   {
     "name": "Openion",
     "short_names": ["openion"],

package/src/box.tsx

@@ -296,7 +296,7 @@ const defaultRadius = {
   rb: border.radius6,
   lb: border.radius6,
 };
-type Props = HTMLProps<HTMLDivElement> & {
+export type BoxProps = HTMLProps<HTMLDivElement> & {
   as?: React.ElementType;
 } & {
   ref?: Ref<HTMLDivElement>;
@@ -342,7 +342,7 @@ type Props = HTMLProps<HTMLDivElement> & {
  * Fibery system card-like container with all mouse, focus and selected states support.
  * States described at: https://www.figma.com/file/Qff2eEFvZhjpxSqeFD5n58/FI---UI-Projects?type=design&node-id=4085%3A30506&mode=design&t=UvkBPcZSg5hKi86D-1
  */
-export const Box = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const {
     selected,
     done,

package/src/button/base-button.tsx

@@ -1,4 +1,5 @@
 import {css, CSSProperties, cx} from "@linaria/core";
+import {Slot} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
@@ -12,6 +13,7 @@ export type BaseButtonProps = {
   color?: ButtonColor;
   pressed?: boolean;
   supportMobile?: boolean;
+  asChild?: boolean;
 } & React.ComponentPropsWithRef<"button">;
 
 export const xLargeButtonHeight = 40;
@@ -36,6 +38,7 @@ export const baseButton = css`
 
   @media (any-hover: hover) {
     &:hover:not(:disabled) {
+      color: var(--fibery-button-text-color);
       background-color: var(--fibery-button-hover-color);
     }
   }
@@ -112,13 +115,25 @@ const getColors = (variant: ButtonVariant, color: ButtonColor) => {
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
   (
-    {variant = "solid", color = "accent", type = "button", className, children, style, pressed, ...buttonProps},
+    {
+      variant = "solid",
+      color = "accent",
+      type = "button",
+      className,
+      children,
+      style,
+      pressed,
+      asChild,
+      ...buttonProps
+    },
     ref
   ) => {
     const colors = getColors(variant, color);
 
+    const Component = asChild ? Slot : "button";
+
     return (
-      <button
+      <Component
         style={{...colors, ...style}}
         aria-pressed={pressed || buttonProps["aria-pressed"]}
         data-variant={variant}
@@ -129,7 +144,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
         {...buttonProps}
       >
         {children}
-      </button>
+      </Component>
     );
   }
 );

package/src/button/button.tsx

@@ -1,11 +1,12 @@
 import {css, cx} from "@linaria/core";
+import {Slot, Slottable} from "@radix-ui/react-slot";
 import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
-import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 import {useIsPhone} from "../use-is-phone";
+import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 
 export type ButtonProps = {
   size?: ButtonSize;
@@ -193,12 +194,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       shortcut,
       fullWidth,
+      asChild,
       ...buttonProps
     },
     ref
   ) => {
     const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
     const isPhone = useIsPhone();
+
+    const Component = asChild ? Slot : "button";
+
     return (
       <BaseButton
         ref={ref}
@@ -213,12 +218,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           iconEnd && withIconEnd,
           !children && withoutChildren
         )}
+        asChild
         {...buttonProps}
       >
-        {pending ? <SpinnerIcon /> : iconStart}
-        {children}
-        {iconEnd}
-        {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        <Component>
+          {pending ? <SpinnerIcon /> : iconStart}
+          <Slottable>{children}</Slottable>
+          {iconEnd}
+          {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        </Component>
       </BaseButton>
     );
   }

package/src/button/icon-button.tsx

@@ -9,7 +9,10 @@ import {useIsPhone} from "../use-is-phone";
 export type IconButtonProps = {
   size?: ButtonSize;
   pending?: boolean;
-} & BaseButtonProps;
+
+  /** NOTE: it won't work properly together with `pending` prop. TODO: figure out how to use Slottable correctly (position spinner as absolute above?) */
+  asChild?: boolean;
+} & Omit<BaseButtonProps, "asChild">;
 
 export const iconButton = css`
   display: flex;

package/src/button/select-button.tsx

@@ -34,10 +34,18 @@ export type SelectButtonProps = {
    * Should be used as an escape hatch for components like ui-kit/src/popup that don't set "aria-expanded"
    */
   open?: boolean;
-} & Omit<ButtonProps, "iconEnd">;
+} & ButtonProps;
 
 export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(function SelectButton(
-  {size = "medium", className, open, variant = "ghost", color = "neutral", ...rest},
+  {
+    size = "medium",
+    className,
+    open,
+    variant = "ghost",
+    iconEnd = <ArrowBottom className={iconSize[size]} />,
+    color = "neutral",
+    ...rest
+  },
   forwardedRef
 ) {
   return (
@@ -45,7 +53,7 @@ export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(fun
       ref={forwardedRef}
       aria-expanded={open}
       size={size}
-      iconEnd={<ArrowBottom className={iconSize[size]} />}
+      iconEnd={iconEnd}
       variant={variant}
       color={color}
       className={className}

package/src/collapsible/index.tsx

@@ -36,10 +36,10 @@ export const CollapsibleContent = styled(Collapsible.Content)`
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-state="open"] {
-      animation: slideDown 150ms ease-out;
+      animation: slideDown 120ms ease-out;
     }
     &[data-state="closed"] {
-      animation: slideUp 150ms ease-out;
+      animation: slideUp 120ms ease-out;
     }
   }
 `;

package/src/command-menu/index.tsx

@@ -10,8 +10,10 @@ import Search from "../icons/react/Search";
 
 export const CommandMenuRoot = styled(CommandRoot)`
   display: flex;
-  height: 100%;
-  width: 100%;
+  :where(&) {
+    height: 100%;
+    width: 100%;
+  }
   flex-direction: column;
   overflow: hidden;
   border-radius: ${border.radius8}px;

package/src/copy-to-clipboard.ts

@@ -1 +1,11 @@
 export const copyToClipboard = (text: string) => window.navigator.clipboard.writeText(text);
+export const copyUrlToClipboard = ({url, label}: {url: string; label?: string}) => {
+  const htmlString = `<a href="${url}" target="_blank">${label || url}</a>`;
+
+  return window.navigator.clipboard.write([
+    new ClipboardItem({
+      "text/html": new Blob([htmlString], {type: "text/html"}),
+      "text/plain": url,
+    }),
+  ]);
+};

package/src/dot.tsx

@@ -0,0 +1,36 @@
+import {css, CSSProperties, cx} from "@linaria/core";
+import {space, themeVars} from "./design-system";
+import {useMemo} from "react";
+
+const dotColorVar = "--fibery-dot-color";
+
+const dotCss = css`
+  background-color: var(${dotColorVar});
+  border-radius: 50%;
+
+  &[data-size="small"] {
+    width: ${space.s4}px;
+    height: ${space.s4}px;
+  }
+
+  &[data-size="medium"] {
+    width: ${space.s6}px;
+    height: ${space.s6}px;
+  }
+`;
+
+type Props = {
+  className?: string;
+  color?: string;
+  size?: "small" | "medium";
+} & React.ComponentProps<"div">;
+
+export const Dot = ({className, color = themeVars.active, size = "small", style, ...props}: Props) => {
+  const colors: CSSProperties = useMemo(() => {
+    return {
+      [dotColorVar]: color,
+    };
+  }, [color]);
+
+  return <div className={cx(className, dotCss)} style={{...colors, ...style}} data-size={size} {...props} />;
+};