periplo-ui 3.1.0 → 3.2.0
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,16 +2,17 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
/**
|
|
4
4
|
* Typography variants configuration using class-variance-authority
|
|
5
|
+
* Updated with adjusted mobile/tablet breakpoints while preserving desktop (lg) sizes
|
|
5
6
|
*/
|
|
6
7
|
declare const typographyVariants: (props?: ({
|
|
7
8
|
variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | null | undefined;
|
|
8
9
|
weight?: "regular" | "bold" | "medium" | "semibold" | null | undefined;
|
|
9
10
|
family?: "montserrat" | "opensans" | null | undefined;
|
|
10
|
-
|
|
11
|
+
color?: "primary" | "secondary" | "error" | "success" | "neutral" | "inverse" | "accent" | "warning" | null | undefined;
|
|
11
12
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
12
13
|
export interface TypographyProps extends React.BaseHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
|
|
13
14
|
component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | null;
|
|
14
|
-
|
|
15
|
+
color?: 'neutral' | 'primary' | 'secondary' | 'inverse' | 'accent' | 'success' | 'warning' | 'error';
|
|
15
16
|
}
|
|
16
17
|
/**
|
|
17
18
|
* Typography component that implements the IATI design system
|
|
@@ -8,19 +8,19 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
8
8
|
variant: {
|
|
9
9
|
// Display family - Used for large, eye-catching elements in the interface
|
|
10
10
|
"display-lg": [
|
|
11
|
-
"text-[
|
|
12
|
-
"leading-[
|
|
11
|
+
"text-[49px] md:text-[53px] lg:text-[57px]",
|
|
12
|
+
"leading-[56px] md:leading-[60px] lg:leading-[64px]",
|
|
13
13
|
"-tracking-[0.14px]"
|
|
14
14
|
].join(" "),
|
|
15
15
|
// Large headers or section titles
|
|
16
16
|
"display-md": [
|
|
17
|
-
"text-[
|
|
18
|
-
"leading-[
|
|
17
|
+
"text-[41px] md:text-[43px] lg:text-[45px]",
|
|
18
|
+
"leading-[48px] md:leading-[50px] lg:leading-[52px]"
|
|
19
19
|
].join(" "),
|
|
20
20
|
// Medium-sized prominent headers
|
|
21
21
|
"display-sm": [
|
|
22
|
-
"text-[
|
|
23
|
-
"leading-[
|
|
22
|
+
"text-[32px] md:text-[34px] lg:text-[36px]",
|
|
23
|
+
"leading-[40px] md:leading-[42px] lg:leading-[44px]"
|
|
24
24
|
].join(" "),
|
|
25
25
|
// Smaller display text for highlighted elements
|
|
26
26
|
// Headline family - Used for article and section headers
|
|
@@ -34,7 +34,10 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
34
34
|
"leading-[32px] md:leading-[34px] lg:leading-[36px]"
|
|
35
35
|
].join(" "),
|
|
36
36
|
// Section headers
|
|
37
|
-
"headline-sm":
|
|
37
|
+
"headline-sm": [
|
|
38
|
+
"text-[20px] md:text-[22px] lg:text-[24px]",
|
|
39
|
+
"leading-[28px] md:leading-[30px] lg:leading-[32px]"
|
|
40
|
+
].join(" "),
|
|
38
41
|
// Subsection headers
|
|
39
42
|
// Title family - Used for smaller sections and emphasized content
|
|
40
43
|
"title-lg": [
|
|
@@ -77,7 +80,7 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
77
80
|
opensans: "font-opensans"
|
|
78
81
|
// Alternative font family
|
|
79
82
|
},
|
|
80
|
-
|
|
83
|
+
color: {
|
|
81
84
|
neutral: "text-neutral-900",
|
|
82
85
|
// Default text color
|
|
83
86
|
inverse: "text-neutral-50",
|
|
@@ -100,13 +103,13 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
100
103
|
variant: "body-md",
|
|
101
104
|
weight: "regular",
|
|
102
105
|
family: "montserrat",
|
|
103
|
-
|
|
106
|
+
color: "neutral"
|
|
104
107
|
}
|
|
105
108
|
});
|
|
106
109
|
const Typography = React.forwardRef(
|
|
107
|
-
({ className, variant, weight, family,
|
|
110
|
+
({ className, variant, weight, family, color, component, ...props }, ref) => {
|
|
108
111
|
const Comp = component ?? "span";
|
|
109
|
-
return /* @__PURE__ */ jsx(Comp, { className: cn(typographyVariants({ variant, weight, family,
|
|
112
|
+
return /* @__PURE__ */ jsx(Comp, { className: cn(typographyVariants({ variant, weight, family, color, className })), ref, ...props });
|
|
110
113
|
}
|
|
111
114
|
);
|
|
112
115
|
Typography.displayName = "Typography";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\n/**\n * Typography variants configuration using class-variance-authority\n */\nconst typographyVariants = cva('scroll-m-20 tracking-tight', {\n variants: {\n variant: {\n // Display family - Used for large, eye-catching elements in the interface\n 'display-lg': [\n 'text-[
|
|
1
|
+
{"version":3,"file":"Typography.js","sources":["../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\n/**\n * Typography variants configuration using class-variance-authority\n * Updated with adjusted mobile/tablet breakpoints while preserving desktop (lg) sizes\n */\nconst typographyVariants = cva('scroll-m-20 tracking-tight', {\n variants: {\n variant: {\n // Display family - Used for large, eye-catching elements in the interface\n 'display-lg': [\n 'text-[49px] md:text-[53px] lg:text-[57px]',\n 'leading-[56px] md:leading-[60px] lg:leading-[64px]',\n '-tracking-[0.14px]',\n ].join(' '), // Large headers or section titles\n 'display-md': [\n 'text-[41px] md:text-[43px] lg:text-[45px]',\n 'leading-[48px] md:leading-[50px] lg:leading-[52px]',\n ].join(' '), // Medium-sized prominent headers\n 'display-sm': [\n 'text-[32px] md:text-[34px] lg:text-[36px]',\n 'leading-[40px] md:leading-[42px] lg:leading-[44px]',\n ].join(' '), // Smaller display text for highlighted elements\n\n // Headline family - Used for article and section headers\n 'headline-lg': [\n 'text-[28px] md:text-[30px] lg:text-[32px]',\n 'leading-[36px] md:leading-[38px] lg:leading-[40px]',\n ].join(' '), // Primary article headers\n 'headline-md': [\n 'text-[24px] md:text-[26px] lg:text-[28px]',\n 'leading-[32px] md:leading-[34px] lg:leading-[36px]',\n ].join(' '), // Section headers\n 'headline-sm': [\n 'text-[20px] md:text-[22px] lg:text-[24px]',\n 'leading-[28px] md:leading-[30px] lg:leading-[32px]',\n ].join(' '), // Subsection headers\n\n // Title family - Used for smaller sections and emphasized content\n 'title-lg': [\n 'text-[18px] md:text-[20px] lg:text-[22px]',\n 'leading-[24px] md:leading-[26px] lg:leading-[28px]',\n ].join(' '), // Large titles for important sections\n 'title-md': 'text-[16px] leading-[24px] tracking-[0.024px]', // Medium titles for general use\n 'title-sm': 'text-[14px] leading-[20px]', // Small titles for subsections\n\n // Label family - Used for form elements and navigation\n 'label-lg': 'text-[14px] leading-[20px]', // Large labels for form fields\n 'label-md': 'text-[12px] leading-[16px]', // Medium labels for general use\n 'label-sm': 'text-[11px] leading-[16px]', // Small labels for compact UI elements\n\n // Body family - Used for main content and paragraphs\n 'body-lg': 'text-[16px] leading-[24px] tracking-[0.08px]', // Large body text for primary content\n 'body-md': 'text-[14px] leading-[20px] tracking-[0.035px]', // Medium body text for general content\n 'body-sm': 'text-[12px] leading-[16px] tracking-[0.048px]', // Small body text for secondary content\n },\n weight: {\n regular: 'font-normal', // Regular weight for general text\n medium: 'font-medium', // Medium weight for semi-emphasized text\n semibold: 'font-semibold', // Semibold for important elements\n bold: 'font-bold', // Bold for high emphasis\n },\n family: {\n montserrat: 'font-montserrat', // Default font family\n opensans: 'font-opensans', // Alternative font family\n },\n color: {\n neutral: 'text-neutral-900', // Default text color\n inverse: 'text-neutral-50', // Inverted text color\n primary: 'text-primary-600', // Primary brand color\n secondary: 'text-neutral-600', // Secondary brand color\n accent: 'text-accent-500', // Accent color for emphasis\n success: 'text-success-600', // Success messages\n warning: 'text-warning-500', // Warning messages\n error: 'text-error-600', // Error messages\n },\n },\n defaultVariants: {\n variant: 'body-md',\n weight: 'regular',\n family: 'montserrat',\n color: 'neutral',\n },\n})\n\nexport interface TypographyProps\n extends React.BaseHTMLAttributes<HTMLParagraphElement>,\n VariantProps<typeof typographyVariants> {\n component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | null\n color?: 'neutral' | 'primary' | 'secondary' | 'inverse' | 'accent' | 'success' | 'warning' | 'error'\n}\n\n/**\n * Typography component that implements the IATI design system\n *\n * Usage:\n * ```tsx\n * // Display text with Montserrat (default)\n * <Typography variant=\"display-lg\" weight=\"bold\">Large Display</Typography>\n *\n * // Headline with Open Sans\n * <Typography variant=\"headline-md\" family=\"opensans\" component=\"h2\">Section Header</Typography>\n *\n * // Body text\n * <Typography variant=\"body-md\">Regular paragraph text</Typography>\n * ```\n */\nconst Typography = React.forwardRef<HTMLParagraphElement, TypographyProps>(\n ({ className, variant, weight, family, color, component, ...props }, ref) => {\n const Comp = component ?? 'span'\n return (\n <Comp className={cn(typographyVariants({ variant, weight, family, color, className }))} ref={ref} {...props} />\n )\n },\n)\n\nTypography.displayName = 'Typography'\n\nexport { Typography, typographyVariants }\n"],"names":[],"mappings":";;;;;AASM,MAAA,kBAAA,GAAqB,IAAI,4BAA8B,EAAA;AAAA,EAC3D,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA;AAAA,MAEP,YAAc,EAAA;AAAA,QACZ,2CAAA;AAAA,QACA,oDAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MACV,YAAc,EAAA;AAAA,QACZ,2CAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MACV,YAAc,EAAA;AAAA,QACZ,2CAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA;AAAA,MAGV,aAAe,EAAA;AAAA,QACb,2CAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MACV,aAAe,EAAA;AAAA,QACb,2CAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MACV,aAAe,EAAA;AAAA,QACb,2CAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA;AAAA,MAGV,UAAY,EAAA;AAAA,QACV,2CAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MACV,UAAY,EAAA,+CAAA;AAAA;AAAA,MACZ,UAAY,EAAA,4BAAA;AAAA;AAAA;AAAA,MAGZ,UAAY,EAAA,4BAAA;AAAA;AAAA,MACZ,UAAY,EAAA,4BAAA;AAAA;AAAA,MACZ,UAAY,EAAA,4BAAA;AAAA;AAAA;AAAA,MAGZ,SAAW,EAAA,8CAAA;AAAA;AAAA,MACX,SAAW,EAAA,+CAAA;AAAA;AAAA,MACX,SAAW,EAAA;AAAA;AAAA,KACb;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,aAAA;AAAA;AAAA,MACT,MAAQ,EAAA,aAAA;AAAA;AAAA,MACR,QAAU,EAAA,eAAA;AAAA;AAAA,MACV,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,UAAY,EAAA,iBAAA;AAAA;AAAA,MACZ,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,OAAS,EAAA,kBAAA;AAAA;AAAA,MACT,OAAS,EAAA,iBAAA;AAAA;AAAA,MACT,OAAS,EAAA,kBAAA;AAAA;AAAA,MACT,SAAW,EAAA,kBAAA;AAAA;AAAA,MACX,MAAQ,EAAA,iBAAA;AAAA;AAAA,MACR,OAAS,EAAA,kBAAA;AAAA;AAAA,MACT,OAAS,EAAA,kBAAA;AAAA;AAAA,MACT,KAAO,EAAA;AAAA;AAAA;AACT,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,SAAA;AAAA,IACT,MAAQ,EAAA,SAAA;AAAA,IACR,MAAQ,EAAA,YAAA;AAAA,IACR,KAAO,EAAA;AAAA;AAEX,CAAC;AAwBD,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,OAAS,EAAA,MAAA,EAAQ,MAAQ,EAAA,KAAA,EAAO,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAC3E,IAAA,MAAM,OAAO,SAAa,IAAA,MAAA;AAC1B,IAAA,2BACG,IAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,kBAAA,CAAmB,EAAE,OAAS,EAAA,MAAA,EAAQ,MAAQ,EAAA,KAAA,EAAO,WAAW,CAAC,CAAG,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA;AAAA;AAGnH;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
|