@apify/ui-library 1.165.37 → 1.166.0

package/dist/utils/icons.d.ts

@@ -0,0 +1,11 @@
+import { IconComponent, IconProps } from '@apify/ui-icons';
+export type WithSizeIconProps = Omit<IconProps, 'size'>;
+export type WithSizeIconComponent = React.FunctionComponent<WithSizeIconProps>;
+export declare const withSize: (Icon: IconComponent, size: IconProps["size"]) => WithSizeIconComponent;
+export type WithColorIconProps = Omit<IconProps, 'color'>;
+export type WithColorIconComponent = React.FunctionComponent<WithColorIconProps>;
+export declare const withColor: (Icon: IconComponent, color: IconProps["color"]) => WithColorIconComponent;
+export type WithGradientIconProps = Omit<IconProps, 'color'>;
+export type WithGradientIconComponent = React.FunctionComponent<WithGradientIconProps>;
+export declare const withGradient: (Icon: IconComponent, color: IconProps["color"], gradient: string) => WithGradientIconComponent;
+//# sourceMappingURL=icons.d.ts.map

package/dist/utils/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/utils/icons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAC/E,eAAO,MAAM,QAAQ,GAAI,MAAM,aAAa,EAAE,MAAM,SAAS,CAAC,MAAM,CAAC,KAAG,qBAEvE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC1D,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AACjF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,EAAE,OAAO,SAAS,CAAC,OAAO,CAAC,KAAG,sBAE1E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC7D,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAEvF,eAAO,MAAM,YAAY,GACrB,MAAM,aAAa,EACnB,OAAO,SAAS,CAAC,OAAO,CAAC,EACzB,UAAU,MAAM,KACjB,yBAQF,CAAC"}

package/dist/utils/icons.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/icons.tsx
+var withSize = (Icon, size) => {
+	return (props) => /* @__PURE__ */ jsx(Icon, {
+		...props,
+		size
+	});
+};
+var withColor = (Icon, color) => {
+	return (props) => /* @__PURE__ */ jsx(Icon, {
+		...props,
+		color
+	});
+};
+var withGradient = (Icon, color, gradient) => {
+	const GradientIcon = styled(Icon)`
+        @supports (clip-path: url(#icon)) {
+            color: transparent;
+            background: ${gradient};
+        }
+    `;
+	return (props) => /* @__PURE__ */ jsx(GradientIcon, {
+		...props,
+		color
+	});
+};
+//#endregion
+export { withColor, withGradient, withSize };

package/dist/utils/index.d.ts

@@ -4,4 +4,5 @@ export * from './image_color';
 export * from './resize_observer';
 export * from './css_utils';
 export * from './type_utils';
+export * from './icons';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.165.37",
+    "version": "1.166.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -42,7 +42,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.53.0",
+        "@apify/ui-icons": "^1.54.0",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.452.0",
+        "@apify-packages/types": "^3.453.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "048ae8b5adce707866066e1442e3f71a533c79c9"
+    "gitHead": "b2568ef188b4428ae94064bb2e3197ecfdc41cb5"
 }

package/src/components/brand_icon/brand_icon.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta } from '@storybook/react-vite';
+import type React from 'react';
+import styled from 'styled-components';
+
+import * as BrandIcons from './brand_icon';
+
+export default {
+    title: 'UI-Library/BrandIcon',
+    component: BrandIcons.ZapierBrandIcon,
+} as Meta;
+
+const Grid = styled.div`
+    padding: 32px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 32px 16px;
+`;
+
+const StyledIconBlock = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    label {
+        font-size: 1.2rem;
+        font-weight: 400;
+        font-family: Inter, sans-serif;
+    }
+`;
+
+const IconBlock = ({ children, label }: { children: React.ReactNode; label: string }) => {
+    return (
+        <StyledIconBlock>
+            <label>{label}</label>
+            {children}
+        </StyledIconBlock>
+    );
+};
+
+const iconEntries = Object.entries(BrandIcons).sort(([a], [b]) => a.localeCompare(b));
+
+export const Default = () => {
+    return (
+        <Grid>
+            {iconEntries.map(([name, Icon]) => (
+                <IconBlock key={name} label={name}>
+                    <Icon />
+                </IconBlock>
+            ))}
+        </Grid>
+    );
+};

package/src/components/brand_icon/brand_icon.tsx

@@ -0,0 +1,36 @@
+import {
+    AnthropicIcon,
+    ChatGptIcon,
+    ClaudeIcon,
+    CursorIcon,
+    DiscordIcon,
+    DiscordSolidIcon,
+    GithubIcon,
+    LinkedinIcon,
+    LinkedinSolidIcon,
+    MakeIcon,
+    N8nIcon,
+    PerplexityIcon,
+    TwitterIcon,
+    YoutubeIcon,
+    ZapierIcon,
+} from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme';
+import { withColor, withGradient } from '../../utils';
+
+export const AnthropicBrandIcon = withColor(AnthropicIcon, theme.color.thirdParty.anthropic);
+export const ChatGptBrandIcon = withColor(ChatGptIcon, theme.color.thirdParty.chatGpt);
+export const ClaudeBrandIcon = withColor(ClaudeIcon, theme.color.thirdParty.claude);
+export const CursorBrandIcon = withColor(CursorIcon, theme.color.thirdParty.cursor);
+export const DiscordBrandIcon = withColor(DiscordIcon, theme.color.thirdParty.discord);
+export const DiscordSolidBrandIcon = withColor(DiscordSolidIcon, theme.color.thirdParty.discord);
+export const GithubBrandIcon = withColor(GithubIcon, theme.color.thirdParty.github);
+export const LinkedinBrandIcon = withColor(LinkedinIcon, theme.color.thirdParty.linkedin);
+export const LinkedinSolidBrandIcon = withColor(LinkedinSolidIcon, theme.color.thirdParty.linkedin);
+export const MakeBrandIcon = withGradient(MakeIcon, theme.color.thirdParty.make, theme.gradient.thirdParty.make);
+export const N8nBrandIcon = withColor(N8nIcon, theme.color.thirdParty.n8n);
+export const PerplexityBrandIcon = withColor(PerplexityIcon, theme.color.thirdParty.perplexity);
+export const TwitterBrandIcon = withColor(TwitterIcon, theme.color.thirdParty.twitter);
+export const YoutubeBrandIcon = withColor(YoutubeIcon, theme.color.thirdParty.youtube);
+export const ZapierBrandIcon = withColor(ZapierIcon, theme.color.thirdParty.zapier);

package/src/components/brand_icon/index.ts

@@ -0,0 +1 @@
+export * from './brand_icon';

package/src/components/index.ts

@@ -29,6 +29,7 @@ export * from './tag';
 export * from './tabs';
 export * from './shortcut';
 export * from './icon_button';
+export * from './brand_icon';
 export * from './spinner';
 export * from './store';
 export * from './checkbox';

package/src/design_system/colors/figma_color_tokens.dark.json

@@ -441,6 +441,60 @@
         "$type": "color",
         "$value": "{Palette.Blue.600}"
       }
+    },
+    "Third_Party": {
+      "Anthropic": {
+        "$type": "color",
+        "$value": "#d97757"
+      },
+      "Chat_Gpt": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "Claude": {
+        "$type": "color",
+        "$value": "#d97757"
+      },
+      "Cursor": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "Discord": {
+        "$type": "color",
+        "$value": "#5865f2"
+      },
+      "Github": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "Linkedin": {
+        "$type": "color",
+        "$value": "#0a66c2"
+      },
+      "Make": {
+        "$type": "color",
+        "$value": "#6d00cc"
+      },
+      "N8n": {
+        "$type": "color",
+        "$value": "#ea4b71"
+      },
+      "Perplexity": {
+        "$type": "color",
+        "$value": "#20808d"
+      },
+      "Twitter": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "Youtube": {
+        "$type": "color",
+        "$value": "#ff0000"
+      },
+      "Zapier": {
+        "$type": "color",
+        "$value": "#ff4a00"
+      }
     }
   },
   "Brand": {

package/src/design_system/colors/figma_color_tokens.light.json

@@ -441,6 +441,60 @@
         "$type": "color",
         "$value": "{Palette.Blue.50}"
       }
+    },
+    "Third_Party": {
+      "Anthropic": {
+        "$type": "color",
+        "$value": "#d97757"
+      },
+      "Chat_Gpt": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "Claude": {
+        "$type": "color",
+        "$value": "#d97757"
+      },
+      "Cursor": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "Discord": {
+        "$type": "color",
+        "$value": "#5865f2"
+      },
+      "Github": {
+        "$type": "color",
+        "$value": "#181717"
+      },
+      "Linkedin": {
+        "$type": "color",
+        "$value": "#0a66c2"
+      },
+      "Make": {
+        "$type": "color",
+        "$value": "#6d00cc"
+      },
+      "N8n": {
+        "$type": "color",
+        "$value": "#ea4b71"
+      },
+      "Perplexity": {
+        "$type": "color",
+        "$value": "#20808d"
+      },
+      "Twitter": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "Youtube": {
+        "$type": "color",
+        "$value": "#ff0000"
+      },
+      "Zapier": {
+        "$type": "color",
+        "$value": "#ff4a00"
+      }
     }
   },
   "Brand": {
@@ -1003,4 +1057,4 @@
       }
     }
   }
-}
+}

package/src/design_system/colors/generated/css_variables.dark.ts

@@ -110,6 +110,19 @@ export const tokens = `
   --color-special-business-plan-background: #408288;
   --color-special-enterprise-plan-background: #48296f;
   --color-special-highlight: #152447;
+  --color-third-party-anthropic: #d97757;
+  --color-third-party-chat-gpt: #ffffff;
+  --color-third-party-claude: #d97757;
+  --color-third-party-cursor: #ffffff;
+  --color-third-party-discord: #5865f2;
+  --color-third-party-github: #ffffff;
+  --color-third-party-linkedin: #0a66c2;
+  --color-third-party-make: #6d00cc;
+  --color-third-party-n8n: #ea4b71;
+  --color-third-party-perplexity: #20808d;
+  --color-third-party-twitter: #ffffff;
+  --color-third-party-youtube: #ff0000;
+  --color-third-party-zapier: #ff4a00;
   --color-rose-light: #e88bb3;
   --color-rose-base: #b8487b;
   --color-rose-dark: #6f234f;

package/src/design_system/colors/generated/css_variables.light.ts

@@ -110,6 +110,19 @@ export const tokens = `
   --color-special-business-plan-background: #a7f2ed;
   --color-special-enterprise-plan-background: #bf97ed;
   --color-special-highlight: #e0ebff;
+  --color-third-party-anthropic: #d97757;
+  --color-third-party-chat-gpt: #000000;
+  --color-third-party-claude: #d97757;
+  --color-third-party-cursor: #000000;
+  --color-third-party-discord: #5865f2;
+  --color-third-party-github: #181717;
+  --color-third-party-linkedin: #0a66c2;
+  --color-third-party-make: #6d00cc;
+  --color-third-party-n8n: #ea4b71;
+  --color-third-party-perplexity: #20808d;
+  --color-third-party-twitter: #000000;
+  --color-third-party-youtube: #ff0000;
+  --color-third-party-zapier: #ff4a00;
   --color-rose-light: #f483b5;
   --color-rose-base: #c6387d;
   --color-rose-dark: #781552;

package/src/design_system/colors/generated/properties_theme.ts

@@ -124,6 +124,21 @@ export const colorProperties = {
         enterprisePlanBackground: 'var(--color-special-enterprise-plan-background)',
         highlight: 'var(--color-special-highlight)',
     },
+    thirdParty: {
+        anthropic: 'var(--color-third-party-anthropic)',
+        chatGpt: 'var(--color-third-party-chat-gpt)',
+        claude: 'var(--color-third-party-claude)',
+        cursor: 'var(--color-third-party-cursor)',
+        discord: 'var(--color-third-party-discord)',
+        github: 'var(--color-third-party-github)',
+        linkedin: 'var(--color-third-party-linkedin)',
+        make: 'var(--color-third-party-make)',
+        n8n: 'var(--color-third-party-n8n)',
+        perplexity: 'var(--color-third-party-perplexity)',
+        twitter: 'var(--color-third-party-twitter)',
+        youtube: 'var(--color-third-party-youtube)',
+        zapier: 'var(--color-third-party-zapier)',
+    },
     rose: {
         light: 'var(--color-rose-light)',
         base: 'var(--color-rose-base)',

package/src/design_system/theme.ts

@@ -1,9 +1,10 @@
 import { colorProperties, darkTheme, lightTheme } from './colors';
-import { devices, layouts, radiuses, shadows, spaces, transitions } from './tokens';
+import { devices, gradients, layouts, radiuses, shadows, spaces, transitions } from './tokens';
 import { typographyTokens } from './typography_theme';
 
 export const theme = {
     color: colorProperties,
+    gradient: gradients,
     colorPalette: { light: lightTheme, dark: darkTheme },
     space: spaces,
     radius: radiuses,

package/src/design_system/tokens/gradients.ts

@@ -0,0 +1,5 @@
+export const gradients = {
+    thirdParty: {
+        make: 'linear-gradient(70deg, #ff00ff 2%, #e80df9 9%, #c024ed 23%, #b02de9 30%, #a42be3 42%, #8527d5 63%, #6021c3 85%)',
+    },
+} as const;

package/src/design_system/tokens/index.ts

@@ -3,3 +3,4 @@ export * from './spaces';
 export * from './shadows';
 export * from './radiuses';
 export * from './transitions';
+export * from './gradients';

package/src/utils/icons.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import type { IconComponent, IconProps } from '@apify/ui-icons';
+
+export type WithSizeIconProps = Omit<IconProps, 'size'>;
+export type WithSizeIconComponent = React.FunctionComponent<WithSizeIconProps>;
+export const withSize = (Icon: IconComponent, size: IconProps['size']): WithSizeIconComponent => {
+    return (props: WithSizeIconProps) => <Icon {...props} size={size} />;
+};
+
+export type WithColorIconProps = Omit<IconProps, 'color'>;
+export type WithColorIconComponent = React.FunctionComponent<WithColorIconProps>;
+export const withColor = (Icon: IconComponent, color: IconProps['color']): WithColorIconComponent => {
+    return (props: WithColorIconProps) => <Icon {...props} color={color} />;
+};
+
+export type WithGradientIconProps = Omit<IconProps, 'color'>;
+export type WithGradientIconComponent = React.FunctionComponent<WithGradientIconProps>;
+// The paths are `currentColor`, so a transparent root color reveals the background painted through the clip path.
+export const withGradient = (
+    Icon: IconComponent,
+    color: IconProps['color'],
+    gradient: string,
+): WithGradientIconComponent => {
+    const GradientIcon = styled(Icon)`
+        @supports (clip-path: url(#icon)) {
+            color: transparent;
+            background: ${gradient};
+        }
+    `;
+    return (props: WithGradientIconProps) => <GradientIcon {...props} color={color} />;
+};

package/src/utils/index.ts

@@ -4,3 +4,4 @@ export * from './image_color';
 export * from './resize_observer';
 export * from './css_utils';
 export * from './type_utils';
+export * from './icons';

package/style/colors/dark.scss

@@ -111,6 +111,19 @@ $tokens: (
   'color-special-business-plan-background': #408288,
   'color-special-enterprise-plan-background': #48296f,
   'color-special-highlight': #152447,
+  'color-third-party-anthropic': #d97757,
+  'color-third-party-chat-gpt': #ffffff,
+  'color-third-party-claude': #d97757,
+  'color-third-party-cursor': #ffffff,
+  'color-third-party-discord': #5865f2,
+  'color-third-party-github': #ffffff,
+  'color-third-party-linkedin': #0a66c2,
+  'color-third-party-make': #6d00cc,
+  'color-third-party-n8n': #ea4b71,
+  'color-third-party-perplexity': #20808d,
+  'color-third-party-twitter': #ffffff,
+  'color-third-party-youtube': #ff0000,
+  'color-third-party-zapier': #ff4a00,
   'color-rose-light': #e88bb3,
   'color-rose-base': #b8487b,
   'color-rose-dark': #6f234f,

package/style/colors/light.scss

@@ -111,6 +111,19 @@ $tokens: (
   'color-special-business-plan-background': #a7f2ed,
   'color-special-enterprise-plan-background': #bf97ed,
   'color-special-highlight': #e0ebff,
+  'color-third-party-anthropic': #d97757,
+  'color-third-party-chat-gpt': #000000,
+  'color-third-party-claude': #d97757,
+  'color-third-party-cursor': #000000,
+  'color-third-party-discord': #5865f2,
+  'color-third-party-github': #181717,
+  'color-third-party-linkedin': #0a66c2,
+  'color-third-party-make': #6d00cc,
+  'color-third-party-n8n': #ea4b71,
+  'color-third-party-perplexity': #20808d,
+  'color-third-party-twitter': #000000,
+  'color-third-party-youtube': #ff0000,
+  'color-third-party-zapier': #ff4a00,
   'color-rose-light': #f483b5,
   'color-rose-base': #c6387d,
   'color-rose-dark': #781552,

package/style/colors/tokens.dark.css

@@ -110,6 +110,19 @@
   --color-special-business-plan-background: #408288;
   --color-special-enterprise-plan-background: #48296f;
   --color-special-highlight: #152447;
+  --color-third-party-anthropic: #d97757;
+  --color-third-party-chat-gpt: #ffffff;
+  --color-third-party-claude: #d97757;
+  --color-third-party-cursor: #ffffff;
+  --color-third-party-discord: #5865f2;
+  --color-third-party-github: #ffffff;
+  --color-third-party-linkedin: #0a66c2;
+  --color-third-party-make: #6d00cc;
+  --color-third-party-n8n: #ea4b71;
+  --color-third-party-perplexity: #20808d;
+  --color-third-party-twitter: #ffffff;
+  --color-third-party-youtube: #ff0000;
+  --color-third-party-zapier: #ff4a00;
   --color-rose-light: #e88bb3;
   --color-rose-base: #b8487b;
   --color-rose-dark: #6f234f;

package/style/colors/tokens.light.css

@@ -110,6 +110,19 @@
   --color-special-business-plan-background: #a7f2ed;
   --color-special-enterprise-plan-background: #bf97ed;
   --color-special-highlight: #e0ebff;
+  --color-third-party-anthropic: #d97757;
+  --color-third-party-chat-gpt: #000000;
+  --color-third-party-claude: #d97757;
+  --color-third-party-cursor: #000000;
+  --color-third-party-discord: #5865f2;
+  --color-third-party-github: #181717;
+  --color-third-party-linkedin: #0a66c2;
+  --color-third-party-make: #6d00cc;
+  --color-third-party-n8n: #ea4b71;
+  --color-third-party-perplexity: #20808d;
+  --color-third-party-twitter: #000000;
+  --color-third-party-youtube: #ff0000;
+  --color-third-party-zapier: #ff4a00;
   --color-rose-light: #f483b5;
   --color-rose-base: #c6387d;
   --color-rose-dark: #781552;