@liner-fe/prism 2.1.56 → 2.1.57

package/lib/index.d.ts

@@ -7,6 +7,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ToastProps } from '@radix-ui/react-toast';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
 import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Slider as Slider$1, Select as Select$1, Label as Label$1 } from 'radix-ui';
+import { ImageProps } from 'next/image';
+import { Property } from 'csstype';
 
 interface IconComponentProps {
     className?: string;
@@ -519,4 +521,27 @@ interface LoadingProps {
 }
 declare const Loading: ({ size, level }: LoadingProps) => react_jsx_runtime.JSX.Element;
 
-export { type BasicColorType, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, type CommonButtonProps, DefaultButton, type DefaultButtonProps, Display, type FillFalseLevelType, type FillLevelType, type FillType, Heading, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsPost, type ITitleProps, Icon, IconButton, type IconButtonLevelType, type IconButtonProps, type IconColorType, type IconComponent, type IconComponentProps, type IconKey, type IconMapType, type IconProps, type IconSizeKey, type IconSizeType, type ItemProps, Label, List, Loading, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, Radio, Select, type SelectItemProps, type SelectProps, Slider, TextButton, type TextButtonProps, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, colorKeys, getIconComponent, iconKeyOptions, iconMap, isEmptyObject, objectToArray, rootMediaStyle, useToast };
+type LightIllustType = "decoration-airplane-1_1" | "decoration-bulb-1_1" | "decoration-car-1_1" | "decoration-coffee-1_1" | "decoration-english-1_1" | "decoration-flag-1_1" | "decoration-hourglass-1_1" | "decoration-money-1_1" | "decoration-palm-1_1" | "decoration-rocket-1_1" | "decoration-shake_hands-1_1" | "decoration-star_01-1_1" | "decoration-star_02-1_1" | "decoration-star_03-1_1" | "decoration-star_04-1_1" | "decoration-star_05-1_1" | "decoration-star_06-1_1" | "decoration-star_07-1_1" | "decoration-star_08-1_1" | "decoration-star_09-1_1" | "decoration-star_10-1_1" | "decoration-star_11-1_1" | "decoration-tennis-1_1" | "object-bomb-1_1" | "object-book_pencil-4_3" | "object-brain-1_1" | "object-clap-1_1" | "object-documents_02-1_1" | "object-empty_box-1_1" | "object-empty_box-4_3" | "object-feather_pen-1_1" | "object-folder_01-1_1" | "object-folder_02-1_1" | "object-free_ticket-1_1" | "object-gift-1_1" | "object-give_gift-1_1" | "object-graduation_cap_pencil-4_3" | "object-lock-4_3" | "object-magnifying_glass-1_1" | "object-magnifying_glass-4_3" | "object-megaphone-1_1" | "object-paper-1_1" | "object-pencil_paper-16_9" | "object-puzzle-4_3" | "object-smoke-16_9" | "object-university_01-1_1" | "object-university_02-1_1" | "object_documents_01-1_1" | "object_find_man-1_1" | "person-ai_writing-1_1" | "person-bye-4_3" | "person-cheerup-16_9" | "person-cheerup-4_3" | "person-holding_a_book-1_1" | "person-introduce-1_1" | "person-introduce-pro-1_1" | "person-make_profile-1_1" | "person-raining-1_1" | "person-searching-16_9" | "person-searching_01-1_1" | "person-searching_01-4_3" | "person-searching_02-1_1" | "person-space_in_work-4_3" | "person-standing_with_a_star-16_9" | "person-time_out_01-1_1" | "person-time_out_02-1_1" | "person-time_out_03-1_1" | "person-time_out_04-1_1" | "person-time_out_05-1_1" | "person-understand-1_1" | "person-working_01-4_3" | "person-working_02-4_3" | "person-worried-1_1" | "person-worried_01-4_3" | "person-worried_02-4_3" | "person-worried_03-4_3" | "person-worried_04-4_3" | "person-writing_01-1_1" | "person-writing_02-1_1";
+type DarkIllustType = "decoration-airplane-1_1" | "decoration-bulb-1_1" | "decoration-car-1_1" | "decoration-flag-1_1" | "decoration-hourglass-1_1" | "decoration-rocket-1_1" | "decoration-star_01-1_1" | "decoration-star_02-1_1" | "decoration-star_03-1_1" | "decoration-star_04-1_1" | "decoration-star_05-1_1" | "decoration-star_06-1_1" | "decoration-star_07-1_1" | "decoration-star_08-1_1" | "decoration-star_09-1_1" | "decoration-star_10-1_1" | "decoration-star_11-1_1" | "object-bomb-1_1" | "object-brain-1_1" | "object-clap-1_1" | "object-documents_02-1_1" | "object-empty_box-1_1" | "object-empty_box-4_3" | "object-folder_01-1_1" | "object-folder_02-1_1" | "object-free_ticket-1_1" | "object-gift-1_1" | "object-give_gift-1_1" | "object-graduation_cap_pencil-4_3" | "object-lock-4_3" | "object-magnifying_glass-1_1" | "object-magnifying_glass-4_3" | "object-megaphone-1_1" | "object-paper-1_1" | "object-pencil_paper-16_9" | "object-puzzle-4_3" | "object-smoke-16_9" | "object_documents_01-1_1" | "object_find_man-1_1" | "person-bye-4_3" | "person-holding_a_book-1_1" | "person-introduce-1_1" | "person-introduce-pro-1_1" | "person-make_profile-1_1" | "person-raining-1_1" | "person-searching-16_9" | "person-searching_01-1_1" | "person-searching_01-4_3" | "person-searching_02-1_1" | "person-space_in_work-4_3" | "person-standing_with_a_star-16_9" | "person-time_out_01-1_1" | "person-time_out_02-1_1" | "person-time_out_03-1_1" | "person-time_out_04-1_1" | "person-time_out_05-1_1" | "person-working_01-4_3" | "person-worried-1_1" | "person-worried_01-4_3" | "person-worried_02-4_3" | "person-worried_03-4_3" | "person-worried_04-4_3" | "person-writing_01-1_1";
+type IllustType = DarkIllustType | LightIllustType;
+
+interface Source<T extends false | true = true> {
+    name: IllustType;
+    inverse?: T;
+}
+interface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill' | 'src'> {
+    width: number;
+    src: {
+        light: Source<false>;
+        dark?: Source;
+    };
+    margin?: Property.Margin<string>;
+}
+declare const Illust: (props: IProps) => react_jsx_runtime.JSX.Element;
+
+declare const prefetchIllust: ({ name, isDark }: {
+    name: IllustType;
+    isDark?: boolean;
+}) => Promise<Response>;
+
+export { type BasicColorType, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, type CommonButtonProps, DefaultButton, type DefaultButtonProps, Display, type FillFalseLevelType, type FillLevelType, type FillType, Heading, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsPost, type ITitleProps, Icon, IconButton, type IconButtonLevelType, type IconButtonProps, type IconColorType, type IconComponent, type IconComponentProps, type IconKey, type IconMapType, type IconProps, type IconSizeKey, type IconSizeType, Illust, type ItemProps, Label, List, Loading, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, Radio, Select, type SelectItemProps, type SelectProps, Slider, type Source, TextButton, type TextButtonProps, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, colorKeys, getIconComponent, iconKeyOptions, iconMap, isEmptyObject, objectToArray, prefetchIllust, rootMediaStyle, useToast };

package/lib/index.js

@@ -11686,6 +11686,89 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
   );
 }, "Item");
 var List = Object.assign(ListRoot, { Item });
+
+// src/constants/illust/size.ts
+var ratio = { "16:9": { width: 1344, height: 756 }, "4:3": { width: 1008, height: 756 } };
+var illustSize = {
+  "object-pencil_paper-16_9": ratio["16:9"],
+  "object-smoke-16_9": ratio["16:9"],
+  "person-standing_with_a_star-16_9": ratio["16:9"],
+  "person-searching-16_9": ratio["16:9"],
+  "person-cheerup-16_9": ratio["16:9"],
+  "object-graduation_cap_pencil-4_3": ratio["4:3"],
+  "object-book_pencil-4_3": ratio["4:3"],
+  "object-puzzle-4_3": ratio["4:3"],
+  "object-magnifying_glass-4_3": ratio["4:3"],
+  "object-lock-4_3": ratio["4:3"],
+  "object-empty_box-4_3": ratio["4:3"],
+  "person-working_01-4_3": ratio["4:3"],
+  "person-searching_01-4_3": ratio["4:3"],
+  "person-worried_01-4_3": ratio["4:3"],
+  "person-worried_02-4_3": ratio["4:3"],
+  "person-worried_03-4_3": ratio["4:3"],
+  "person-worried_04-4_3": ratio["4:3"],
+  "person-working_02-4_3": ratio["4:3"],
+  "person-bye-4_3": ratio["4:3"],
+  "person-space_in_work-4_3": ratio["4:3"],
+  "person-cheerup-4_3": ratio["4:3"]
+};
+
+// src/components/Illust/index.tsx
+import Image from "next/image";
+
+// src/constants/illust/path.ts
+var ILLUST = "/illust";
+var DARK_MODE_ILLUST_PREFIX = `${ILLUST}/dark/`;
+var LIGHT_MODE_ILLUST_PREFIX = `${ILLUST}/light/`;
+
+// src/hooks/useIllust.ts
+import { useDarkTheme } from "@liner-fe/design-token";
+var useIllust = /* @__PURE__ */ __name(({ darkSrc, src }) => {
+  const { isDarkMode } = useDarkTheme();
+  const sourcePrefix = (() => {
+    if (isDarkMode) {
+      if (darkSrc?.inverse) {
+        return LIGHT_MODE_ILLUST_PREFIX;
+      }
+      return DARK_MODE_ILLUST_PREFIX;
+    }
+    if (src.inverse === false) {
+      return DARK_MODE_ILLUST_PREFIX;
+    }
+    return LIGHT_MODE_ILLUST_PREFIX;
+  })();
+  const currentSourceByColorTheme = isDarkMode ? darkSrc?.name || src.name : src.name;
+  return { sourcePrefix, currentSourceByColorTheme, isDarkMode };
+}, "useIllust");
+
+// src/components/Illust/index.tsx
+import { jsx as jsx195 } from "react/jsx-runtime";
+var Illust = /* @__PURE__ */ __name((props) => {
+  const { src, width, margin } = props;
+  const { sourcePrefix, currentSourceByColorTheme } = useIllust({
+    darkSrc: src.dark,
+    src: src.light
+  });
+  const aspectRatio = illustSize[currentSourceByColorTheme] ? illustSize[currentSourceByColorTheme].width / illustSize[currentSourceByColorTheme].height : void 0;
+  const css = {
+    width,
+    margin
+  };
+  const source = `${sourcePrefix}${currentSourceByColorTheme}.webp`;
+  return /* @__PURE__ */ jsx195("div", { style: css, children: /* @__PURE__ */ jsx195(
+    Image,
+    {
+      alt: currentSourceByColorTheme,
+      ...props,
+      src: source,
+      width,
+      height: aspectRatio ? width / aspectRatio : width
+    }
+  ) });
+}, "Illust");
+
+// src/utils/illust.ts
+var prefetchIllust = /* @__PURE__ */ __name(async ({ name, isDark = false }) => await fetch(`${ILLUST}${isDark ? "/dark/" : "/light/"}${name}.webp`), "prefetchIllust");
 export {
   Button,
   Caption,
@@ -11695,6 +11778,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Illust,
   Label,
   List,
   Loading,
@@ -11718,6 +11802,7 @@ export {
   iconMap,
   isEmptyObject,
   objectToArray,
+  prefetchIllust,
   rootMediaStyle,
   useToast
 };