refactor: type-generation-and-styles

tractorss · tractorss · commit b8ad0642c1c5 · 2025-04-04T13:36:18.000+05:30
diff --git a/src/lib/accordion/index.tsx b/src/lib/accordion/index.tsx
@@ -18,7 +18,7 @@ interface AccordionProps {
 const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => (
   <>
     {item.icon ?? (item.Icon && <item.Icon />)}
-    <p className="w-fit text-center font-semibold">{item.title}</p>
+    <p className="w-fit text-center text-base font-semibold">{item.title}</p>
   </>
 );
 
diff --git a/src/lib/breadcrumb.tsx b/src/lib/breadcrumb.tsx
@@ -45,7 +45,7 @@ function Breadcrumb({
       {items.map(({ text, value }, i) =>
         i === items.length - 1 ? (
           <Content
-            className="text-klerosUIComponentsPrimaryText font-semibold"
+            className="text-klerosUIComponentsPrimaryText text-base font-semibold"
             {...{ variant }}
             key={i}
           >
diff --git a/src/lib/button/ButtonText.tsx b/src/lib/button/ButtonText.tsx
@@ -10,7 +10,7 @@ const ButtonText: React.FC<
     <p
       className={cn(
         "button-text",
-        "text-klerosUIComponentsWhiteBackground text-center leading-[22px] font-semibold whitespace-pre",
+        "text-klerosUIComponentsWhiteBackground text-center text-base leading-[22px] font-semibold whitespace-pre",
         isLoading && ["invisible"],
         isSecondary && ["text-klerosUIComponentsPrimaryBlue"],
         isDisabled && ["text-klerosUIComponentsStroke"],
diff --git a/src/lib/display/small.tsx b/src/lib/display/small.tsx
@@ -27,7 +27,7 @@ function DisplaySmall({
         {Icon && <Icon className="mr-2 max-h-4 max-w-4" />}
         <h2
           aria-labelledby={label}
-          className="text-klerosUIComponentsPrimaryText font-semibold"
+          className="text-klerosUIComponentsPrimaryText text-base font-semibold"
         >
           {text}
         </h2>
diff --git a/src/lib/dropdown/cascader/index.tsx b/src/lib/dropdown/cascader/index.tsx
@@ -36,12 +36,17 @@ function DropdownCascader({
       className={cn("relative flex flex-col gap-1", className)}
       {...props}
       {...{ defaultSelectedKey, selectedKey, disabledKeys }}
+      aria-label={label ?? "Select"}
     >
       {({ isOpen }) => (
         <>
-          <Label className={clsx("text-klerosUIComponentsPrimaryText text-sm")}>
-            {label}
-          </Label>
+          {label && (
+            <Label
+              className={clsx("text-klerosUIComponentsPrimaryText text-sm")}
+            >
+              {label}
+            </Label>
+          )}
           <DropdownButton {...{ placeholder }} />
           <FieldError className="text-klerosUIComponentsError text-sm" />
           <DropdownContainer
diff --git a/src/lib/dropdown/select/index.tsx b/src/lib/dropdown/select/index.tsx
@@ -48,12 +48,17 @@ function DropdownSelect({
       className={cn("flex flex-col gap-1", className)}
       {...props}
       onSelectionChange={handleSelection}
+      aria-label={label ?? "Select"}
     >
       {({ isOpen }) => (
         <>
-          <Label className={clsx("text-klerosUIComponentsPrimaryText text-sm")}>
-            {label}
-          </Label>
+          {label && (
+            <Label
+              className={clsx("text-klerosUIComponentsPrimaryText text-sm")}
+            >
+              {label}
+            </Label>
+          )}
           {simpleButton ? (
             <SimpleButton {...{ isOpen, placeholder }} small={smallButton} />
           ) : (
diff --git a/src/lib/form/bignumber-field/index.tsx b/src/lib/form/bignumber-field/index.tsx
@@ -67,7 +67,7 @@ function BigNumberField({
               {...inputProps}
               className={cn(
                 "hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
-                "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border",
+                "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border text-base",
                 "placeholder:text-klerosUIComponentsSecondaryText placeholder:opacity-50",
                 "focus:border-klerosUIComponentsPrimaryBlue focus:shadow-input focus:rounded-base focus:outline-none",
                 "focus:invalid:border-klerosUIComponentsError focus:invalid:shadow-klerosUIComponentsError",
diff --git a/src/lib/form/datepicker/display-button.tsx b/src/lib/form/datepicker/display-button.tsx
@@ -30,7 +30,7 @@ const DisplayButton: React.FC = () => {
           <DateSegment
             className={({ isPlaceholder }) =>
               cn(
-                "text-klerosUIComponentsPrimaryText cursor-pointer px-0.5",
+                "text-klerosUIComponentsPrimaryText cursor-pointer px-0.5 text-base",
                 isPlaceholder && "text-klerosUIComponentsSecondaryText",
                 "focus:text-klerosUIComponentsSecondaryBlue focus:outline-none",
                 "type-literal:px-0",
diff --git a/src/lib/form/file-uploader.tsx b/src/lib/form/file-uploader.tsx
@@ -126,7 +126,7 @@ function FileUploader({
           <small
             id="dropzone-label"
             className={cn(
-              "text-klerosUIComponentsSecondaryText relative -top-0.25 text-justify",
+              "text-klerosUIComponentsSecondaryText relative -top-0.25 text-justify text-base",
               {
                 "text-klerosUIComponentsSuccess": variant === "success",
                 "text-klerosUIComponentsError": variant === "error",
diff --git a/src/lib/form/number-field.tsx b/src/lib/form/number-field.tsx
@@ -62,7 +62,7 @@ function NumberField({
               {...inputProps}
               className={cn(
                 "hover-medium-blue hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
-                "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border",
+                "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border text-base",
                 "placeholder:text-klerosUIComponentsSecondaryText placeholder:opacity-50",
                 "focus:border-klerosUIComponentsPrimaryBlue focus:shadow-input focus:rounded-base focus:outline-none",
                 "focus:invalid:border-klerosUIComponentsError focus:invalid:shadow-klerosUIComponentsError",
diff --git a/src/lib/form/radio-group.tsx b/src/lib/form/radio-group.tsx
@@ -16,7 +16,7 @@ interface RadioOption extends AriaRadioProps {
 }
 
 interface RadioGroupProps extends AriaRadioGroupProps {
-  groupLabel: string;
+  groupLabel?: string;
   small?: boolean;
   /** Items to be rendered as options.
    * [Extends AriaRadioProps](https://react-spectrum.adobe.com/react-aria/RadioGroup.html#radiogroup-1)
@@ -49,14 +49,16 @@ function RadioGroup({
         className,
       )}
     >
-      <Label
-        className={clsx(
-          "text-klerosUIComponentsSecondaryText",
-          small ? "text-sm" : "text-lg",
-        )}
-      >
-        {groupLabel}
-      </Label>
+      {groupLabel && (
+        <Label
+          className={clsx(
+            "text-klerosUIComponentsSecondaryText",
+            small ? "text-sm" : "text-lg",
+          )}
+        >
+          {groupLabel}
+        </Label>
+      )}
       {options.map((option) => (
         <AriaRadio
           key={option.value}
diff --git a/src/lib/form/searchbar.tsx b/src/lib/form/searchbar.tsx
@@ -13,6 +13,7 @@ import clsx from "clsx";
 
 interface SearchbarProps extends SearchFieldProps {
   label?: string;
+  placeholder?: string;
   /** Props for the input element.
    * [See InputProps](https://react-spectrum.adobe.com/react-aria/NumberField.html#input-1)
    */
@@ -21,6 +22,7 @@ interface SearchbarProps extends SearchFieldProps {
 /** A search field allows a user to enter and clear a search query. */
 function Searchbar({
   label,
+  placeholder,
   inputProps,
   className,
   ...props
@@ -34,11 +36,11 @@ function Searchbar({
       )}
       <Group className="relative box-border h-[45px] w-full">
         <Input
-          placeholder={"Search"}
+          placeholder={placeholder ?? "Search"}
           {...inputProps}
           className={cn(
             "hover-medium-blue hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
-            "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border",
+            "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border text-base",
             "placeholder:text-klerosUIComponentsSecondaryText placeholder:opacity-50",
             "focus:border-klerosUIComponentsPrimaryBlue focus:shadow-input focus:rounded-base focus:outline-none",
             "focus:invalid:border-klerosUIComponentsError focus:invalid:shadow-klerosUIComponentsError",
diff --git a/src/lib/form/text-area.tsx b/src/lib/form/text-area.tsx
@@ -57,7 +57,7 @@ function TextArea({
         className={cn(
           "hover-medium-blue bg-klerosUIComponentsWhiteBackground resize-none",
           "relative box-border block h-28.75 w-100 p-4",
-          "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border",
+          "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border text-base",
           "placeholder:text-klerosUIComponentsSecondaryText placeholder:opacity-50",
           "focus:border-klerosUIComponentsPrimaryBlue focus:shadow-input focus:rounded-base focus:outline-none",
           "focus:invalid:border-klerosUIComponentsError focus:invalid:shadow-klerosUIComponentsError",
diff --git a/src/lib/form/text-field.tsx b/src/lib/form/text-field.tsx
@@ -52,7 +52,7 @@ function TextField({
           {...props.inputProps}
           className={cn(
             "hover-medium-blue hover-short-transition bg-klerosUIComponentsWhiteBackground size-full",
-            "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border",
+            "rounded-base border-klerosUIComponentsStroke text-klerosUIComponentsPrimaryText border text-base",
             "placeholder:text-klerosUIComponentsSecondaryText placeholder:opacity-50",
             "focus:border-klerosUIComponentsPrimaryBlue focus:shadow-input focus:rounded-base focus:outline-none",
             "focus:invalid:border-klerosUIComponentsError focus:invalid:shadow-klerosUIComponentsError",
diff --git a/src/lib/messages/alert.tsx b/src/lib/messages/alert.tsx
@@ -54,7 +54,7 @@ function Alert({ variant, title, msg, className }: Readonly<AlertProps>) {
         >
           {title}
         </h2>
-        <small className="text-klerosUIComponentsPrimaryText font-normal">
+        <small className="text-klerosUIComponentsPrimaryText text-sm font-normal">
           {msg}
         </small>
       </div>
diff --git a/src/lib/pagination/compact.tsx b/src/lib/pagination/compact.tsx
@@ -53,9 +53,11 @@ function CompactPagination({
 
   return (
     <div className={cn("box-border flex items-center justify-end", className)}>
-      <small className="text-klerosUIComponentsPrimaryText text-sm">
-        {label}
-      </small>
+      {label && (
+        <small className="text-klerosUIComponentsPrimaryText text-sm">
+          {label}
+        </small>
+      )}
       <ArrowButton
         className={clsx(label && "ml-4")}
         isDisabled={minPageReached}
diff --git a/src/lib/pagination/tabs.tsx b/src/lib/pagination/tabs.tsx
@@ -114,7 +114,7 @@ function Tabs({
               ))}
             <span
               className={cn(
-                "text-klerosUIComponentsPrimaryText",
+                "text-klerosUIComponentsPrimaryText text-base",
                 id === selectedKey && "text-klerosUIComponentsPrimaryBlue",
                 disabled && "text-klerosUIComponentsStroke",
               )}
diff --git a/src/lib/progress/linear/index.tsx b/src/lib/progress/linear/index.tsx
@@ -83,7 +83,7 @@ function Linear({
           <div
             className={clsx(
               "mt-1.25 flex items-center justify-center",
-              "text-klerosUIComponentsError leading-4 font-semibold",
+              "text-klerosUIComponentsError text-base leading-4 font-semibold",
             )}
           >
             <HourglassIcon className="fill-klerosUIComponentsError mr-[9.75px]" />
diff --git a/src/lib/tag/index.tsx b/src/lib/tag/index.tsx
@@ -25,7 +25,7 @@ function Tag({ text, active, className, ...props }: Readonly<TagProps>) {
     >
       <p
         className={clsx(
-          "hover-short-transition text-klerosUIComponentsPrimaryBlue",
+          "hover-short-transition text-klerosUIComponentsPrimaryBlue text-base",
           !active && ["hover:text-klerosUIComponentsSecondaryBlue"],
         )}
       >
diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx
@@ -98,7 +98,7 @@ function Tooltip({
         />
         <small
           className={clsx(
-            "text-klerosUIComponentsPrimaryText font-thin break-words",
+            "text-klerosUIComponentsPrimaryText text-base font-thin break-words",
             small ? "text-center" : "text-left",
           )}
         >
diff --git a/vite.config.ts b/vite.config.ts
@@ -32,6 +32,9 @@ export default defineConfig({
     }),
     tailwindcss(),
     react(),
-    dts({ insertTypesEntry: true }),
+    dts({
+      insertTypesEntry: true,
+      include: ["src/lib", "src/global.d.ts"],
+    }),
   ],
 });

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ function Breadcrumb({`
`45`	`45`	`{items.map(({ text, value }, i) =>`
`46`	`46`	`i === items.length - 1 ? (`
`47`	`47`	`<Content`
`48`		`- className="text-klerosUIComponentsPrimaryText font-semibold"`
	`48`	`+ className="text-klerosUIComponentsPrimaryText text-base font-semibold"`
`49`	`49`	`{...{ variant }}`
`50`	`50`	`key={i}`
`51`	`51`	`>`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ function DisplaySmall({`
`27`	`27`	`{Icon && <Icon className="mr-2 max-h-4 max-w-4" />}`
`28`	`28`	`<h2`
`29`	`29`	`aria-labelledby={label}`
`30`		`- className="text-klerosUIComponentsPrimaryText font-semibold"`
	`30`	`+ className="text-klerosUIComponentsPrimaryText text-base font-semibold"`
`31`	`31`	`>`
`32`	`32`	`{text}`
`33`	`33`	`</h2>`
Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ function FileUploader({`
`126`	`126`	`<small`
`127`	`127`	`id="dropzone-label"`
`128`	`128`	`className={cn(`
`129`		`- "text-klerosUIComponentsSecondaryText relative -top-0.25 text-justify",`
	`129`	`+ "text-klerosUIComponentsSecondaryText relative -top-0.25 text-justify text-base",`
`130`	`130`	`{`
`131`	`131`	`"text-klerosUIComponentsSuccess": variant === "success",`
`132`	`132`	`"text-klerosUIComponentsError": variant === "error",`