✨ feat: Add Haiper, Hedra, Lightricks, PixVerse, Sync, Tripo, Vidu

Author: canisminor1990

src/Bing/index.md

@@ -52,7 +52,7 @@ import { Flexbox } from 'react-layout-kit';
 
 export default () => (
   <Flexbox gap={16} horizontal>
-    <Bing.Avatar size={64} background={Bing.colorGradient} />
+    <Bing.Avatar size={64} background={Bing.colorPrimary} />
     <Bing.Avatar size={64} />
     <Bing.Avatar size={64} shape={'square'} />
   </Flexbox>

src/Haiper/components/Avatar.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      color={'#000'}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Haiper/components/Combine.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Mono from './Mono';
+import Text from './Text';
+
+export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+
+const Combine = memo<CombineProps>(({ ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Mono}
+      Text={Text as any}
+      aria-label={TITLE}
+      iconProps={{
+        shape: 'square',
+      }}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Haiper/components/Mono.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        clipRule="evenodd"
+        d="M17.693 10.613a4.307 4.307 0 110-8.613 4.307 4.307 0 010 8.613zm4.304 6.928a4.394 4.394 0 00-2.724-4.064c-.535-.222-1.104-.3-1.722-.333-.878-.047-1.865-.195-2.684-.444-.84-.254-1.557-.805-2.176-1.423-.62-.618-1.144-1.343-1.428-2.17-.285-.83-.382-1.843-.443-2.711-.06-.86-.26-1.72-.746-2.444a4.417 4.417 0 00-6.786-.66 4.394 4.394 0 00.677 6.77c.7.464 1.582.682 2.452.737.913.058 1.86.18 2.72.438.839.254 1.555.806 2.175 1.424.62.618 1.143 1.343 1.428 2.17.282.819.416 1.838.439 2.711.017.663.1 1.161.319 1.701a4.421 4.421 0 005.793 2.416 4.392 4.392 0 001.438-.969 4.383 4.383 0 001.27-3.148h-.002v-.001zM2 17.693a4.307 4.307 0 108.613 0 4.307 4.307 0 00-8.613 0z"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Haiper/components/Text.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 74 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M63.235 18.933V11.6c0-1.711-.088-2.8-.955-4.045h4.69v3.09C67.723 8.51 69.057 7.4 70.545 7.4c.223 0 .511.022.711.089l.467 4.11h-.133c-.466-.266-1.133-.444-1.845-.444-1.755 0-2.866 1.178-2.866 3.778 0 1.467.334 2.978 1.067 4h-4.712zM61.446 16.823c-.845 1.244-2.622 2.31-4.978 2.31-3.533 0-5.822-2.088-5.822-5.733 0-3.6 2.556-6.044 5.822-6.044 3.11 0 5.022 1.933 5.022 4.711 0 .533.044.911.2 1.289h-7.177c.178 2.044 1.266 3.378 3.488 3.378 1.311 0 2.334-.4 3.445-1.223v1.312zm-5.044-7.667c-.956 0-1.756.822-1.912 2.8h3.778c-.022-1.867-.578-2.8-1.866-2.8zM36.641 7.556h4.69v1.933c.666-1.2 1.91-2.133 3.71-2.133 2.534 0 4.444 2.044 4.444 5.378 0 3.555-2.444 6.4-6.31 6.4a7.41 7.41 0 01-1.845-.245v1.422c0 1.534.2 2.667 1.022 3.689h-4.71V11.267c0-1.578-.2-2.689-1-3.711zm4.556 6.289c0 2.11.622 3.755 2.177 3.755 1.356 0 2.178-1.578 2.178-3.91 0-2.623-.689-4.045-2.133-4.045-1 0-2.222 1.044-2.222 4.2zM33.124 5.889c-.977 0-2.222-.956-2.222-1.911C30.902 3 32.147 2 33.124 2c.956 0 2.244 1 2.244 1.978 0 .955-1.31 1.91-2.244 1.91zm-2.822 1.666h4.69v7.711c0 1.423.199 2.69 1.021 3.667h-4.71v-7.666c0-1.578-.2-2.69-1-3.712zM19.32 11.378V9.823c.844-1.334 2.622-2.467 4.755-2.467 3.289 0 4.8 1.778 4.8 4.6v3.31c0 1.557.244 2.69 1.022 3.667h-4.689V17.2c-.622.956-1.8 1.911-3.644 1.911-1.956 0-3.155-1.066-3.155-2.8 0-1.666 1.11-2.666 3.644-3.288 2.422-.623 3.155-.778 3.155-1.845 0-.911-.822-1.289-2.066-1.289-1.445 0-2.845.645-3.756 1.49h-.066zm2.71 4.489c0 .689.4 1.311 1.267 1.311.978 0 1.911-.867 1.911-2.622V13.51l-1.733.623c-.844.377-1.444.844-1.444 1.733zM1 2.822h5.244v7.067h6.178v-3.49c0-1.51-.222-2.577-1.022-3.577h5.222v12.533c0 1.511.222 2.622 1.022 3.578h-5.222v-6.845H6.244v3.267c0 1.511.223 2.622 1.023 3.578H2.044V6.4c0-1.511-.222-2.578-1.044-3.578z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/Haiper/index.md

@@ -0,0 +1,66 @@
+---
+nav: Components
+group: Application
+title: Haiper
+atomId: Haiper
+description: https://haiper.ai
+---
+
+## Icons
+
+```tsx
+import { Haiper } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => <Haiper size={64} />;
+```
+
+## Text
+
+```tsx
+import { Haiper } from '@lobehub/icons';
+
+export default () => <Haiper.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { Haiper } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <Haiper.Combine size={64} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Haiper } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Haiper.Avatar size={64} />
+    <Haiper.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Haiper } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Haiper.colorPrimary} />
+  </Flexbox>
+);
+```

src/Haiper/index.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import Avatar from './components/Avatar';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+import { COLOR_PRIMARY, TITLE } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  colorPrimary: string;
+  title: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+Icons.title = TITLE;
+export default Icons;

src/Haiper/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'Haiper';
+export const TEXT_MULTIPLE = 1;
+export const SPACE_MULTIPLE = 0.2;
+export const COLOR_PRIMARY = '#9581ff';

src/Hedra/components/Avatar.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Mono}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      color={'#fff'}
+      iconMultiple={0.7}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Hedra/components/Combine.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Mono from './Mono';
+import Text from './Text';
+
+export type CombineProps = Omit<IconCombineProps, 'Icon' | 'Text'>;
+
+const Combine = memo<CombineProps>(({ ...rest }) => {
+  return (
+    <IconCombine
+      Icon={Mono}
+      Text={Text as any}
+      aria-label={TITLE}
+      iconProps={{
+        shape: 'square',
+      }}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;