periplo-ui 3.3.0 → 3.4.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.
@@ -5,7 +5,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
5
5
  endContent?: React.ReactElement;
6
6
  groupText?: string;
7
7
  disabled?: boolean;
8
- error?: boolean;
8
+ error?: boolean | string;
9
9
  }
10
10
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
11
11
  export { Input };
@@ -10,65 +10,61 @@ const Input = React.forwardRef(
10
10
  const toggleType = () => {
11
11
  setType(type === "password" ? "text" : "password");
12
12
  };
13
- const rendePasswordEye = () => {
13
+ const renderPasswordEye = () => {
14
14
  return /* @__PURE__ */ jsx(
15
15
  "button",
16
16
  {
17
17
  type: "button",
18
- className: "password-eye-icon flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-gray-100",
18
+ className: "flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-neutral-50",
19
19
  onClick: () => toggleType(),
20
20
  children: type === "password" ? /* @__PURE__ */ jsx(EyeSlash, { size: 20, "data-testid": "password-eye-closed" }) : /* @__PURE__ */ jsx(Eye, { size: 20, "data-testid": "password-eye-open" })
21
21
  }
22
22
  );
23
23
  };
24
- return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
25
- groupText && /* @__PURE__ */ jsx(
26
- "div",
27
- {
28
- className: cn(
29
- "outline-l flex h-10 items-center rounded-l-lg border-y border-l border-gray-300 bg-neutral-50 pl-4 pr-2 text-neutral-300"
30
- ),
31
- children: groupText
32
- }
33
- ),
34
- /* @__PURE__ */ jsxs(
35
- "div",
36
- {
37
- className: cn(
38
- "flex h-10 w-full grow-0 items-center rounded-lg border border-gray-300 bg-[#ffffff] px-2 transition-colors focus-within:border-neutral-950",
39
- groupText && "rounded-none rounded-r-lg",
40
- disabled && "bg-neutral-50",
41
- (error ?? props["aria-invalid"]) && "border-error-400 focus-within:border-error-700",
42
- className
43
- ),
44
- children: [
45
- startContent && /* @__PURE__ */ jsx("div", { className: "text-neutral-400", children: startContent }),
46
- /* @__PURE__ */ jsx(
47
- "input",
48
- {
49
- type,
50
- className: cn(
51
- "placeholder:text-muted-foreground w-full grow-0 px-2 placeholder-neutral-500 outline-0 transition-colors file:border-0 file:bg-transparent file:font-medium disabled:cursor-not-allowed disabled:opacity-50"
52
- ),
53
- ref,
54
- placeholder,
55
- disabled,
56
- ...props
57
- }
24
+ return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
25
+ /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
26
+ groupText && /* @__PURE__ */ jsx(
27
+ "div",
28
+ {
29
+ className: cn(
30
+ "flex h-10 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pl-4 pr-2 text-neutral-300"
58
31
  ),
59
- error && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
60
- WarningCircle,
61
- {
62
- "data-testid": "exclaim-icon",
63
- className: cn("text-error-500", isHtmlTypePassword),
64
- size: 18
65
- }
66
- ) }),
67
- isHtmlTypePassword && rendePasswordEye(),
68
- endContent && !error && !isHtmlTypePassword && /* @__PURE__ */ jsx("div", { className: "w-5 text-neutral-400", children: endContent })
69
- ]
70
- }
71
- )
32
+ children: groupText
33
+ }
34
+ ),
35
+ /* @__PURE__ */ jsxs(
36
+ "div",
37
+ {
38
+ className: cn(
39
+ "flex h-10 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950",
40
+ groupText && "rounded-l-none",
41
+ disabled && "bg-neutral-50",
42
+ error && "border-error-400 focus-within:border-error-700",
43
+ className
44
+ ),
45
+ children: [
46
+ startContent && /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: startContent }),
47
+ /* @__PURE__ */ jsx(
48
+ "input",
49
+ {
50
+ type,
51
+ className: cn(
52
+ "w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50"
53
+ ),
54
+ ref,
55
+ placeholder,
56
+ disabled,
57
+ ...props
58
+ }
59
+ ),
60
+ error && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WarningCircle, { "data-testid": "exclaim-icon", className: "text-error-500", size: 18 }) }),
61
+ isHtmlTypePassword && renderPasswordEye(),
62
+ endContent && !error && !isHtmlTypePassword && /* @__PURE__ */ jsx("div", { className: "text-neutral-300", children: endContent })
63
+ ]
64
+ }
65
+ )
66
+ ] }),
67
+ typeof error === "string" && /* @__PURE__ */ jsx("span", { className: "text-sm text-error-500", children: error })
72
68
  ] });
73
69
  }
74
70
  );
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n htmlType?: 'text' | 'tel' | 'email' | 'number' | 'password' | 'url'\n startContent?: React.ReactElement\n endContent?: React.ReactElement\n groupText?: string\n disabled?: boolean\n error?: boolean\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n { className, htmlType = 'text', placeholder, startContent, endContent, groupText, disabled, error, ...props },\n ref,\n ) => {\n const isHtmlTypePassword = htmlType === 'password'\n const [type, setType] = React.useState(htmlType)\n\n const toggleType = () => {\n setType(type === 'password' ? 'text' : 'password')\n }\n\n const rendePasswordEye = () => {\n return (\n <button\n type=\"button\"\n className=\"password-eye-icon flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-gray-100\"\n onClick={() => toggleType()}\n >\n {type === 'password' ? (\n <EyeSlash size={20} data-testid=\"password-eye-closed\" />\n ) : (\n <Eye size={20} data-testid=\"password-eye-open\" />\n )}\n </button>\n )\n }\n return (\n <div className=\"flex w-full items-center\">\n {groupText && (\n <div\n className={cn(\n 'outline-l flex h-10 items-center rounded-l-lg border-y border-l border-gray-300 bg-neutral-50 pl-4 pr-2 text-neutral-300',\n )}\n >\n {groupText}\n </div>\n )}\n <div\n className={cn(\n 'flex h-10 w-full grow-0 items-center rounded-lg border border-gray-300 bg-[#ffffff] px-2 transition-colors focus-within:border-neutral-950',\n groupText && 'rounded-none rounded-r-lg',\n disabled && 'bg-neutral-50',\n (error ?? props['aria-invalid']) && 'border-error-400 focus-within:border-error-700',\n className,\n )}\n >\n {startContent && <div className=\"text-neutral-400\">{startContent}</div>}\n <input\n type={type}\n className={cn(\n 'placeholder:text-muted-foreground w-full grow-0 px-2 placeholder-neutral-500 outline-0 transition-colors file:border-0 file:bg-transparent file:font-medium disabled:cursor-not-allowed disabled:opacity-50',\n )}\n ref={ref}\n placeholder={placeholder}\n disabled={disabled}\n {...props}\n />\n\n {error && (\n <div>\n <WarningCircle\n data-testid=\"exclaim-icon\"\n className={cn('text-error-500', isHtmlTypePassword)}\n size={18}\n />\n </div>\n )}\n {isHtmlTypePassword && rendePasswordEye()}\n {endContent && !error && !isHtmlTypePassword && <div className=\"w-5 text-neutral-400\">{endContent}</div>}\n </div>\n </div>\n )\n },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":[],"mappings":";;;;;AAcA,MAAM,QAAQ,KAAM,CAAA,UAAA;AAAA,EAClB,CACE,EAAE,SAAW,EAAA,QAAA,GAAW,QAAQ,WAAa,EAAA,YAAA,EAAc,UAAY,EAAA,SAAA,EAAW,QAAU,EAAA,KAAA,EAAO,GAAG,KAAA,IACtG,GACG,KAAA;AACH,IAAA,MAAM,qBAAqB,QAAa,KAAA,UAAA;AACxC,IAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAAS,QAAQ,CAAA;AAE/C,IAAA,MAAM,aAAa,MAAM;AACvB,MAAQ,OAAA,CAAA,IAAA,KAAS,UAAa,GAAA,MAAA,GAAS,UAAU,CAAA;AAAA,KACnD;AAEA,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MACE,uBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,QAAA;AAAA,UACL,SAAU,EAAA,sIAAA;AAAA,UACV,OAAA,EAAS,MAAM,UAAW,EAAA;AAAA,UAEzB,QAAS,EAAA,IAAA,KAAA,UAAA,mBACP,GAAA,CAAA,QAAA,EAAA,EAAS,MAAM,EAAI,EAAA,aAAA,EAAY,qBAAsB,EAAA,CAAA,mBAErD,GAAA,CAAA,GAAA,EAAA,EAAI,IAAM,EAAA,EAAA,EAAI,eAAY,mBAAoB,EAAA;AAAA;AAAA,OAEnD;AAAA,KAEJ;AACA,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,MACC,SAAA,oBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,EAAA;AAAA,YACT;AAAA,WACF;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEF,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,EAAA;AAAA,YACT,4IAAA;AAAA,YACA,SAAa,IAAA,2BAAA;AAAA,YACb,QAAY,IAAA,eAAA;AAAA,YACX,CAAA,KAAA,IAAS,KAAM,CAAA,cAAc,CAAM,KAAA,gDAAA;AAAA,YACpC;AAAA,WACF;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,YAAA,oBAAiB,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kBAAA,EAAoB,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,4BACjE,GAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,IAAA;AAAA,gBACA,SAAW,EAAA,EAAA;AAAA,kBACT;AAAA,iBACF;AAAA,gBACA,GAAA;AAAA,gBACA,WAAA;AAAA,gBACA,QAAA;AAAA,gBACC,GAAG;AAAA;AAAA,aACN;AAAA,YAEC,KAAA,wBACE,KACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,aAAY,EAAA,cAAA;AAAA,gBACZ,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,kBAAkB,CAAA;AAAA,gBAClD,IAAM,EAAA;AAAA;AAAA,aAEV,EAAA,CAAA;AAAA,YAED,sBAAsB,gBAAiB,EAAA;AAAA,YACvC,UAAA,IAAc,CAAC,KAAS,IAAA,CAAC,sCAAuB,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,sBAAA,EAAwB,QAAW,EAAA,UAAA,EAAA;AAAA;AAAA;AAAA;AACpG,KACF,EAAA,CAAA;AAAA;AAGN;AACA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}
1
+ {"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { Eye, EyeSlash, WarningCircle } from '@phosphor-icons/react/dist/ssr'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n htmlType?: 'text' | 'tel' | 'email' | 'number' | 'password' | 'url'\n startContent?: React.ReactElement\n endContent?: React.ReactElement\n groupText?: string\n disabled?: boolean\n error?: boolean | string\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n { className, htmlType = 'text', placeholder, startContent, endContent, groupText, disabled, error, ...props },\n ref,\n ) => {\n const isHtmlTypePassword = htmlType === 'password'\n const [type, setType] = React.useState(htmlType)\n\n const toggleType = () => {\n setType(type === 'password' ? 'text' : 'password')\n }\n\n const renderPasswordEye = () => {\n return (\n <button\n type=\"button\"\n className=\"flex aspect-square cursor-pointer items-center justify-center rounded-full p-2 transition-colors hover:bg-neutral-50\"\n onClick={() => toggleType()}\n >\n {type === 'password' ? (\n <EyeSlash size={20} data-testid=\"password-eye-closed\" />\n ) : (\n <Eye size={20} data-testid=\"password-eye-open\" />\n )}\n </button>\n )\n }\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <div className=\"flex w-full items-center\">\n {groupText && (\n <div\n className={cn(\n 'flex h-10 items-center rounded-l-lg border-y border-l border-neutral-200 bg-neutral-50 pl-4 pr-2 text-neutral-300',\n )}\n >\n {groupText}\n </div>\n )}\n <div\n className={cn(\n 'flex h-10 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n groupText && 'rounded-l-none',\n disabled && 'bg-neutral-50',\n error && 'border-error-400 focus-within:border-error-700',\n className,\n )}\n >\n {startContent && <div className=\"text-neutral-300\">{startContent}</div>}\n <input\n type={type}\n className={cn(\n 'w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n )}\n ref={ref}\n placeholder={placeholder}\n disabled={disabled}\n {...props}\n />\n\n {error && (\n <div>\n <WarningCircle data-testid=\"exclaim-icon\" className=\"text-error-500\" size={18} />\n </div>\n )}\n {isHtmlTypePassword && renderPasswordEye()}\n {endContent && !error && !isHtmlTypePassword && <div className=\"text-neutral-300\">{endContent}</div>}\n </div>\n </div>\n {typeof error === 'string' && <span className=\"text-sm text-error-500\">{error}</span>}\n </div>\n )\n },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":[],"mappings":";;;;;AAcA,MAAM,QAAQ,KAAM,CAAA,UAAA;AAAA,EAClB,CACE,EAAE,SAAW,EAAA,QAAA,GAAW,QAAQ,WAAa,EAAA,YAAA,EAAc,UAAY,EAAA,SAAA,EAAW,QAAU,EAAA,KAAA,EAAO,GAAG,KAAA,IACtG,GACG,KAAA;AACH,IAAA,MAAM,qBAAqB,QAAa,KAAA,UAAA;AACxC,IAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAAS,QAAQ,CAAA;AAE/C,IAAA,MAAM,aAAa,MAAM;AACvB,MAAQ,OAAA,CAAA,IAAA,KAAS,UAAa,GAAA,MAAA,GAAS,UAAU,CAAA;AAAA,KACnD;AAEA,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MACE,uBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,QAAA;AAAA,UACL,SAAU,EAAA,sHAAA;AAAA,UACV,OAAA,EAAS,MAAM,UAAW,EAAA;AAAA,UAEzB,QAAS,EAAA,IAAA,KAAA,UAAA,mBACP,GAAA,CAAA,QAAA,EAAA,EAAS,MAAM,EAAI,EAAA,aAAA,EAAY,qBAAsB,EAAA,CAAA,mBAErD,GAAA,CAAA,GAAA,EAAA,EAAI,IAAM,EAAA,EAAA,EAAI,eAAY,mBAAoB,EAAA;AAAA;AAAA,OAEnD;AAAA,KAEJ;AAEA,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4BACb,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QACC,SAAA,oBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,cACT;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBAEF,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,cACT,oIAAA;AAAA,cACA,SAAa,IAAA,gBAAA;AAAA,cACb,QAAY,IAAA,eAAA;AAAA,cACZ,KAAS,IAAA,gDAAA;AAAA,cACT;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,YAAA,oBAAiB,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kBAAA,EAAoB,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,8BACjE,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,IAAA;AAAA,kBACA,SAAW,EAAA,EAAA;AAAA,oBACT;AAAA,mBACF;AAAA,kBACA,GAAA;AAAA,kBACA,WAAA;AAAA,kBACA,QAAA;AAAA,kBACC,GAAG;AAAA;AAAA,eACN;AAAA,cAEC,KAAA,oBACE,GAAA,CAAA,KAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,aAAY,EAAA,cAAA,EAAe,SAAU,EAAA,gBAAA,EAAiB,IAAM,EAAA,EAAA,EAAI,CACjF,EAAA,CAAA;AAAA,cAED,sBAAsB,iBAAkB,EAAA;AAAA,cACxC,UAAA,IAAc,CAAC,KAAS,IAAA,CAAC,sCAAuB,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,kBAAA,EAAoB,QAAW,EAAA,UAAA,EAAA;AAAA;AAAA;AAAA;AAChG,OACF,EAAA,CAAA;AAAA,MACC,OAAO,KAAU,KAAA,QAAA,wBAAa,MAAK,EAAA,EAAA,SAAA,EAAU,0BAA0B,QAAM,EAAA,KAAA,EAAA;AAAA,KAChF,EAAA,CAAA;AAAA;AAGN;AACA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}
@@ -11,11 +11,7 @@ const Separator = React.forwardRef(
11
11
  ref,
12
12
  decorative,
13
13
  orientation,
14
- className: cn(
15
- "shrink-0 bg-neutral-100",
16
- orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
17
- className
18
- ),
14
+ className: cn("shrink-0 bg-neutral-100", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
19
15
  ...props
20
16
  }
21
17
  )
@@ -1 +1 @@
1
- {"version":3,"file":"Separator.js","sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n\nimport { cn } from '@/lib/utils'\n\ninterface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n /** The orientation of the separator.\n * @default horizontal\n */\n orientation?: 'horizontal' | 'vertical'\n /** Whether the separator is decorative or semantic. Decorative separators are hidden from screen readers.\n * @default true\n */\n decorative?: boolean\n /** Change the default rendered element for the one passed as a child, merging their props and behavior. */\n asChild?: boolean\n}\n\nconst Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive.Root>, SeparatorProps>(\n ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n 'shrink-0 bg-neutral-100',\n orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n className,\n )}\n {...props}\n />\n ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"names":[],"mappings":";;;;;;AAoBA;AAAwB;AAEpB;AAAoB;AAAnB;AACC;AACA;AACA;AACW;AACT;AACkD;AAClD;AACF;AACI;AAAA;AAGV;AACA;;"}
1
+ {"version":3,"file":"Separator.js","sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n\nimport { cn } from '@/lib/utils'\n\ninterface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n /** The orientation of the separator.\n * @default horizontal\n */\n orientation?: 'horizontal' | 'vertical'\n /** Whether the separator is decorative or semantic. Decorative separators are hidden from screen readers.\n * @default true\n */\n decorative?: boolean\n /** Change the default rendered element for the one passed as a child, merging their props and behavior. */\n asChild?: boolean\n}\n\nconst Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive.Root>, SeparatorProps>(\n ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn('shrink-0 bg-neutral-100', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className)}\n {...props}\n />\n ),\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"names":[],"mappings":";;;;;;AAoBA;AAAwB;AAEpB;AAAoB;AAAnB;AACC;AACA;AACA;AACgH;AAC5G;AAAA;AAGV;AACA;;"}
@@ -1,7 +1,8 @@
1
1
  import * as React from 'react';
2
2
  export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
3
3
  disabled?: boolean;
4
- error?: boolean;
4
+ error?: boolean | string;
5
+ resize?: boolean;
5
6
  }
6
7
  declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
7
8
  export { Textarea };
@@ -1,23 +1,39 @@
1
- import { jsx } from 'react/jsx-runtime';
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
+ import { WarningCircle } from '@phosphor-icons/react/dist/ssr';
3
4
  import { cn } from '../../lib/utils.js';
4
5
 
5
6
  const Textarea = React.forwardRef(
6
- ({ className, disabled, error, ...props }, ref) => {
7
- return /* @__PURE__ */ jsx(
8
- "textarea",
9
- {
10
- className: cn(
11
- "placeholder:text-muted-foreground flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-1 ring-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50",
12
- disabled && "bg-neutral-50",
13
- error && " ring-error-400 focus-visible:ring-error-700",
14
- className
15
- ),
16
- disabled,
17
- ref,
18
- ...props
19
- }
20
- );
7
+ ({ className, disabled, error, resize = false, ...props }, ref) => {
8
+ return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
9
+ /* @__PURE__ */ jsx("div", { className: "flex w-full items-start", children: /* @__PURE__ */ jsxs(
10
+ "div",
11
+ {
12
+ className: cn(
13
+ "relative flex w-full rounded-lg border border-neutral-200 bg-white transition-colors focus-within:border-neutral-950",
14
+ disabled && "bg-neutral-50",
15
+ error && "border-error-400 focus-within:border-error-700",
16
+ className
17
+ ),
18
+ children: [
19
+ /* @__PURE__ */ jsx(
20
+ "textarea",
21
+ {
22
+ className: cn(
23
+ "min-h-[60px] w-full rounded-lg bg-transparent p-3 pr-8 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50",
24
+ !resize && "resize-none"
25
+ ),
26
+ ref,
27
+ disabled,
28
+ ...props
29
+ }
30
+ ),
31
+ error && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3", children: /* @__PURE__ */ jsx(WarningCircle, { "data-testid": "exclaim-icon", className: "text-error-500", size: 18 }) })
32
+ ]
33
+ }
34
+ ) }),
35
+ typeof error === "string" && /* @__PURE__ */ jsx("span", { className: "text-sm text-error-500", children: error })
36
+ ] });
21
37
  }
22
38
  );
23
39
  Textarea.displayName = "Textarea";
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n disabled?: boolean\n error?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className, disabled, error, ...props }, ref) => {\n return (\n <textarea\n className={cn(\n 'placeholder:text-muted-foreground flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-1 ring-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50',\n disabled && 'bg-neutral-50',\n error && ' ring-error-400 focus-visible:ring-error-700',\n className,\n )}\n disabled={disabled}\n ref={ref}\n {...props}\n />\n )\n },\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea }\n"],"names":[],"mappings":";;;;AASA,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAW,EAAA,QAAA,EAAU,OAAO,GAAG,KAAA,IAAS,GAAQ,KAAA;AACjD,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA;AAAA,UACT,iRAAA;AAAA,UACA,QAAY,IAAA,eAAA;AAAA,UACZ,KAAS,IAAA,8CAAA;AAAA,UACT;AAAA,SACF;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;AACA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}
1
+ {"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr'\nimport { cn } from '@/lib/utils'\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n disabled?: boolean\n error?: boolean | string\n resize?: boolean\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className, disabled, error, resize = false, ...props }, ref) => {\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <div className=\"flex w-full items-start\">\n <div\n className={cn(\n 'relative flex w-full rounded-lg border border-neutral-200 bg-white transition-colors focus-within:border-neutral-950',\n disabled && 'bg-neutral-50',\n error && 'border-error-400 focus-within:border-error-700',\n className,\n )}\n >\n <textarea\n className={cn(\n 'min-h-[60px] w-full rounded-lg bg-transparent p-3 pr-8 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n !resize && 'resize-none',\n )}\n ref={ref}\n disabled={disabled}\n {...props}\n />\n {error && (\n <div className=\"absolute right-3 top-3\">\n <WarningCircle data-testid=\"exclaim-icon\" className=\"text-error-500\" size={18} />\n </div>\n )}\n </div>\n </div>\n {typeof error === 'string' && <span className=\"text-sm text-error-500\">{error}</span>}\n </div>\n )\n },\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea }\n"],"names":[],"mappings":";;;;;AAUA,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,EAAO,SAAS,KAAO,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACjE,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,4BACb,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAU,yBACb,EAAA,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,EAAA;AAAA,YACT,sHAAA;AAAA,YACA,QAAY,IAAA,eAAA;AAAA,YACZ,KAAS,IAAA,gDAAA;AAAA,YACT;AAAA,WACF;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,SAAW,EAAA,EAAA;AAAA,kBACT,iKAAA;AAAA,kBACA,CAAC,MAAU,IAAA;AAAA,iBACb;AAAA,gBACA,GAAA;AAAA,gBACA,QAAA;AAAA,gBACC,GAAG;AAAA;AAAA,aACN;AAAA,YACC,KACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,QAAA,kBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,aAAA,EAAY,cAAe,EAAA,SAAA,EAAU,gBAAiB,EAAA,IAAA,EAAM,IAAI,CACjF,EAAA;AAAA;AAAA;AAAA,OAGN,EAAA,CAAA;AAAA,MACC,OAAO,KAAU,KAAA,QAAA,wBAAa,MAAK,EAAA,EAAA,SAAA,EAAU,0BAA0B,QAAM,EAAA,KAAA,EAAA;AAAA,KAChF,EAAA,CAAA;AAAA;AAGN;AACA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}
@@ -15,17 +15,12 @@ export interface TypographyProps extends React.BaseHTMLAttributes<HTMLParagraphE
15
15
  color?: 'neutral' | 'primary' | 'secondary' | 'inverse' | 'accent' | 'success' | 'warning' | 'error';
16
16
  }
17
17
  /**
18
- * Typography component that implements the IATI design system
19
- *
20
18
  * Usage:
21
19
  * ```tsx
22
- * // Display text with Montserrat (default)
23
20
  * <Typography variant="display-lg" weight="bold">Large Display</Typography>
24
21
  *
25
- * // Headline with Open Sans
26
22
  * <Typography variant="headline-md" family="opensans" component="h2">Section Header</Typography>
27
23
  *
28
- * // Body text
29
24
  * <Typography variant="body-md">Regular paragraph text</Typography>
30
25
  * ```
31
26
  */
@@ -10,58 +10,65 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
10
10
  "display-lg": [
11
11
  "text-[49px] md:text-[53px] lg:text-[57px]",
12
12
  "leading-[56px] md:leading-[60px] lg:leading-[64px]",
13
- "-tracking-[0.14px]"
13
+ "-tracking-[0.14px]",
14
+ "font-montserrat"
14
15
  ].join(" "),
15
16
  // Large headers or section titles
16
17
  "display-md": [
17
18
  "text-[41px] md:text-[43px] lg:text-[45px]",
18
- "leading-[48px] md:leading-[50px] lg:leading-[52px]"
19
+ "leading-[48px] md:leading-[50px] lg:leading-[52px]",
20
+ "font-montserrat"
19
21
  ].join(" "),
20
22
  // Medium-sized prominent headers
21
23
  "display-sm": [
22
24
  "text-[32px] md:text-[34px] lg:text-[36px]",
23
- "leading-[40px] md:leading-[42px] lg:leading-[44px]"
25
+ "leading-[40px] md:leading-[42px] lg:leading-[44px]",
26
+ "font-montserrat"
24
27
  ].join(" "),
25
28
  // Smaller display text for highlighted elements
26
29
  // Headline family - Used for article and section headers
27
30
  "headline-lg": [
28
31
  "text-[28px] md:text-[30px] lg:text-[32px]",
29
- "leading-[36px] md:leading-[38px] lg:leading-[40px]"
32
+ "leading-[36px] md:leading-[38px] lg:leading-[40px]",
33
+ "font-montserrat"
30
34
  ].join(" "),
31
35
  // Primary article headers
32
36
  "headline-md": [
33
37
  "text-[24px] md:text-[26px] lg:text-[28px]",
34
- "leading-[32px] md:leading-[34px] lg:leading-[36px]"
38
+ "leading-[32px] md:leading-[34px] lg:leading-[36px]",
39
+ "font-montserrat"
35
40
  ].join(" "),
36
41
  // Section headers
37
42
  "headline-sm": [
38
43
  "text-[20px] md:text-[22px] lg:text-[24px]",
39
- "leading-[28px] md:leading-[30px] lg:leading-[32px]"
44
+ "leading-[28px] md:leading-[30px] lg:leading-[32px]",
45
+ "font-montserrat"
40
46
  ].join(" "),
41
47
  // Subsection headers
42
48
  // Title family - Used for smaller sections and emphasized content
43
49
  "title-lg": [
44
50
  "text-[18px] md:text-[20px] lg:text-[22px]",
45
- "leading-[24px] md:leading-[26px] lg:leading-[28px]"
51
+ "leading-[24px] md:leading-[26px] lg:leading-[28px]",
52
+ "font-montserrat"
46
53
  ].join(" "),
47
54
  // Large titles for important sections
48
- "title-md": "text-[16px] leading-[24px] tracking-[0.024px]",
55
+ "title-md": ["text-[16px] leading-[24px] tracking-[0.024px]", "font-montserrat"].join(" "),
49
56
  // Medium titles for general use
50
- "title-sm": "text-[14px] leading-[20px]",
57
+ "title-sm": ["text-[14px] leading-[20px]", "font-montserrat"].join(" "),
51
58
  // Small titles for subsections
52
59
  // Label family - Used for form elements and navigation
53
- "label-lg": "text-[14px] leading-[20px]",
60
+ "label-lg": ["text-[14px] leading-[20px]", "font-opensans"].join(" "),
54
61
  // Large labels for form fields
55
- "label-md": "text-[12px] leading-[16px]",
62
+ "label-md": ["text-[12px] leading-[16px]", "font-opensans"].join(" "),
56
63
  // Medium labels for general use
57
- "label-sm": "text-[11px] leading-[16px]",
64
+ "label-sm": ["text-[11px] leading-[16px]", "font-opensans"].join(" "),
58
65
  // Small labels for compact UI elements
59
66
  // Body family - Used for main content and paragraphs
60
- "body-lg": "text-[16px] leading-[24px] tracking-[0.08px]",
67
+ "body-lg": ["text-[16px] leading-[24px] tracking-[0.08px]", "font-opensans"].join(" "),
61
68
  // Large body text for primary content
62
- "body-md": "text-[14px] leading-[20px] tracking-[0.035px]",
69
+ "body-md": ["text-[14px] leading-[20px] tracking-[0.035px]", "font-opensans"].join(" "),
63
70
  // Medium body text for general content
64
- "body-sm": "text-[12px] leading-[16px] tracking-[0.048px]"
71
+ "body-sm": ["text-[12px] leading-[16px] tracking-[0.048px]", "font-opensans"].join(" ")
65
72
  // Small body text for secondary content
66
73
  },
67
74
  weight: {
@@ -102,7 +109,6 @@ const typographyVariants = cva("scroll-m-20 tracking-tight", {
102
109
  defaultVariants: {
103
110
  variant: "body-md",
104
111
  weight: "regular",
105
- family: "montserrat",
106
112
  color: "neutral"
107
113
  }
108
114
  });
@@ -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 * 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;;;;"}
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 'font-montserrat',\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 'font-montserrat',\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 'font-montserrat',\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 'font-montserrat',\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 'font-montserrat',\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 'font-montserrat',\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 'font-montserrat',\n ].join(' '), // Large titles for important sections\n 'title-md': ['text-[16px] leading-[24px] tracking-[0.024px]', 'font-montserrat'].join(' '), // Medium titles for general use\n 'title-sm': ['text-[14px] leading-[20px]', 'font-montserrat'].join(' '), // Small titles for subsections\n\n // Label family - Used for form elements and navigation\n 'label-lg': ['text-[14px] leading-[20px]', 'font-opensans'].join(' '), // Large labels for form fields\n 'label-md': ['text-[12px] leading-[16px]', 'font-opensans'].join(' '), // Medium labels for general use\n 'label-sm': ['text-[11px] leading-[16px]', 'font-opensans'].join(' '), // 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]', 'font-opensans'].join(' '), // Large body text for primary content\n 'body-md': ['text-[14px] leading-[20px] tracking-[0.035px]', 'font-opensans'].join(' '), // Medium body text for general content\n 'body-sm': ['text-[12px] leading-[16px] tracking-[0.048px]', 'font-opensans'].join(' '), // 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 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 * Usage:\n * ```tsx\n * <Typography variant=\"display-lg\" weight=\"bold\">Large Display</Typography>\n *\n * <Typography variant=\"headline-md\" family=\"opensans\" component=\"h2\">Section Header</Typography>\n *\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":"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"}
package/dist/index.d.ts CHANGED
@@ -31,3 +31,4 @@ export * from './components/Toggle';
31
31
  export * from './components/ToggleGroup';
32
32
  export * from './components/Progress';
33
33
  export * from './components/DropdownMenu';
34
+ export * from './components/Separator';
package/dist/index.js CHANGED
@@ -31,4 +31,5 @@ export { Toggle, toggleVariants } from './components/Toggle/Toggle.js';
31
31
  export { ToggleGroup, ToggleGroupItem } from './components/ToggleGroup/ToggleGroup.js';
32
32
  export { Progress } from './components/Progress/Progress.js';
33
33
  export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenu.js';
34
+ export { Separator } from './components/Separator/Separator.js';
34
35
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "periplo-ui",
3
3
  "description": "IATI UI library",
4
4
  "private": false,
5
- "version": "3.3.0",
5
+ "version": "3.4.0",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",