@purr-react-styled-components/components.typography 0.0.8 → 0.0.10

package/dist/index.cjs

@@ -1 +1,34 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),d=require("clsx"),g=require("react"),m=require("@purr-core/utils.helpers"),t=require("styled-components"),u=require("@purr-react-styled-components/utils.helpers"),e=({$size:o,$color:r,$bold:n,$font:i,$align:s})=>t.css(["transition:inherit;font-size:",";font-weight:",";color:",";font-family:",";text-align:",";"],typeof o=="number"?`${o}px`:o,n,r,i,s),f={H1:t.h1.withConfig({displayName:"_style__H1",componentId:"sc-rhhv96-0"})(["",";"],e),H2:t.h2.withConfig({displayName:"_style__H2",componentId:"sc-rhhv96-1"})(["",";"],e),H3:t.h3.withConfig({displayName:"_style__H3",componentId:"sc-rhhv96-2"})(["",";"],e),H4:t.h4.withConfig({displayName:"_style__H4",componentId:"sc-rhhv96-3"})(["",";"],e),H5:t.h5.withConfig({displayName:"_style__H5",componentId:"sc-rhhv96-4"})(["",";"],e),H6:t.h6.withConfig({displayName:"_style__H6",componentId:"sc-rhhv96-5"})(["",";"],e),Span:t.span.withConfig({displayName:"_style__Span",componentId:"sc-rhhv96-6"})(["",";"],e),Caption:t.caption.withConfig({displayName:"_style__Caption",componentId:"sc-rhhv96-7"})(["",";"],e),Button:t.button.withConfig({displayName:"_style__Button",componentId:"sc-rhhv96-8"})(["",";",";"],e,u.getInvisibleButton),A:t.a.withConfig({displayName:"_style__A",componentId:"sc-rhhv96-9"})(["",";cursor:pointer;text-decoration-line:none;"],e),P:t.p.withConfig({displayName:"_style__P",componentId:"sc-rhhv96-10"})(["",";margin-block:0;"],e)},C=({variant:o="span",children:r,size:n="inherit",bold:i=400,color:s="inherit",font:p="inherit",className:a="",align:h="inherit",htmlAttributes:y})=>{const _=g.useMemo(()=>{const c=m.capitalize(o);return f[c]},[o]);return l.jsx(_,{...y,$size:n,$color:s,$bold:i,$font:p,$align:h,className:d("typography",`typography__variant--${o}`,`typography__size--${n}`,`typography__bold--${i}`,`typography__color--${s}`,`typography__font--${p}`,`typography__align--${h}`,a),children:r})};exports.Typography=C;
+'use strict';var P=require('clsx'),I=require('react'),utils_helpers$1=require('@purr-core/utils.helpers'),p=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var P__default=/*#__PURE__*/_interopDefault(P);var I__default=/*#__PURE__*/_interopDefault(I);var p__default=/*#__PURE__*/_interopDefault(p);var o=({$size:y,$color:e,$bold:r,$font:t,$align:a})=>p.css`
+    transition: inherit;
+    font-size: ${typeof y=="number"?`${y}px`:y};
+    font-weight: ${r};
+    color: ${e};
+    font-family: ${t};
+    text-align: ${a};
+  `,g={H1:p__default.default.h1`
+    ${o};
+  `,H2:p__default.default.h2`
+    ${o};
+  `,H3:p__default.default.h3`
+    ${o};
+  `,H4:p__default.default.h4`
+    ${o};
+  `,H5:p__default.default.h5`
+    ${o};
+  `,H6:p__default.default.h6`
+    ${o};
+  `,Span:p__default.default.span`
+    ${o};
+  `,Caption:p__default.default.caption`
+    ${o};
+  `,Button:p__default.default.button`
+    ${o};
+    ${utils_helpers.getInvisibleButton};
+  `,A:p__default.default.a`
+    ${o};
+    cursor: pointer;
+    text-decoration-line: none;
+  `,P:p__default.default.p`
+    ${o};
+    margin-block: 0;
+  `};var H=({variant:y="span",children:e,size:r="inherit",bold:t=400,color:a="inherit",font:s="inherit",className:l="",align:h="inherit",htmlAttributes:d})=>{let n=I.useMemo(()=>{let i=utils_helpers$1.capitalize(y);return g[i]},[y]);return I__default.default.createElement(n,{...d,$size:r,$color:a,$bold:t,$font:s,$align:h,className:P__default.default("typography",`typography__variant--${y}`,`typography__size--${r}`,`typography__bold--${t}`,`typography__color--${a}`,`typography__font--${s}`,`typography__align--${h}`,l)},e)};exports.Typography=H;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,8 +1,8 @@
+import React, { JSX, ReactNode, HTMLAttributes } from 'react';
 import { Property } from 'csstype';
-import { HTMLAttributes, JSX, ReactNode } from 'react';
 import { IExtendable } from '@purr-core/utils.definitions';
 
-export interface ITypographyProps {
+interface ITypographyProps {
     variant?: keyof JSX.IntrinsicElements;
     children?: ReactNode;
     size?: number | string;
@@ -13,10 +13,14 @@ export interface ITypographyProps {
     align?: Property.TextAlign;
     htmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
 }
-export interface IStyledTypographyProps extends HTMLAttributes<HTMLElement>, IExtendable {
+interface IStyledTypographyProps extends HTMLAttributes<HTMLElement>, IExtendable {
     $size?: number | string;
     $color?: string;
     $bold?: number;
     $font?: string;
     $align?: Property.TextAlign;
 }
+
+declare const Typography: ({ variant, children, size, bold, color, font, className, align, htmlAttributes, }: ITypographyProps) => React.JSX.Element;
+
+export { type IStyledTypographyProps, type ITypographyProps, Typography };

package/dist/index.d.ts

@@ -1,2 +1,26 @@
-export * from './_components';
-export * from './_types';
+import React, { JSX, ReactNode, HTMLAttributes } from 'react';
+import { Property } from 'csstype';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+interface ITypographyProps {
+    variant?: keyof JSX.IntrinsicElements;
+    children?: ReactNode;
+    size?: number | string;
+    bold?: number;
+    color?: string;
+    font?: string;
+    className?: string;
+    align?: Property.TextAlign;
+    htmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
+}
+interface IStyledTypographyProps extends HTMLAttributes<HTMLElement>, IExtendable {
+    $size?: number | string;
+    $color?: string;
+    $bold?: number;
+    $font?: string;
+    $align?: Property.TextAlign;
+}
+
+declare const Typography: ({ variant, children, size, bold, color, font, className, align, htmlAttributes, }: ITypographyProps) => React.JSX.Element;
+
+export { type IStyledTypographyProps, type ITypographyProps, Typography };

package/dist/index.js

@@ -1,77 +1,34 @@
-import { jsx as l } from "react/jsx-runtime";
-import c from "clsx";
-import { useMemo as d } from "react";
-import { capitalize as g } from "@purr-core/utils.helpers";
-import t, { css as f } from "styled-components";
-import { getInvisibleButton as C } from "@purr-react-styled-components/utils.helpers";
-const o = ({
-  $size: n,
-  $color: h,
-  $bold: i,
-  $font: e,
-  $align: p
-}) => f(["transition:inherit;font-size:", ";font-weight:", ";color:", ";font-family:", ";text-align:", ";"], typeof n == "number" ? `${n}px` : n, i, h, e, p), w = {
-  H1: t.h1.withConfig({
-    displayName: "_style__H1",
-    componentId: "sc-rhhv96-0"
-  })(["", ";"], o),
-  H2: t.h2.withConfig({
-    displayName: "_style__H2",
-    componentId: "sc-rhhv96-1"
-  })(["", ";"], o),
-  H3: t.h3.withConfig({
-    displayName: "_style__H3",
-    componentId: "sc-rhhv96-2"
-  })(["", ";"], o),
-  H4: t.h4.withConfig({
-    displayName: "_style__H4",
-    componentId: "sc-rhhv96-3"
-  })(["", ";"], o),
-  H5: t.h5.withConfig({
-    displayName: "_style__H5",
-    componentId: "sc-rhhv96-4"
-  })(["", ";"], o),
-  H6: t.h6.withConfig({
-    displayName: "_style__H6",
-    componentId: "sc-rhhv96-5"
-  })(["", ";"], o),
-  Span: t.span.withConfig({
-    displayName: "_style__Span",
-    componentId: "sc-rhhv96-6"
-  })(["", ";"], o),
-  Caption: t.caption.withConfig({
-    displayName: "_style__Caption",
-    componentId: "sc-rhhv96-7"
-  })(["", ";"], o),
-  Button: t.button.withConfig({
-    displayName: "_style__Button",
-    componentId: "sc-rhhv96-8"
-  })(["", ";", ";"], o, C),
-  A: t.a.withConfig({
-    displayName: "_style__A",
-    componentId: "sc-rhhv96-9"
-  })(["", ";cursor:pointer;text-decoration-line:none;"], o),
-  P: t.p.withConfig({
-    displayName: "_style__P",
-    componentId: "sc-rhhv96-10"
-  })(["", ";margin-block:0;"], o)
-}, x = ({
-  variant: n = "span",
-  children: h,
-  size: i = "inherit",
-  bold: e = 400,
-  color: p = "inherit",
-  font: r = "inherit",
-  className: a = "",
-  align: s = "inherit",
-  htmlAttributes: y
-}) => {
-  const _ = d(() => {
-    const m = g(n);
-    return w[m];
-  }, [n]);
-  return /* @__PURE__ */ l(_, { ...y, $size: i, $color: p, $bold: e, $font: r, $align: s, className: c("typography", `typography__variant--${n}`, `typography__size--${i}`, `typography__bold--${e}`, `typography__color--${p}`, `typography__font--${r}`, `typography__align--${s}`, a), children: h });
-};
-export {
-  x as Typography
-};
+import P from'clsx';import I,{useMemo}from'react';import {capitalize}from'@purr-core/utils.helpers';import p,{css}from'styled-components';import {getInvisibleButton}from'@purr-react-styled-components/utils.helpers';var o=({$size:y,$color:e,$bold:r,$font:t,$align:a})=>css`
+    transition: inherit;
+    font-size: ${typeof y=="number"?`${y}px`:y};
+    font-weight: ${r};
+    color: ${e};
+    font-family: ${t};
+    text-align: ${a};
+  `,g={H1:p.h1`
+    ${o};
+  `,H2:p.h2`
+    ${o};
+  `,H3:p.h3`
+    ${o};
+  `,H4:p.h4`
+    ${o};
+  `,H5:p.h5`
+    ${o};
+  `,H6:p.h6`
+    ${o};
+  `,Span:p.span`
+    ${o};
+  `,Caption:p.caption`
+    ${o};
+  `,Button:p.button`
+    ${o};
+    ${getInvisibleButton};
+  `,A:p.a`
+    ${o};
+    cursor: pointer;
+    text-decoration-line: none;
+  `,P:p.p`
+    ${o};
+    margin-block: 0;
+  `};var H=({variant:y="span",children:e,size:r="inherit",bold:t=400,color:a="inherit",font:s="inherit",className:l="",align:h="inherit",htmlAttributes:d})=>{let n=useMemo(()=>{let i=capitalize(y);return g[i]},[y]);return I.createElement(n,{...d,$size:r,$color:a,$bold:t,$font:s,$align:h,className:P("typography",`typography__variant--${y}`,`typography__size--${r}`,`typography__bold--${t}`,`typography__color--${a}`,`typography__font--${s}`,`typography__align--${h}`,l)},e)};export{H as Typography};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.typography",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,9 +25,9 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-core/utils.definitions": "0.0.10",
-    "@purr-core/utils.helpers": "0.0.10",
-    "@purr-react-styled-components/utils.helpers": "0.0.6"
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-core/utils.helpers": "0.0.12",
+    "@purr-react-styled-components/utils.helpers": "0.0.8"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -36,6 +36,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ITypographyProps } from './_types';
-
-export declare const Typography: ({ variant, children, size, bold, color, font, className, align, htmlAttributes, }: ITypographyProps) => React.JSX.Element;

package/dist/_style.d.ts

@@ -1,15 +0,0 @@
-import { IStyledTypographyProps } from './_types';
-
-export declare const Styled: {
-    H1: React.FC<IStyledTypographyProps>;
-    H2: React.FC<IStyledTypographyProps>;
-    H3: React.FC<IStyledTypographyProps>;
-    H4: React.FC<IStyledTypographyProps>;
-    H5: React.FC<IStyledTypographyProps>;
-    H6: React.FC<IStyledTypographyProps>;
-    Span: React.FC<IStyledTypographyProps>;
-    Caption: React.FC<IStyledTypographyProps>;
-    Button: React.FC<IStyledTypographyProps>;
-    A: React.FC<IStyledTypographyProps>;
-    P: React.FC<IStyledTypographyProps>;
-};