@stackshift-ui/heading 7.0.0-beta.0 → 7.0.0-beta.3
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.
- package/dist/chunk-S55UV2VR.mjs +60 -0
- package/dist/chunk-UV3MSR7G.mjs +1 -0
- package/dist/heading.d.ts +1 -1
- package/dist/heading.js +1 -1
- package/dist/heading.mjs +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/setupTests.d.ts +2 -0
- package/dist/setupTests.js +1 -0
- package/dist/setupTests.mjs +1 -0
- package/package.json +6 -6
- package/src/heading.tsx +2 -1
- package/dist/chunk-VO7P2XOH.mjs +0 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
// src/heading.tsx
|
|
2
|
+
import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
|
|
3
|
+
import cn from "classnames";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var displayName = "Heading";
|
|
6
|
+
var Heading = ({
|
|
7
|
+
type = "h1",
|
|
8
|
+
style,
|
|
9
|
+
muted = false,
|
|
10
|
+
weight = "bold",
|
|
11
|
+
fontSize = "3xl",
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
// as,
|
|
15
|
+
...props
|
|
16
|
+
}) => {
|
|
17
|
+
var _a;
|
|
18
|
+
const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
19
|
+
const fontSizeMap = {
|
|
20
|
+
xs: "text-xs",
|
|
21
|
+
sm: "text-sm",
|
|
22
|
+
base: "text-base",
|
|
23
|
+
lg: "text-lg",
|
|
24
|
+
xl: "text-xl",
|
|
25
|
+
"2xl": "text-2xl",
|
|
26
|
+
"3xl": "text-3xl",
|
|
27
|
+
"4xl": "text-4xl",
|
|
28
|
+
"5xl": "text-5xl"
|
|
29
|
+
};
|
|
30
|
+
const fontWeightMap = {
|
|
31
|
+
thin: "font-thin",
|
|
32
|
+
extralight: "font-extralight",
|
|
33
|
+
light: "font-light",
|
|
34
|
+
normal: "font-normal",
|
|
35
|
+
semibold: "font-semibold",
|
|
36
|
+
bold: "font-bold",
|
|
37
|
+
medium: "font-medium",
|
|
38
|
+
extrabold: "font-extrabold",
|
|
39
|
+
black: "font-black"
|
|
40
|
+
};
|
|
41
|
+
const size = fontSizeMap[fontSize];
|
|
42
|
+
const fontWeight = fontWeightMap[weight];
|
|
43
|
+
const commonClass = `text-primary ${muted && "text-gray-500"} ${weight ? `${fontWeight}` : "font-bold"} `;
|
|
44
|
+
const variants = {
|
|
45
|
+
h1: `${commonClass} font-bold font-heading ${size != null ? size : `text-4xl lg:text-5xl`} `,
|
|
46
|
+
h2: `${commonClass} ${size != null ? size : `text-3xl lg:text-4xl`} font-bold`,
|
|
47
|
+
h3: `${commonClass} font-bold ${size != null ? size : `text-2xl lg:text-3xl`}`,
|
|
48
|
+
h4: `${commonClass} font-bold text-2xl ${size}`,
|
|
49
|
+
h5: `${commonClass} font-medium text-xl ${size}`,
|
|
50
|
+
h6: `${commonClass} font-medium text-lg ${size}`
|
|
51
|
+
};
|
|
52
|
+
const Element = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(type) ? type : "h1";
|
|
53
|
+
const variantClass = (_a = variants[Element]) != null ? _a : variants.h1;
|
|
54
|
+
return /* @__PURE__ */ jsx(Component, { as: type, className: cn(variantClass, className), ...props, children });
|
|
55
|
+
};
|
|
56
|
+
Heading.displayName = displayName;
|
|
57
|
+
|
|
58
|
+
export {
|
|
59
|
+
Heading
|
|
60
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DefaultComponent as y,useStackShiftUIComponents as $}from"@stackshift-ui/system";import S from"classnames";import{jsx as u}from"react/jsx-runtime";var a="Heading",T=({type:o="h1",style:C,muted:s=!1,weight:l="bold",fontSize:i="3xl",children:m,className:h,...r})=>{var x;let{[a]:d=y}=$(),f={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl"},p={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},t=f[i],c=p[l],e=`text-primary ${s&&"text-gray-500"} ${l?`${c}`:"font-bold"} `,n={h1:`${e} font-bold font-heading ${t!=null?t:"text-4xl lg:text-5xl"} `,h2:`${e} ${t!=null?t:"text-3xl lg:text-4xl"} font-bold`,h3:`${e} font-bold ${t!=null?t:"text-2xl lg:text-3xl"}`,h4:`${e} font-bold text-2xl ${t}`,h5:`${e} font-medium text-xl ${t}`,h6:`${e} font-medium text-lg ${t}`},g=["h1","h2","h3","h4","h5","h6"].includes(o)?o:"h1",b=(x=n[g])!=null?x:n.h1;return u(d,{as:o,className:S(b,h),...r,children:m})};T.displayName=a;export{T as a};
|
package/dist/heading.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLProps, ReactNode } from "react";
|
|
2
2
|
type Type = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
3
|
-
type fontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
|
|
3
|
+
type fontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
|
|
4
4
|
type Weight = "thin" | "extralight" | "light" | "normal" | "semibold" | "bold" | "medium" | "extrabold" | "black";
|
|
5
5
|
export interface HeadingProps extends Omit<HTMLProps<HTMLElement>, "as"> {
|
|
6
6
|
type?: Type;
|
package/dist/heading.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,
|
|
1
|
+
"use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!k.call(t,n)&&n!==l&&s(t,n,{get:()=>e[n],enumerable:!(a=M(e,n))||a.enumerable});return t};var E=(t,e,l)=>(l=t!=null?N(R(t)):{},r(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>r(s({},"__esModule",{value:!0}),t);var v={};W(v,{Heading:()=>p});module.exports=L(v);var i=require("@stackshift-ui/system"),d=E(require("classnames")),c=require("react/jsx-runtime"),f="Heading",p=({type:t="h1",style:e,muted:l=!1,weight:a="bold",fontSize:n="3xl",children:g,className:b,...y})=>{var h;let{[f]:$=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),S={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl"},T={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},o=S[n],u=T[a],x=`text-primary ${l&&"text-gray-500"} ${a?`${u}`:"font-bold"} `,m={h1:`${x} font-bold font-heading ${o!=null?o:"text-4xl lg:text-5xl"} `,h2:`${x} ${o!=null?o:"text-3xl lg:text-4xl"} font-bold`,h3:`${x} font-bold ${o!=null?o:"text-2xl lg:text-3xl"}`,h4:`${x} font-bold text-2xl ${o}`,h5:`${x} font-medium text-xl ${o}`,h6:`${x} font-medium text-lg ${o}`},C=["h1","h2","h3","h4","h5","h6"].includes(t)?t:"h1",H=(h=m[C])!=null?h:m.h1;return(0,c.jsx)($,{as:t,className:(0,d.default)(H,b),...y,children:g})};p.displayName=f;0&&(module.exports={Heading});
|
package/dist/heading.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a}from"./chunk-
|
|
1
|
+
import{a}from"./chunk-UV3MSR7G.mjs";export{a as Heading};
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},h=(t,e,l,
|
|
2
|
+
"use strict";var N=Object.create;var s=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},h=(t,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of P(e))!k.call(t,n)&&n!==l&&s(t,n,{get:()=>e[n],enumerable:!(a=M(e,n))||a.enumerable});return t};var E=(t,e,l)=>(l=t!=null?N(R(t)):{},h(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),L=t=>h(s({},"__esModule",{value:!0}),t);var v={};W(v,{Heading:()=>p});module.exports=L(v);var i=require("@stackshift-ui/system"),d=E(require("classnames")),c=require("react/jsx-runtime"),f="Heading",p=({type:t="h1",style:e,muted:l=!1,weight:a="bold",fontSize:n="3xl",children:g,className:b,...y})=>{var r;let{[f]:$=i.DefaultComponent}=(0,i.useStackShiftUIComponents)(),u={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl","5xl":"text-5xl"},S={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},o=u[n],T=S[a],x=`text-primary ${l&&"text-gray-500"} ${a?`${T}`:"font-bold"} `,m={h1:`${x} font-bold font-heading ${o!=null?o:"text-4xl lg:text-5xl"} `,h2:`${x} ${o!=null?o:"text-3xl lg:text-4xl"} font-bold`,h3:`${x} font-bold ${o!=null?o:"text-2xl lg:text-3xl"}`,h4:`${x} font-bold text-2xl ${o}`,h5:`${x} font-medium text-xl ${o}`,h6:`${x} font-medium text-lg ${o}`},C=["h1","h2","h3","h4","h5","h6"].includes(t)?t:"h1",H=(r=m[C])!=null?r:m.h1;return(0,c.jsx)($,{as:t,className:(0,d.default)(H,b),...y,children:g})};p.displayName=f;0&&(module.exports={Heading});
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";import{a as e}from"./chunk-
|
|
2
|
+
"use strict";import{a as e}from"./chunk-UV3MSR7G.mjs";export{e as Heading};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var b=(p,o,i,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of x(o))!a.call(p,r)&&r!==i&&e(p,r,{get:()=>o[r],enumerable:!(t=m(o,r))||t.enumerable});return p};var c=p=>b(e({},"__esModule",{value:!0}),p);var d={};module.exports=c(d);var g=require("@testing-library/jest-dom");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"@testing-library/jest-dom";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackshift-ui/heading",
|
|
3
3
|
"description": "",
|
|
4
|
-
"version": "7.0.0-beta.
|
|
4
|
+
"version": "7.0.0-beta.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
"typescript": "^5.6.2",
|
|
30
30
|
"vite-tsconfig-paths": "^5.0.1",
|
|
31
31
|
"vitest": "^2.1.1",
|
|
32
|
-
"@stackshift-ui/
|
|
33
|
-
"@stackshift-ui/
|
|
32
|
+
"@stackshift-ui/eslint-config": "6.0.10",
|
|
33
|
+
"@stackshift-ui/typescript-config": "6.0.10"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@testing-library/jest-dom": "^6.5.0",
|
|
37
37
|
"classnames": "^2.5.1",
|
|
38
|
-
"@stackshift-ui/scripts": "6.1.0-beta.
|
|
39
|
-
"@stackshift-ui/system": "6.1.0-beta.
|
|
38
|
+
"@stackshift-ui/scripts": "6.1.0-beta.2",
|
|
39
|
+
"@stackshift-ui/system": "6.1.0-beta.3"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@stackshift-ui/system": ">=6.1.0-beta.
|
|
42
|
+
"@stackshift-ui/system": ">=6.1.0-beta.3",
|
|
43
43
|
"@types/react": "16.8 - 19",
|
|
44
44
|
"next": "10 - 14",
|
|
45
45
|
"react": "16.8 - 19",
|
package/src/heading.tsx
CHANGED
|
@@ -4,7 +4,7 @@ import type { ElementType, HTMLProps, ReactNode } from "react";
|
|
|
4
4
|
|
|
5
5
|
type StyleVariants<T extends string> = Record<T, string>;
|
|
6
6
|
type Type = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
7
|
-
type fontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
|
|
7
|
+
type fontSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
|
|
8
8
|
type Weight =
|
|
9
9
|
| "thin"
|
|
10
10
|
| "extralight"
|
|
@@ -51,6 +51,7 @@ export const Heading: React.FC<HeadingProps> = ({
|
|
|
51
51
|
"2xl": "text-2xl",
|
|
52
52
|
"3xl": "text-3xl",
|
|
53
53
|
"4xl": "text-4xl",
|
|
54
|
+
"5xl": "text-5xl",
|
|
54
55
|
};
|
|
55
56
|
|
|
56
57
|
const fontWeightMap = {
|
package/dist/chunk-VO7P2XOH.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{DefaultComponent as y,useStackShiftUIComponents as $}from"@stackshift-ui/system";import S from"classnames";import{jsx as u}from"react/jsx-runtime";var l="Heading",T=({type:o="h1",style:C,muted:s=!1,weight:n="bold",fontSize:i="3xl",children:m,className:d,...h})=>{var x;let{[l]:r=y}=$(),f={xs:"text-xs",sm:"text-sm",base:"text-base",lg:"text-lg",xl:"text-xl","2xl":"text-2xl","3xl":"text-3xl","4xl":"text-4xl"},p={thin:"font-thin",extralight:"font-extralight",light:"font-light",normal:"font-normal",semibold:"font-semibold",bold:"font-bold",medium:"font-medium",extrabold:"font-extrabold",black:"font-black"},t=f[i],c=p[n],e=`text-primary ${s&&"text-gray-500"} ${n?`${c}`:"font-bold"} `,a={h1:`${e} font-bold font-heading ${t!=null?t:"text-4xl lg:text-5xl"} `,h2:`${e} ${t!=null?t:"text-3xl lg:text-4xl"} font-bold`,h3:`${e} font-bold ${t!=null?t:"text-2xl lg:text-3xl"}`,h4:`${e} font-bold text-2xl ${t}`,h5:`${e} font-medium text-xl ${t}`,h6:`${e} font-medium text-lg ${t}`},g=["h1","h2","h3","h4","h5","h6"].includes(o)?o:"h1",b=(x=a[g])!=null?x:a.h1;return u(r,{as:o,className:S(b,d),...h,"data-testid":l,children:m})};T.displayName=l;export{T as a};
|