@liner-fe/prism 2.1.7 → 2.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,45 +2,34 @@ import { ButtonHTMLAttributes } from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
3
  import { IconProps } from '../Icon';
4
4
  declare const defaultButtonVariants: (props?: ({
5
- level?: "primary" | "secondary" | "tertiary" | "quaternary" | "error" | "inverse" | null | undefined;
5
+ level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse-static" | null | undefined;
6
6
  fill?: boolean | null | undefined;
7
7
  align?: "center" | "spaceBetween" | null | undefined;
8
8
  size?: "m" | "s" | "l" | "cta" | null | undefined;
9
9
  width?: "fit-content" | "full" | null | undefined;
10
10
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
11
- declare const textButtonVariants: (props?: ({
12
- level?: "inverse-primary" | "neutral-primary" | "inverse-static-primary" | null | undefined;
13
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
14
- interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
11
+ export interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
15
12
  as?: 'default' | 'text';
16
13
  asChild?: boolean;
17
14
  }
18
15
  export type FillType = boolean;
19
- export type FillLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'error' | 'inverse';
16
+ export type FillLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'negative' | 'static' | 'inverse-static';
20
17
  export type FillFalseLevelType = 'primary' | 'secondary';
18
+ export type ButtonSizeType = 'cta' | 'l' | 'm' | 's';
21
19
  type DefaultLevelType<T> = T extends true ? FillLevelType : FillFalseLevelType;
22
- type ButtonIconProps = Exclude<IconProps, 'size' | 'thick'>;
20
+ export type ButtonIconProps = Exclude<IconProps, 'size' | 'thick'>;
23
21
  export interface DefaultButtonProps<T extends FillType> extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {
24
- as?: 'default';
25
22
  asChild?: boolean;
26
23
  level?: DefaultLevelType<T>;
27
24
  fill?: T;
28
- size?: 'cta' | 'l' | 'm' | 's';
25
+ size?: ButtonSizeType;
29
26
  align?: 'center' | 'spaceBetween';
30
27
  width?: 'full' | 'fit-content';
31
28
  leftIcon?: ButtonIconProps;
32
29
  rightIcon?: ButtonIconProps;
30
+ isLoading?: boolean;
33
31
  }
34
- type TextLevelType = 'inverse-primary' | 'neutral-primary' | 'inverse-static-primary';
35
- export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
36
- as: 'text';
37
- asChild?: boolean;
38
- level?: TextLevelType;
39
- }
40
- export type ButtonProps = (DefaultButtonProps<FillType> | TextButtonProps) & {
41
- elementName?: string;
42
- };
32
+ export type ButtonProps = DefaultButtonProps<FillType>;
43
33
  export declare const DefaultButton: import("react").ForwardRefExoticComponent<DefaultButtonProps<boolean> & import("react").RefAttributes<HTMLButtonElement>>;
44
- export declare const TextButton: import("react").ForwardRefExoticComponent<TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
45
34
  export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
46
35
  export {};
@@ -2,18 +2,19 @@ import { VariantProps } from 'class-variance-authority';
2
2
  import { ButtonHTMLAttributes } from 'react';
3
3
  import { IconProps } from '../Icon';
4
4
  declare const iconButtonVariants: (props?: ({
5
- level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | null | undefined;
5
+ level?: "primary" | "secondary" | "tertiary" | "quaternary" | "negative" | "static" | "inverse-static" | "inverse" | null | undefined;
6
6
  size?: "m" | "s" | "xs" | "l" | null | undefined;
7
+ fill?: boolean | null | undefined;
7
8
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
- export type IconLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'negative' | 'static';
9
+ export type IconButtonLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'negative' | 'static' | 'inverse' | 'inverse-static';
9
10
  export type IconSizeType = 'l' | 'm' | 's' | 'xs';
10
11
  export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
11
12
  asChild?: boolean;
12
- name: IconProps['name'];
13
- thick?: IconProps['thick'];
14
- fill?: IconProps['fill'];
15
13
  size?: 'l' | 'm' | 's' | 'xs';
16
- level?: IconLevelType;
14
+ fill?: boolean;
15
+ level?: IconButtonLevelType;
16
+ icon: Omit<IconProps, 'className'>;
17
+ isLoading?: boolean;
17
18
  }
18
19
  export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
19
20
  export {};
@@ -10,4 +10,8 @@ interface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {
10
10
  alignItems?: Property.AlignItems;
11
11
  }
12
12
  export declare const Illust: (props: IProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const prefetchIllust: ({ name, isDark }: {
14
+ name: IllustName;
15
+ isDark?: boolean;
16
+ }) => Promise<Response>;
13
17
  export {};
@@ -0,0 +1,21 @@
1
+ import { ButtonIconProps, ButtonSizeType, CommonButtonProps } from '../../index';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ declare const textButtonVariants: (props?: ({
4
+ level?: "primary" | "secondary" | "tertiary" | "inverse-static" | "inverse" | null | undefined;
5
+ size?: "m" | "s" | null | undefined;
6
+ thick?: boolean | null | undefined;
7
+ underline?: boolean | null | undefined;
8
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
9
+ type TextLevelType = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-static';
10
+ type TextButtonSizeType = Extract<ButtonSizeType, 'm' | 's'>;
11
+ export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
12
+ asChild?: boolean;
13
+ level?: TextLevelType;
14
+ thick?: boolean;
15
+ underline?: boolean;
16
+ size?: TextButtonSizeType;
17
+ leftIcon?: ButtonIconProps;
18
+ rightIcon?: ButtonIconProps;
19
+ }
20
+ export declare const TextButton: import("react").ForwardRefExoticComponent<TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
21
+ export {};
@@ -0,0 +1,6 @@
1
+ type ButtonLoadingSizeType = 'm' | 's' | 'xs';
2
+ interface ButtonLoadingProps {
3
+ size: ButtonLoadingSizeType;
4
+ }
5
+ export declare const ButtonLoading: ({ size }: ButtonLoadingProps) => import("react/jsx-runtime").JSX.Element;
6
+ export {};
package/lib/illust.js CHANGED
@@ -1,5 +1,40 @@
1
+ "use strict";
2
+ var __create = Object.create;
1
3
  var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
2
8
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+
31
+ // src/illust.ts
32
+ var illust_exports = {};
33
+ __export(illust_exports, {
34
+ Illust: () => Illust,
35
+ prefetchIllust: () => prefetchIllust
36
+ });
37
+ module.exports = __toCommonJS(illust_exports);
3
38
 
4
39
  // src/constants/illust/size.ts
5
40
  var illustSize = {
@@ -11,18 +46,20 @@ var illustSize = {
11
46
  };
12
47
 
13
48
  // src/components/Illust/index.tsx
14
- import { useDarkTheme } from "@liner-fe/design-token";
15
- import Image from "next/image";
16
- import { jsx } from "react/jsx-runtime";
49
+ var import_design_token = require("@liner-fe/design-token");
50
+ var import_image = __toESM(require("next/image"));
51
+ var import_jsx_runtime = require("react/jsx-runtime");
17
52
  var ILLUST = "/illust";
18
53
  var Illust = /* @__PURE__ */ __name((props) => {
19
- const { isDarkMode } = useDarkTheme();
54
+ const { isDarkMode } = (0, import_design_token.useDarkTheme)();
20
55
  const { src, isOnlyLight, width, height, justifyContent = "center", alignItems = "center" } = props;
21
56
  const prefixSrc = (() => {
57
+ const darkModeIllust = `${ILLUST}/dark/`;
58
+ const lightModeIllust = `${ILLUST}/light/`;
22
59
  if (isDarkMode && !isOnlyLight) {
23
- return `${ILLUST}/dark/`;
60
+ return darkModeIllust;
24
61
  }
25
- return `${ILLUST}/light/`;
62
+ return lightModeIllust;
26
63
  })();
27
64
  const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : void 0;
28
65
  const css = {
@@ -32,13 +69,12 @@ var Illust = /* @__PURE__ */ __name((props) => {
32
69
  justifyContent,
33
70
  alignItems
34
71
  };
72
+ const source = `${prefixSrc}${src}.webp`;
35
73
  if (aspectRatio) {
36
- return /* @__PURE__ */ jsx("div", { style: css, children: /* @__PURE__ */ jsx(Image, { alt: src, ...props, src: `${prefixSrc}${src}.webp`, width, height: width / aspectRatio }) });
74
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { alt: src, ...props, src: source, width, height: width / aspectRatio }) });
37
75
  }
38
76
  const size = width > height ? height : width;
39
- return /* @__PURE__ */ jsx("div", { style: css, children: /* @__PURE__ */ jsx(Image, { alt: src, ...props, src: `${prefixSrc}${src}.webp`, width: size, height: size }) });
77
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: css, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { alt: src, ...props, src: source, width: size, height: size }) });
40
78
  }, "Illust");
41
- export {
42
- Illust
43
- };
79
+ var prefetchIllust = /* @__PURE__ */ __name(async ({ name, isDark = false }) => await fetch(`${ILLUST}${isDark ? "/dark/" : "/light/"}${name}.webp`), "prefetchIllust");
44
80
  //# sourceMappingURL=illust.js.map
package/lib/illust.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/constants/illust/size.ts", "../src/components/Illust/index.tsx"],
4
- "sourcesContent": ["import { IllustName } from '@/types/illust';\n\nexport const illustSize: Partial<Record<IllustName, { width: number; height: number }>> = {\n rectangle_standing_with_a_star: { width: 2422, height: 1282 },\n rectangle_space_work: { width: 2422, height: 1282 },\n rectangle_searching: { width: 2422, height: 1282 },\n rectangle_cheerup_01: { width: 2422, height: 1282 },\n rectangle_cheerup_02: { width: 2422, height: 1282 },\n};\n", "import { illustSize } from '@/constants/illust/size';\nimport { IllustName } from '@/types/illust';\nimport { useDarkTheme } from '@liner-fe/design-token';\nimport { Property } from 'csstype';\nimport Image, { ImageProps } from 'next/image';\nimport { CSSProperties } from 'react';\n\ninterface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {\n src: IllustName;\n isOnlyLight?: boolean;\n width: number;\n height: number;\n justifyContent?: Property.JustifyContent;\n alignItems?: Property.AlignItems;\n}\n\nconst ILLUST = '/illust';\n\nexport const Illust = (props: IProps) => {\n const { isDarkMode } = useDarkTheme();\n const { src, isOnlyLight, width, height, justifyContent = 'center', alignItems = 'center' } = props;\n\n const prefixSrc = (() => {\n if (isDarkMode && !isOnlyLight) {\n return `${ILLUST}/dark/`;\n }\n\n return `${ILLUST}/light/`;\n })();\n\n const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : undefined;\n\n const css: CSSProperties = {\n width,\n height,\n display: 'flex',\n justifyContent,\n alignItems,\n };\n\n if (aspectRatio) {\n return (\n <div style={css}>\n <Image alt={src} {...props} src={`${prefixSrc}${src}.webp`} width={width} height={width / aspectRatio} />\n </div>\n );\n }\n\n const size = width > height ? height : width;\n\n return (\n <div style={css}>\n <Image alt={src} {...props} src={`${prefixSrc}${src}.webp`} width={size} height={size} />\n </div>\n );\n};\n"],
5
- "mappings": ";;;;AAEO,IAAM,aAA6E;AAAA,EACxF,gCAAgC,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC5D,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClD,qBAAqB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EACjD,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClD,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AACpD;;;ACNA,SAAS,oBAAoB;AAE7B,OAAO,WAA2B;AAuC1B;AA3BR,IAAM,SAAS;AAER,IAAM,SAAS,wBAAC,UAAkB;AACvC,QAAM,EAAE,WAAW,IAAI,aAAa;AACpC,QAAM,EAAE,KAAK,aAAa,OAAO,QAAQ,iBAAiB,UAAU,aAAa,SAAS,IAAI;AAE9F,QAAM,aAAa,MAAM;AACvB,QAAI,cAAc,CAAC,aAAa;AAC9B,aAAO,GAAG,MAAM;AAAA,IAClB;AAEA,WAAO,GAAG,MAAM;AAAA,EAClB,GAAG;AAEH,QAAM,cAAc,WAAW,GAAG,IAAI,WAAW,GAAG,EAAE,QAAQ,WAAW,GAAG,EAAE,SAAS;AAEvF,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF;AAEA,MAAI,aAAa;AACf,WACE,oBAAC,SAAI,OAAO,KACV,8BAAC,SAAM,KAAK,KAAM,GAAG,OAAO,KAAK,GAAG,SAAS,GAAG,GAAG,SAAS,OAAc,QAAQ,QAAQ,aAAa,GACzG;AAAA,EAEJ;AAEA,QAAM,OAAO,QAAQ,SAAS,SAAS;AAEvC,SACE,oBAAC,SAAI,OAAO,KACV,8BAAC,SAAM,KAAK,KAAM,GAAG,OAAO,KAAK,GAAG,SAAS,GAAG,GAAG,SAAS,OAAO,MAAM,QAAQ,MAAM,GACzF;AAEJ,GArCsB;",
6
- "names": []
3
+ "sources": ["../src/illust.ts", "../src/constants/illust/size.ts", "../src/components/Illust/index.tsx"],
4
+ "sourcesContent": ["export * from './components/Illust';\n", "import { IllustName } from '@/types/illust';\n\nexport const illustSize: Partial<Record<IllustName, { width: number; height: number }>> = {\n rectangle_standing_with_a_star: { width: 2422, height: 1282 },\n rectangle_space_work: { width: 2422, height: 1282 },\n rectangle_searching: { width: 2422, height: 1282 },\n rectangle_cheerup_01: { width: 2422, height: 1282 },\n rectangle_cheerup_02: { width: 2422, height: 1282 },\n};\n", "import { illustSize } from '@/constants/illust/size';\nimport { IllustName } from '@/types/illust';\nimport { useDarkTheme } from '@liner-fe/design-token';\nimport { Property } from 'csstype';\nimport Image, { ImageProps } from 'next/image';\nimport { CSSProperties } from 'react';\n\ninterface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {\n src: IllustName;\n isOnlyLight?: boolean;\n width: number;\n height: number;\n justifyContent?: Property.JustifyContent;\n alignItems?: Property.AlignItems;\n}\n\nconst ILLUST = '/illust';\n\n// \uB2E4\uD06C\uBAA8\uB4DC \uB9E8 \uCC98\uC74C \uC811\uADFC \uAE5C\uBE61\uC784 \uC774\uC288 \uD574\uACB0\nexport const Illust = (props: IProps) => {\n const { isDarkMode } = useDarkTheme();\n const { src, isOnlyLight, width, height, justifyContent = 'center', alignItems = 'center' } = props;\n\n const prefixSrc = (() => {\n const darkModeIllust = `${ILLUST}/dark/`;\n const lightModeIllust = `${ILLUST}/light/`;\n\n if (isDarkMode && !isOnlyLight) {\n return darkModeIllust;\n }\n\n return lightModeIllust;\n })();\n\n const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : undefined;\n\n const css: CSSProperties = {\n width,\n height,\n display: 'flex',\n justifyContent,\n alignItems,\n };\n\n const source = `${prefixSrc}${src}.webp`;\n\n if (aspectRatio) {\n return (\n <div style={css}>\n <Image alt={src} {...props} src={source} width={width} height={width / aspectRatio} />\n </div>\n );\n }\n\n const size = width > height ? height : width;\n\n return (\n <div style={css}>\n <Image alt={src} {...props} src={source} width={size} height={size} />\n </div>\n );\n};\n\nexport const prefetchIllust = async ({ name, isDark = false }: { name: IllustName; isDark?: boolean }) =>\n await fetch(`${ILLUST}${isDark ? '/dark/' : '/light/'}${name}.webp`);\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,IAAM,aAA6E;AAAA,EACxF,gCAAgC,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC5D,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClD,qBAAqB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EACjD,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,EAClD,sBAAsB,EAAE,OAAO,MAAM,QAAQ,KAAK;AACpD;;;ACNA,0BAA6B;AAE7B,mBAAkC;AA6C1B;AAjCR,IAAM,SAAS;AAGR,IAAM,SAAS,wBAAC,UAAkB;AACvC,QAAM,EAAE,WAAW,QAAI,kCAAa;AACpC,QAAM,EAAE,KAAK,aAAa,OAAO,QAAQ,iBAAiB,UAAU,aAAa,SAAS,IAAI;AAE9F,QAAM,aAAa,MAAM;AACvB,UAAM,iBAAiB,GAAG,MAAM;AAChC,UAAM,kBAAkB,GAAG,MAAM;AAEjC,QAAI,cAAc,CAAC,aAAa;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,cAAc,WAAW,GAAG,IAAI,WAAW,GAAG,EAAE,QAAQ,WAAW,GAAG,EAAE,SAAS;AAEvF,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EACF;AAEA,QAAM,SAAS,GAAG,SAAS,GAAG,GAAG;AAEjC,MAAI,aAAa;AACf,WACE,4CAAC,SAAI,OAAO,KACV,sDAAC,aAAAA,SAAA,EAAM,KAAK,KAAM,GAAG,OAAO,KAAK,QAAQ,OAAc,QAAQ,QAAQ,aAAa,GACtF;AAAA,EAEJ;AAEA,QAAM,OAAO,QAAQ,SAAS,SAAS;AAEvC,SACE,4CAAC,SAAI,OAAO,KACV,sDAAC,aAAAA,SAAA,EAAM,KAAK,KAAM,GAAG,OAAO,KAAK,QAAQ,OAAO,MAAM,QAAQ,MAAM,GACtE;AAEJ,GA1CsB;AA4Cf,IAAM,iBAAiB,8BAAO,EAAE,MAAM,SAAS,MAAM,MAC1D,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,WAAW,SAAS,GAAG,IAAI,OAAO,GADvC;",
6
+ "names": ["Image"]
7
7
  }