periplo-ui 3.0.1 → 3.1.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.
- package/dist/components/Button/Button.d.ts +2 -2
- package/dist/components/Button/Button.js +5 -4
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Typography/Typography.d.ts +4 -3
- package/dist/components/Typography/Typography.js +33 -17
- package/dist/components/Typography/Typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import { Icon } from '@phosphor-icons/react';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
declare const buttonVariants: (props?: ({
|
|
5
|
-
variant?: "primary" | "secondary" | "ghost" | "text" | "error" | "success" | null | undefined;
|
|
5
|
+
variant?: "primary" | "secondary" | "ghost" | "inverse-ghost" | "text" | "error" | "success" | null | undefined;
|
|
6
6
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
7
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
8
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
@@ -10,7 +10,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
10
10
|
* The visual style of the button.
|
|
11
11
|
* @default primary
|
|
12
12
|
*/
|
|
13
|
-
variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'error' | 'success';
|
|
13
|
+
variant?: 'primary' | 'secondary' | 'ghost' | 'inverse-ghost' | 'text' | 'error' | 'success';
|
|
14
14
|
/**
|
|
15
15
|
* The size of the button, affecting height, padding, and font size.
|
|
16
16
|
* @default md
|
|
@@ -12,10 +12,11 @@ const buttonVariants = cva(
|
|
|
12
12
|
* Defines the visual style of the button
|
|
13
13
|
*/
|
|
14
14
|
variant: {
|
|
15
|
-
primary: "bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200",
|
|
16
|
-
secondary: "bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:disable:bg-neutral-900 disabled:text-neutral-600",
|
|
17
|
-
ghost: "border border-neutral-500 text-primary-foreground hover:bg-neutral-50 active:bg-neutral-100 dark:active:bg-neutral-600 disabled:border-neutral-500 disabled:text-neutral-500 dark:disabled:border-neutral-800 dark:disabled:text-neutral-
|
|
18
|
-
|
|
15
|
+
primary: "bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200 dark:disabled:bg-background-200 dark:disabled:text-neutral",
|
|
16
|
+
secondary: "bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:disable:bg-neutral-900 disabled:text-neutral-600 dark:disabled:text-neutral-300",
|
|
17
|
+
ghost: "border border-neutral-500 text-primary-foreground hover:bg-neutral-50 active:bg-neutral-100 dark:border-neutral dark:text-neutral-50 dark:active:bg-neutral-600 disabled:border-neutral-500 dark:hover:bg-neutral disabled:text-neutral-500 dark:disabled:border-neutral-800 dark:disabled:text-neutral-300",
|
|
18
|
+
"inverse-ghost": "border border-neutral-50 text-neutral-50 hover:bg-neutral hover:border-neutral active:bg-neutral-600 dark:border-neutral-500 dark:text-primary-foreground dark:hover:bg-neutral-50 dark:active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-300 dark:disabled:border-neutral-500 dark:disabled:text-neutral-500",
|
|
19
|
+
text: "hover:bg-neutral-50 active:bg-neutral-100 text-primary-foreground disabled:text-neutral-500 dark:disable:text-neutral-300 dark:text-neutral-50 dark:hover:bg-neutral dark:active:bg-neutral-600",
|
|
19
20
|
error: "bg-error text-white hover:bg-error-800 active:bg-error-900 disabled:bg-error-200 disabled:text-neutral-600",
|
|
20
21
|
success: "bg-success text-white hover:bg-success-800 active:bg-success-900 disabled:bg-success-200 disabled:text-neutral-600"
|
|
21
22
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../../lib/utils'\nimport { Icon, IconWeight } from '@phosphor-icons/react'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr'\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n /**\n * Defines the visual style of the button\n */\n variant: {\n primary:\n 'bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200',\n secondary:\n 'bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:disable:bg-neutral-900 disabled:text-neutral-600',\n ghost:\n 'border border-neutral-500 text-primary-foreground hover:bg-neutral-50 active:bg-neutral-100 dark:active:bg-neutral-600 disabled:border-neutral-500 disabled:text-neutral-500 dark:disabled:border-neutral-800 dark:disabled:text-neutral-
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../../lib/utils'\nimport { Icon, IconWeight } from '@phosphor-icons/react'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr'\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n /**\n * Defines the visual style of the button\n */\n variant: {\n primary:\n 'bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200 dark:disabled:bg-background-200 dark:disabled:text-neutral',\n secondary:\n 'bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:disable:bg-neutral-900 disabled:text-neutral-600 dark:disabled:text-neutral-300',\n ghost:\n 'border border-neutral-500 text-primary-foreground hover:bg-neutral-50 active:bg-neutral-100 dark:border-neutral dark:text-neutral-50 dark:active:bg-neutral-600 disabled:border-neutral-500 dark:hover:bg-neutral disabled:text-neutral-500 dark:disabled:border-neutral-800 dark:disabled:text-neutral-300',\n 'inverse-ghost':\n 'border border-neutral-50 text-neutral-50 hover:bg-neutral hover:border-neutral active:bg-neutral-600 dark:border-neutral-500 dark:text-primary-foreground dark:hover:bg-neutral-50 dark:active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-300 dark:disabled:border-neutral-500 dark:disabled:text-neutral-500',\n text: 'hover:bg-neutral-50 active:bg-neutral-100 text-primary-foreground disabled:text-neutral-500 dark:disable:text-neutral-300 dark:text-neutral-50 dark:hover:bg-neutral dark:active:bg-neutral-600',\n error:\n 'bg-error text-white hover:bg-error-800 active:bg-error-900 disabled:bg-error-200 disabled:text-neutral-600',\n success:\n 'bg-success text-white hover:bg-success-800 active:bg-success-900 disabled:bg-success-200 disabled:text-neutral-600',\n },\n /**\n * Controls the size and padding of the button\n */\n size: {\n sm: 'h-8 px-3 text-sm',\n md: 'h-10 px-4 text-sm',\n lg: 'h-12 px-6 text-base',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n },\n },\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /**\n * The visual style of the button.\n * @default primary\n */\n variant?: 'primary' | 'secondary' | 'ghost' | 'inverse-ghost' | 'text' | 'error' | 'success'\n\n /**\n * The size of the button, affecting height, padding, and font size.\n * @default md\n */\n size?: 'sm' | 'md' | 'lg'\n\n /**\n * Icon component to display at the start of the button content.\n * Use Phosphor icons for consistent styling.\n * @example <Button StartIcon={House}>Home</Button>\n */\n StartIcon?: Icon\n\n /**\n * Icon component to display at the end of the button content.\n * Use Phosphor icons for consistent styling.\n * @example <Button EndIcon={ArrowRight}>Next</Button>\n */\n EndIcon?: Icon\n\n /**\n * When true, displays a loading spinner and disables the button.\n * The spinner replaces the StartIcon if present.\n * @default false\n */\n loading?: boolean\n\n /**\n * When true, creates a circular button with only the StartIcon visible.\n * @default false\n */\n iconOnly?: boolean\n\n /**\n * The content to display inside the button.\n * Not displayed when iconOnly is true.\n */\n children?: React.ReactNode\n}\n\n/**\n * A versatile button component that supports multiple variants, sizes, and icon placements.\n *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With icon\n * <Button StartIcon={House}>Home</Button>\n *\n * // Icon only button\n * <Button StartIcon={Plus} iconOnly aria-label=\"Add item\" />\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant = 'primary', size = 'md', StartIcon, EndIcon, loading, iconOnly, ...props }, ref) => {\n const iconProps = (): { size: number; weight: IconWeight } => {\n switch (size) {\n case 'sm':\n return { size: 16, weight: 'regular' }\n case 'lg':\n return { size: 20, weight: 'regular' }\n default:\n return { size: 18, weight: 'regular' }\n }\n }\n\n const getIconOnlyClasses = () => {\n switch (size) {\n case 'sm':\n return 'h-8 w-8'\n case 'lg':\n return 'h-12 w-12'\n default:\n return 'h-10 w-10'\n }\n }\n\n return (\n <button\n className={cn(\n buttonVariants({ variant, size, className }),\n iconOnly && 'rounded-full p-0',\n iconOnly && getIconOnlyClasses(),\n className,\n )}\n ref={ref}\n disabled={loading}\n {...props}\n >\n {loading && <SpinnerGap {...iconProps()} className=\"animate-spin\" aria-label=\"Loading\" />}\n {StartIcon && !loading && <StartIcon {...iconProps()} />}\n {iconOnly ? <span className=\"sr-only\">{props.children}</span> : props.children}\n {EndIcon && !iconOnly && <EndIcon {...iconProps()} />}\n </button>\n )\n },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,cAAiB,GAAA,GAAA;AAAA,EACrB,6OAAA;AAAA,EACA;AAAA,IACE,QAAU,EAAA;AAAA;AAAA;AAAA;AAAA,MAIR,OAAS,EAAA;AAAA,QACP,OACE,EAAA,yKAAA;AAAA,QACF,SACE,EAAA,8OAAA;AAAA,QACF,KACE,EAAA,6SAAA;AAAA,QACF,eACE,EAAA,qUAAA;AAAA,QACF,IAAM,EAAA,iMAAA;AAAA,QACN,KACE,EAAA,4GAAA;AAAA,QACF,OACE,EAAA;AAAA,OACJ;AAAA;AAAA;AAAA;AAAA,MAIA,IAAM,EAAA;AAAA,QACJ,EAAI,EAAA,kBAAA;AAAA,QACJ,EAAI,EAAA,mBAAA;AAAA,QACJ,EAAI,EAAA;AAAA;AACN,KACF;AAAA,IACA,eAAiB,EAAA;AAAA,MACf,OAAS,EAAA,SAAA;AAAA,MACT,IAAM,EAAA;AAAA;AACR;AAEJ;AAmEA,MAAM,SAAS,KAAM,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAW,EAAA,OAAA,GAAU,WAAW,IAAO,GAAA,IAAA,EAAM,SAAW,EAAA,OAAA,EAAS,OAAS,EAAA,QAAA,EAAU,GAAG,KAAA,IAAS,GAAQ,KAAA;AACzG,IAAA,MAAM,YAAY,MAA4C;AAC5D,MAAA,QAAQ,IAAM;AAAA,QACZ,KAAK,IAAA;AACH,UAAA,OAAO,EAAE,IAAA,EAAM,EAAI,EAAA,MAAA,EAAQ,SAAU,EAAA;AAAA,QACvC,KAAK,IAAA;AACH,UAAA,OAAO,EAAE,IAAA,EAAM,EAAI,EAAA,MAAA,EAAQ,SAAU,EAAA;AAAA,QACvC;AACE,UAAA,OAAO,EAAE,IAAA,EAAM,EAAI,EAAA,MAAA,EAAQ,SAAU,EAAA;AAAA;AACzC,KACF;AAEA,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,QAAQ,IAAM;AAAA,QACZ,KAAK,IAAA;AACH,UAAO,OAAA,SAAA;AAAA,QACT,KAAK,IAAA;AACH,UAAO,OAAA,WAAA;AAAA,QACT;AACE,UAAO,OAAA,WAAA;AAAA;AACX,KACF;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA;AAAA,UACT,cAAe,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,UAC3C,QAAY,IAAA,kBAAA;AAAA,UACZ,YAAY,kBAAmB,EAAA;AAAA,UAC/B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,QAAU,EAAA,OAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAW,OAAA,oBAAA,GAAA,CAAC,cAAY,GAAG,SAAA,IAAa,SAAU,EAAA,cAAA,EAAe,cAAW,SAAU,EAAA,CAAA;AAAA,UACtF,aAAa,CAAC,OAAA,wBAAY,SAAW,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAAA,UACrD,QAAA,uBAAY,MAAK,EAAA,EAAA,SAAA,EAAU,WAAW,QAAM,EAAA,KAAA,CAAA,QAAA,EAAS,IAAU,KAAM,CAAA,QAAA;AAAA,UACrE,WAAW,CAAC,QAAA,wBAAa,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA;AAAA;AAAA;AAAA,KACrD;AAAA;AAGN;AACA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}
|
|
@@ -5,12 +5,13 @@ import * as React from 'react';
|
|
|
5
5
|
*/
|
|
6
6
|
declare const typographyVariants: (props?: ({
|
|
7
7
|
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
|
-
|
|
8
|
+
weight?: "regular" | "bold" | "medium" | "semibold" | null | undefined;
|
|
9
9
|
family?: "montserrat" | "opensans" | null | undefined;
|
|
10
|
-
colors?: "primary" | "error" | "success" | "neutral" | "accent" | "warning" | null | undefined;
|
|
10
|
+
colors?: "primary" | "secondary" | "error" | "success" | "neutral" | "inverse" | "accent" | "warning" | null | undefined;
|
|
11
11
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
12
12
|
export interface TypographyProps extends React.BaseHTMLAttributes<HTMLParagraphElement>, VariantProps<typeof typographyVariants> {
|
|
13
13
|
component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | null;
|
|
14
|
+
colors?: 'neutral' | 'primary' | 'secondary' | 'inverse' | 'accent' | 'success' | 'warning' | 'error';
|
|
14
15
|
}
|
|
15
16
|
/**
|
|
16
17
|
* Typography component that implements the IATI design system
|
|
@@ -18,7 +19,7 @@ export interface TypographyProps extends React.BaseHTMLAttributes<HTMLParagraphE
|
|
|
18
19
|
* Usage:
|
|
19
20
|
* ```tsx
|
|
20
21
|
* // Display text with Montserrat (default)
|
|
21
|
-
* <Typography variant="display-lg"
|
|
22
|
+
* <Typography variant="display-lg" weight="bold">Large Display</Typography>
|
|
22
23
|
*
|
|
23
24
|
* // Headline with Open Sans
|
|
24
25
|
* <Typography variant="headline-md" family="opensans" component="h2">Section Header</Typography>
|
|
@@ -7,21 +7,40 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
9
|
// Display family - Used for large, eye-catching elements in the interface
|
|
10
|
-
"display-lg":
|
|
10
|
+
"display-lg": [
|
|
11
|
+
"text-[36px] md:text-[45px] lg:text-[57px]",
|
|
12
|
+
"leading-[42px] md:leading-[52px] lg:leading-[64px]",
|
|
13
|
+
"-tracking-[0.14px]"
|
|
14
|
+
].join(" "),
|
|
11
15
|
// Large headers or section titles
|
|
12
|
-
"display-md":
|
|
16
|
+
"display-md": [
|
|
17
|
+
"text-[32px] md:text-[38px] lg:text-[45px]",
|
|
18
|
+
"leading-[40px] md:leading-[46px] lg:leading-[52px]"
|
|
19
|
+
].join(" "),
|
|
13
20
|
// Medium-sized prominent headers
|
|
14
|
-
"display-sm":
|
|
21
|
+
"display-sm": [
|
|
22
|
+
"text-[28px] md:text-[32px] lg:text-[36px]",
|
|
23
|
+
"leading-[36px] md:leading-[40px] lg:leading-[44px]"
|
|
24
|
+
].join(" "),
|
|
15
25
|
// Smaller display text for highlighted elements
|
|
16
26
|
// Headline family - Used for article and section headers
|
|
17
|
-
"headline-lg":
|
|
27
|
+
"headline-lg": [
|
|
28
|
+
"text-[28px] md:text-[30px] lg:text-[32px]",
|
|
29
|
+
"leading-[36px] md:leading-[38px] lg:leading-[40px]"
|
|
30
|
+
].join(" "),
|
|
18
31
|
// Primary article headers
|
|
19
|
-
"headline-md":
|
|
32
|
+
"headline-md": [
|
|
33
|
+
"text-[24px] md:text-[26px] lg:text-[28px]",
|
|
34
|
+
"leading-[32px] md:leading-[34px] lg:leading-[36px]"
|
|
35
|
+
].join(" "),
|
|
20
36
|
// Section headers
|
|
21
37
|
"headline-sm": "text-[24px] leading-[32px]",
|
|
22
38
|
// Subsection headers
|
|
23
39
|
// Title family - Used for smaller sections and emphasized content
|
|
24
|
-
"title-lg":
|
|
40
|
+
"title-lg": [
|
|
41
|
+
"text-[18px] md:text-[20px] lg:text-[22px]",
|
|
42
|
+
"leading-[24px] md:leading-[26px] lg:leading-[28px]"
|
|
43
|
+
].join(" "),
|
|
25
44
|
// Large titles for important sections
|
|
26
45
|
"title-md": "text-[16px] leading-[24px] tracking-[0.024px]",
|
|
27
46
|
// Medium titles for general use
|
|
@@ -42,7 +61,7 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
42
61
|
"body-sm": "text-[12px] leading-[16px] tracking-[0.048px]"
|
|
43
62
|
// Small body text for secondary content
|
|
44
63
|
},
|
|
45
|
-
|
|
64
|
+
weight: {
|
|
46
65
|
regular: "font-normal",
|
|
47
66
|
// Regular weight for general text
|
|
48
67
|
medium: "font-medium",
|
|
@@ -61,8 +80,12 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
61
80
|
colors: {
|
|
62
81
|
neutral: "text-neutral-900",
|
|
63
82
|
// Default text color
|
|
83
|
+
inverse: "text-neutral-50",
|
|
84
|
+
// Inverted text color
|
|
64
85
|
primary: "text-primary-600",
|
|
65
86
|
// Primary brand color
|
|
87
|
+
secondary: "text-neutral-600",
|
|
88
|
+
// Secondary brand color
|
|
66
89
|
accent: "text-accent-500",
|
|
67
90
|
// Accent color for emphasis
|
|
68
91
|
success: "text-success-600",
|
|
@@ -75,22 +98,15 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
|
|
|
75
98
|
},
|
|
76
99
|
defaultVariants: {
|
|
77
100
|
variant: "body-md",
|
|
78
|
-
|
|
101
|
+
weight: "regular",
|
|
79
102
|
family: "montserrat",
|
|
80
103
|
colors: "neutral"
|
|
81
104
|
}
|
|
82
105
|
});
|
|
83
106
|
const Typography = React.forwardRef(
|
|
84
|
-
({ className, variant,
|
|
107
|
+
({ className, variant, weight, family, colors, component, ...props }, ref) => {
|
|
85
108
|
const Comp = component ?? "span";
|
|
86
|
-
return /* @__PURE__ */ jsx(
|
|
87
|
-
Comp,
|
|
88
|
-
{
|
|
89
|
-
className: cn(typographyVariants({ variant, fontWeight, family, colors, className })),
|
|
90
|
-
ref,
|
|
91
|
-
...props
|
|
92
|
-
}
|
|
93
|
-
);
|
|
109
|
+
return /* @__PURE__ */ jsx(Comp, { className: cn(typographyVariants({ variant, weight, family, colors, className })), ref, ...props });
|
|
94
110
|
}
|
|
95
111
|
);
|
|
96
112
|
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': 'text-[57px] leading-[
|
|
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-[36px] md:text-[45px] lg:text-[57px]',\n 'leading-[42px] md:leading-[52px] lg:leading-[64px]',\n '-tracking-[0.14px]',\n ].join(' '), // Large headers or section titles\n 'display-md': [\n 'text-[32px] md:text-[38px] lg:text-[45px]',\n 'leading-[40px] md:leading-[46px] lg:leading-[52px]',\n ].join(' '), // Medium-sized prominent headers\n 'display-sm': [\n 'text-[28px] md:text-[32px] lg:text-[36px]',\n 'leading-[36px] md:leading-[40px] 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': 'text-[24px] leading-[32px]', // 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 colors: {\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 colors: '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 colors?: '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, colors, component, ...props }, ref) => {\n const Comp = component ?? 'span'\n return (\n <Comp className={cn(typographyVariants({ variant, weight, family, colors, className }))} ref={ref} {...props} />\n )\n },\n)\n\nTypography.displayName = 'Typography'\n\nexport { Typography, typographyVariants }\n"],"names":[],"mappings":";;;;;AAQM,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,4BAAA;AAAA;AAAA;AAAA,MAGf,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,MAAQ,EAAA;AAAA,MACN,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,MAAQ,EAAA;AAAA;AAEZ,CAAC;AAwBD,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,OAAS,EAAA,MAAA,EAAQ,MAAQ,EAAA,MAAA,EAAQ,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAC5E,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,MAAA,EAAQ,WAAW,CAAC,CAAG,EAAA,GAAA,EAAW,GAAG,KAAO,EAAA,CAAA;AAAA;AAGpH;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
|