@liner-fe/prism 2.1.4 → 2.1.5

package/lib/components/Illust/index.d.ts

@@ -0,0 +1,13 @@
+import { IllustName } from '../../types/illust';
+import { Property } from 'csstype';
+import { ImageProps } from 'next/image';
+interface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {
+    src: IllustName;
+    isOnlyLight?: boolean;
+    width: number;
+    height: number;
+    justifyContent?: Property.JustifyContent;
+    alignItems?: Property.AlignItems;
+}
+export declare const Illust: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/constants/component.d.ts

@@ -12,4 +12,5 @@ export declare const COMPONENT_NAME: {
     readonly LABEL: "Label";
     readonly RADIO: "Radio";
     readonly BADGE: "Badge";
+    readonly ILLUST: "Illust";
 };

package/lib/constants/figma/index.d.ts

@@ -12,6 +12,7 @@ export declare const FIGMA: {
     Label: Figma;
     Radio: Figma;
     Badge: Figma;
+    Illust: Figma;
     Shadow: Figma;
     Padding: Figma;
     Opacity: Figma;

package/lib/constants/illust/name.d.ts

@@ -0,0 +1 @@
+export declare const illustNames: readonly ["rectangle_cheerup_01", "rectangle_cheerup_02", "rectangle_searching", "rectangle_space_work", "rectangle_standing_with_a_star", "square_ai_writing_essay_mode", "square_bomb_timeout", "square_book_pencil_general_mode", "square_brain_deep_q_a", "square_bye_end_custom_ai", "square_careers_page_coffee", "square_careers_page_english", "square_careers_page_money", "square_careers_page_palm", "square_careers_page_shake_hands", "square_careers_page_tennis", "square_clap", "square_decoration_bulb", "square_decoration_hourglass", "square_decoration_star_01", "square_decoration_star_02", "square_decoration_star_03", "square_decoration_star_04", "square_decoration_star_05", "square_decoration_star_06", "square_decoration_star_07", "square_decoration_star_08", "square_decoration_star_09", "square_decoration_star_10", "square_decoration_star_11", "square_documents_reliable_citation", "square_documents_reliable_source", "square_empty_box_2", "square_empty_box_empty_page", "square_feather_pen", "square_find_man", "square_find_paper_use_liner", "square_folder_01", "square_folder_02", "square_free_ticket_welcome", "square_gift_welcome", "square_give_gift", "square_graduation_cap_pencil_scholar_mode", "square_holding_a_book_onboarding", "square_introduce", "square_introduce_pro", "square_lock_locked_thread", "square_magnifying_glass", "square_magnifying_glass_not_found", "square_make_profile_onboarding", "square_megaphone", "square_paper", "square_pencil_paper_empty_history", "square_pricing_page_airplane", "square_pricing_page_car", "square_pricing_page_flag", "square_pricing_page_rocket", "square_raining_error", "square_searching_01", "square_searching_02", "square_searching_03", "square_smoke_timeout", "square_time_out", "square_time_out_time_out_01", "square_time_out_time_out_02", "square_time_out_time_out_03", "square_time_out_time_out_04", "square_understand_concepts_use_liner", "square_university_01", "square_university_02", "square_working_01", "square_worried_01", "square_worried_02", "square_worried_03", "square_worried_04", "square_worried_05", "square_write_essay_use_liner", "square_writing", "square_writing_essay_mode"];

package/lib/constants/illust/size.d.ts

@@ -0,0 +1,5 @@
+import { IllustName } from '../../types/illust';
+export declare const illustSize: Partial<Record<IllustName, {
+    width: number;
+    height: number;
+}>>;

package/lib/index.d.ts

@@ -14,5 +14,6 @@ export * from './components/Slider';
 export * from './components/Select';
 export * from './components/List';
 export * from './components/Label';
+export * from './components/Illust';
 export * from './types/color';
 export * from './type/index';

package/lib/index.mjs

@@ -9384,6 +9384,44 @@ var Item3 = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
   );
 }, "Item");
 var List = Object.assign(ListRoot, { Item: Item3 });
+
+// src/constants/illust/size.ts
+var illustSize = {
+  rectangle_standing_with_a_star: { width: 2422, height: 1282 },
+  rectangle_space_work: { width: 2422, height: 1282 },
+  rectangle_searching: { width: 2422, height: 1282 },
+  rectangle_cheerup_01: { width: 2422, height: 1282 },
+  rectangle_cheerup_02: { width: 2422, height: 1282 }
+};
+
+// src/components/Illust/index.tsx
+import { useDarkTheme } from "@liner-fe/design-token";
+import Image from "next/image";
+import { jsx as jsx178 } from "react/jsx-runtime";
+var ILLUST = "/illust";
+var Illust = /* @__PURE__ */ __name((props) => {
+  const { isDarkMode } = useDarkTheme();
+  const { src, isOnlyLight, width, height, justifyContent = "center", alignItems = "center" } = props;
+  const prefixSrc = (() => {
+    if (isDarkMode && !isOnlyLight) {
+      return `${ILLUST}/dark/`;
+    }
+    return `${ILLUST}/light/`;
+  })();
+  const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : void 0;
+  const css = {
+    width,
+    height,
+    display: "flex",
+    justifyContent,
+    alignItems
+  };
+  if (aspectRatio) {
+    return /* @__PURE__ */ jsx178("div", { style: css, children: /* @__PURE__ */ jsx178(Image, { alt: src, ...props, src: `${prefixSrc}${src}.webp`, width, height: width / aspectRatio }) });
+  }
+  const size = width > height ? height : width;
+  return /* @__PURE__ */ jsx178("div", { style: css, children: /* @__PURE__ */ jsx178(Image, { alt: src, ...props, src: `${prefixSrc}${src}.webp`, width: size, height: size }) });
+}, "Illust");
 export {
   Button,
   Caption,
@@ -9393,6 +9431,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Illust,
   Label,
   List,
   Media,