@liner-fe/prism 1.8.6 → 1.8.8

package/lib/components/Typography/Caption.d.ts

@@ -1,20 +1,19 @@
-import { HTMLAttributes } from 'react';
-import { BOLD, MEDIUM, NORMAL, REGULAR } from './types';
-interface IPropsNormalBold extends HTMLAttributes<HTMLDivElement> {
+import { BOLD, ITypographyCommon, MEDIUM, NORMAL, REGULAR } from './types';
+interface IPropsNormalBold extends ITypographyCommon<HTMLElement> {
     type: NORMAL;
     size: 1 | 2 | 3;
     weight: BOLD;
 }
-interface IPropsNormalRegular extends HTMLAttributes<HTMLDivElement> {
+interface IPropsNormalRegular extends ITypographyCommon<HTMLElement> {
     type: NORMAL;
     size: 1 | 2 | 3;
     weight: REGULAR;
 }
-interface IPropsNormalMedium extends HTMLAttributes<HTMLDivElement> {
+interface IPropsNormalMedium extends ITypographyCommon<HTMLElement> {
     type: NORMAL;
     size: 1;
     weight: MEDIUM;
 }
 export type ICaptionProps = IPropsNormalBold | IPropsNormalRegular | IPropsNormalMedium;
-export declare const Caption: ({ children, size, weight, type, className, ...rest }: ICaptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Caption: ({ children, size, weight, type, className, color, ...rest }: ICaptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/Typography/Display.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributes } from 'react';
-export interface IDisplayProps extends HTMLAttributes<HTMLDivElement> {
+import { ITypographyCommon } from './types';
+export interface IDisplayProps extends ITypographyCommon {
     size: 1 | 2 | 3;
     type: 'accent' | 'normal';
     weight: 'black';
 }
-export declare const Display: (props: IDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Display: ({ size, type, weight, className, children, color, ...rest }: IDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Typography/Heading.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
-export interface IHeadingProps extends HTMLAttributes<HTMLDivElement> {
+import { ITypographyCommon } from './types';
+export interface IHeadingProps extends ITypographyCommon<HTMLHeadingElement> {
     type: 'answer';
     size: 1 | 2 | 3 | 4 | 5 | 6;
 }
-export declare const Heading: (props: IHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ size, children, type, className, color, ...rest }: IHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Typography/Paragraph.d.ts

@@ -1,19 +1,18 @@
-import { HTMLAttributes } from 'react';
-import { ACCENT, BOLD, MEDIUM, NORMAL, POST, REGULAR } from './types';
-export interface IPropsNormal extends HTMLAttributes<HTMLDivElement> {
+import { ACCENT, BOLD, ITypographyCommon, MEDIUM, NORMAL, POST, REGULAR } from './types';
+export interface IPropsNormal extends ITypographyCommon {
     type: NORMAL;
     size: 1 | 2 | 3 | 4;
     weight: REGULAR | MEDIUM | BOLD;
 }
-export interface IPropsPost extends HTMLAttributes<HTMLDivElement> {
+export interface IPropsPost extends ITypographyCommon {
     type: POST;
     size: 1 | 3;
     weight: REGULAR;
 }
-export interface IPropsAccent extends HTMLAttributes<HTMLDivElement> {
+export interface IPropsAccent extends ITypographyCommon {
     type: ACCENT;
     size: 1 | 2 | 3;
     weight: REGULAR | MEDIUM | BOLD;
 }
 export type ParagraphProps = IPropsNormal | IPropsPost | IPropsAccent;
-export declare const Paragraph: (props: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Paragraph: ({ size, type, weight, className, children, color, ...rest }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Typography/Title.d.ts

@@ -1,8 +1,7 @@
-import { HTMLAttributes } from 'react';
-import { ACCENT, BOLD, MEDIUM, NORMAL } from './types';
-export interface ITitleProps extends HTMLAttributes<HTMLDivElement> {
+import { ACCENT, BOLD, ITypographyCommon, MEDIUM, NORMAL } from './types';
+export interface ITitleProps extends ITypographyCommon {
     type: ACCENT | NORMAL;
     weight: BOLD | MEDIUM;
     size: 1 | 2 | 3 | 4;
 }
-export declare const Title: (props: ITitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: ({ weight, size, type, className, children, color, ...rest }: ITitleProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/Typography/types.d.ts

@@ -1,3 +1,8 @@
+import { SystemKeys } from '@liner-fe/design-token';
+import { HTMLAttributes } from 'react';
+export interface ITypographyCommon<T extends HTMLElement = HTMLParagraphElement> extends HTMLAttributes<T> {
+    color?: SystemKeys;
+}
 export type BLACK = 'black';
 export type BOLD = 'bold';
 export type MEDIUM = 'medium';

package/lib/components/Typography/utils.d.ts

@@ -0,0 +1,3 @@
+import { SystemKeys } from '@liner-fe/design-token';
+import { CSSProperties } from 'react';
+export declare const getStyle: (color?: SystemKeys) => CSSProperties;

package/lib/index.mjs

@@ -4667,16 +4667,19 @@ import { useEffect, useRef, useState } from "react";
 
 // src/components/Typography/Paragraph.tsx
 import clsx3 from "clsx";
+
+// src/components/Typography/utils.ts
+import { vars } from "@liner-fe/design-token";
+var getStyle = /* @__PURE__ */ __name((color) => {
+  const style = {};
+  style.color = color ? vars.color[color] : vars.color["neutral-label-primary"];
+  return style;
+}, "getStyle");
+
+// src/components/Typography/Paragraph.tsx
 import { jsx as jsx92 } from "react/jsx-runtime";
-var Paragraph = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx92(
-    "div",
-    {
-      ...props,
-      className: clsx3(`lp-sys-typo-paragraph${props.size}-${props.type}-${props.weight}`, props.className),
-      children: props.children
-    }
-  );
+var Paragraph = /* @__PURE__ */ __name(({ size, type, weight, className, children, color, ...rest }) => {
+  return /* @__PURE__ */ jsx92("p", { ...rest, className: clsx3(`lp-sys-typo-paragraph${size}-${type}-${weight}`, className), style: getStyle(color), children });
 }, "Paragraph");
 
 // src/components/Toast/index.tsx
@@ -4739,29 +4742,46 @@ var SingleToast = /* @__PURE__ */ __name((props) => {
 // src/components/Typography/Heading.tsx
 import clsx4 from "clsx";
 import { jsx as jsx94 } from "react/jsx-runtime";
-var Heading = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx94("div", { ...props, className: clsx4(`lp-sys-typo-heading${props.size}-${props.type}`, props.className), children: props.children });
+var Heading = /* @__PURE__ */ __name(({ size, children, type, className, color, ...rest }) => {
+  const Element = `h${size}`;
+  return /* @__PURE__ */ jsx94(Element, { ...rest, className: clsx4(`lp-sys-typo-heading${size}-${type}`, className), style: getStyle(color), children });
 }, "Heading");
 
 // src/components/Typography/Display.tsx
 import clsx5 from "clsx";
 import { jsx as jsx95 } from "react/jsx-runtime";
-var Display = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx95("div", { ...props, className: clsx5(`lp-sys-typo-display${props.size}-${props.type}-${props.weight}`, props.className), children: props.children });
+var Display = /* @__PURE__ */ __name(({ size, type, weight, className, children, color, ...rest }) => {
+  return /* @__PURE__ */ jsx95("p", { ...rest, className: clsx5(`lp-sys-typo-display${size}-${type}-${weight}`, className), style: getStyle(color), children });
 }, "Display");
 
 // src/components/Typography/Title.tsx
+import { vars as vars2 } from "@liner-fe/design-token";
 import clsx6 from "clsx";
 import { jsx as jsx96 } from "react/jsx-runtime";
-var Title2 = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx96("div", { ...props, className: clsx6(`lp-sys-typo-title${props.size}-${props.type}-${props.weight}`, props.className), children: props.children });
+var Title2 = /* @__PURE__ */ __name(({ weight, size, type, className, children, color, ...rest }) => {
+  const style = (() => {
+    const style2 = {};
+    if (color) {
+      style2.color = vars2.color[color];
+    }
+    return style2;
+  })();
+  return /* @__PURE__ */ jsx96("p", { ...rest, className: clsx6(`lp-sys-typo-title${size}-${type}-${weight}`, className), style: getStyle(color), children });
 }, "Title");
 
 // src/components/Typography/Caption.tsx
 import clsx7 from "clsx";
 import { jsx as jsx97 } from "react/jsx-runtime";
-var Caption = /* @__PURE__ */ __name(({ children, size, weight, type, className, ...rest }) => {
-  return /* @__PURE__ */ jsx97("div", { ...rest, className: clsx7(`lp-sys-typo-caption${size}-${type}-${weight}`, className), children });
+var Caption = /* @__PURE__ */ __name(({ children, size, weight, type, className, color, ...rest }) => {
+  return /* @__PURE__ */ jsx97(
+    "caption",
+    {
+      ...rest,
+      className: clsx7(`lp-sys-typo-caption${size}-${type}-${weight}`, className),
+      style: getStyle(color),
+      children
+    }
+  );
 }, "Caption");
 
 // src/components/Popover/index.tsx