@firecms/ui 3.0.0-canary.2 → 3.0.0-canary.21

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-canary.2",
+    "version": "3.0.0-canary.21",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -31,9 +31,10 @@
         ".": {
             "import": "./dist/index.es.js",
             "require": "./dist/index.umd.js",
-            "types": "./dist/src/index.d.ts"
+            "types": "./dist/index.d.ts"
         },
-        "./package.json": "./package.json"
+        "./package.json": "./package.json",
+        "./tailwind.config.js": "./tailwind.config.js"
     },
     "scripts": {
         "watch": "vite build --watch",
@@ -51,19 +52,21 @@
         "@radix-ui/react-collapsible": "^1.0.3",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-portal": "^1.0.4",
+        "@radix-ui/react-radio-group": "^1.1.3",
         "@radix-ui/react-scroll-area": "^1.0.5",
-        "@radix-ui/react-select": "^1.2.2",
+        "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
         "cmdk": "^0.2.1",
-        "react-datepicker": "^4.25.0",
+        "react-datepicker": "^6.4.0",
         "react-dropzone": "^14.2.3",
         "react-fast-compare": "^3.2.2",
-        "tailwind-merge": "^2.2.1"
+        "tailwind-merge": "^2.2.2"
     },
     "peerDependencies": {
         "react": "^18.2.0",
@@ -77,40 +80,41 @@
     },
     "devDependencies": {
         "@jest/globals": "^29.7.0",
-        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
-        "@types/node": "^20.11.16",
+        "@types/node": "^20.11.30",
         "@types/object-hash": "^3.0.6",
-        "@types/react": "^18.2.54",
-        "@types/react-dom": "^18.2.18",
+        "@types/react": "^18.2.67",
+        "@types/react-dom": "^18.2.22",
         "@types/react-measure": "^2.0.12",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
+        "@typescript-eslint/eslint-plugin": "^7.3.1",
+        "@typescript-eslint/parser": "^7.3.1",
         "@vitejs/plugin-react": "^4.2.1",
         "cross-env": "^7.0.3",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "eslint-config-standard": "^17.1.0",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-n": "^15.7.0",
+        "eslint-plugin-n": "^16.6.2",
         "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "firebase": "^10.8.0",
+        "firebase": "^10.9.0",
         "jest": "^29.7.0",
         "npm-run-all": "^4.1.5",
         "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
-        "tsd": "^0.30.4",
-        "typescript": "^5.3.3",
-        "vite": "^5.1.1"
+        "tsd": "^0.30.7",
+        "typescript": "^5.4.2",
+        "vite": "^5.2.3"
     },
     "files": [
         "dist",
-        "src"
+        "src",
+        "tailwind.config.js"
     ],
-    "gitHead": "24234382207c741094a561eb4b94a416f00e6b74",
+    "gitHead": "e451246cf15bdd8d934b5e2a70d86f606f6292f5",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Alert.tsx

@@ -29,12 +29,12 @@ const getColorClasses = (severity: string) => {
         case "warning":
             return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
         case "info":
-            return "bg-blue-50 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
         case "success":
             return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
         case "base":
         default:
-            return "bg-slate-50 dark:bg-slate-800 dark:text-slate-100 text-slate-900";
+            return "bg-slate-50 dark:bg-slate-800 dark:text-white text-slate-900";
     }
 };
 

package/src/components/BooleanSwitch.tsx

@@ -43,8 +43,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
                 "outline-none rounded-full relative shadow-sm",
                 value ? (disabled
-                    ? "bg-white bg-opacity-54 dark:bg-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-100 dark:ring-slate-700"
-                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-slate-900 ring-1 ring-slate-100 dark:ring-slate-700",
+                    ? "bg-white bg-opacity-54 dark:bg-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-200 dark:ring-slate-700"
+                    : "ring-secondary ring-1 bg-secondary dark:bg-secondary") : "bg-white bg-opacity-54 dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-slate-700",
                 className
             )}
             {...props}

package/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import {focusedMixin} from "../styles";
-import {cn} from "../util";
+import { focusedMixin } from "../styles";
+import { cn } from "../util";
 
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
@@ -9,7 +9,7 @@ export type ButtonProps<P extends React.ElementType> =
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error";
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | "xl" | "2xl";
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
@@ -34,18 +34,6 @@ const ButtonInner = React.forwardRef<
     const baseClasses =
         "h-fit rounded-md uppercase inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
 
-    // const buttonClasses = cn(
-    //     {
-    //         "w-full": fullWidth,
-    //         "w-fit": !fullWidth,
-    //         "border-transparent bg-primary hover:bg-primary-dark focus:ring-primary !text-white shadow hover:ring-1 hover:ring-primary": variant === "filled" && !disabled,
-    //         "border-transparent !text-primary !hover:text-primary-dark hover:bg-primary hover:bg-primary-bg": variant === "text" && !disabled,
-    //         "border-primary !text-primary hover:bg-primary-bg hover:border-primary-dark !hover:text-primary-dark focus:ring-primary hover:ring-1 hover:ring-primary": variant === "outlined" && !disabled,
-    //         "border-primary-dark border-opacity-50 dark:border-primary dark:border-opacity-50 opacity-50 !text-primary-dark !dark:text-primary text-opacity-50 dark:text-opacity-50": variant === "outlined" && disabled,
-    //         "border-transparent outline-none opacity-50 !text-slate-600 !dark:text-slate-500": (variant === "filled" || variant === "text") && disabled
-    //     }
-    // );
-
     const buttonClasses = cn({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
@@ -65,14 +53,18 @@ const ButtonInner = React.forwardRef<
         "border border-red-500 text-red-500 hover:bg-red-500": variant === "outlined" && color === "error" && !disabled,
         "border border-slate-400 text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
         // Disabled states for all variants
-        "border border-transparent opacity-50": disabled
+        "border border-transparent opacity-50": variant === "text" && disabled,
+        "border border-gray-500 opacity-50": variant === "outlined" && disabled,
+        "border border-gray-500 bg-gray-500 opacity-50": variant === "filled" && disabled,
     });
 
     const sizeClasses = cn(
         {
             "py-1 px-2": size === "small",
             "py-2 px-4": size === "medium",
-            "py-2.5 px-5": size === "large"
+            "py-2.5 px-5": size === "large",
+            "py-3 px-6": size === "xl",
+            "py-4 px-10": size === "2xl",
         }
     );
 

package/src/components/Card.tsx

@@ -2,18 +2,20 @@ import React, { useCallback } from "react";
 import { cardClickableMixin, cardMixin, focusedMixin } from "../styles";
 import { cn } from "../util";
 
-export function Card({
-                         children,
-                         style,
-                         onClick,
-                         className
-                     }: {
+type CardProps = {
     children: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: () => void;
     className?: string;
-}) {
+};
 
+const Card = React.forwardRef<HTMLDivElement, CardProps>(({
+                                                              children,
+                                                              className,
+                                                              onClick,
+                                                              style,
+                                                              ...props
+                                                          }, ref) => {
     const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
         if (e.key === "Enter" || e.key === " ") {
             onClick?.();
@@ -22,13 +24,17 @@ export function Card({
 
     return (
         <div
+            ref={ref}
             onKeyPress={onKeyPress}
             role={onClick ? "button" : undefined}
             tabIndex={onClick ? 0 : undefined}
             onClick={onClick}
             className={cn(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
-            style={style}>
+            style={style}
+            {...props}>
             {children}
         </div>
-    )
-}
+    );
+});
+
+export { Card };

package/src/components/CenteredView.tsx

@@ -5,14 +5,16 @@ import { cn } from "../util";
 export function CenteredView({
                                  children,
                                  maxWidth,
-                                 className
+                                 className,
+                                 fullScreen
                              }: {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
     className?: string;
+    fullScreen?: boolean;
 }) {
 
-    return <div className={"flex flex-col flex-grow h-full"}>
+    return <div className={cn("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full")}>
         <Container className={cn("m-auto", className)}
                    maxWidth={maxWidth}>
             {children}

package/src/components/Checkbox.tsx

@@ -4,25 +4,34 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Icon } from "../icons";
 import { cn } from "../util";
 
-interface CheckboxProps {
+export interface CheckboxProps {
     checked: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    size?: "small" | "medium" | "large";
+    padding?: boolean;
+    size?: "tiny" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
 
 const sizeClasses = {
     large: "w-6 h-6 rounded flex items-center justify-center",
     medium: "w-5 h-5 rounded flex items-center justify-center",
-    small: "w-4 h-4 rounded flex items-center justify-center"
+    small: "w-4 h-4 rounded flex items-center justify-center",
+    tiny: "w-4 h-4 rounded flex items-center justify-center"
 };
 
 const outerSizeClasses = {
     medium: "w-10 h-10",
     small: "w-8 h-8",
-    large: "w-12 h-12"
+    large: "w-12 h-12 ",
+    tiny: "w-6 h-6"
+}
+const paddingClasses = {
+    medium: "p-2",
+    small: "p-2",
+    large: "p-2",
+    tiny: ""
 }
 
 const colorClasses = {
@@ -33,6 +42,7 @@ const colorClasses = {
 export const Checkbox = ({
                              checked,
                              indeterminate = false,
+                             padding = true,
                              disabled,
                              size = "medium",
                              onCheckedChange,
@@ -45,19 +55,23 @@ export const Checkbox = ({
         ? 20
         : size === "small"
             ? 16
-            : 24;
+            : size === "tiny"
+                ? 14
+                : 24;
     return (
-        <div className={cn(
-            outerSizeClasses[size],
-            "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-            onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
-            onCheckedChange ? "cursor-pointer" : "cursor-default"
-        )}>
-            <CheckboxPrimitive.Root
-                asChild
-                checked={indeterminate || isChecked}
-                disabled={disabled}
-                onCheckedChange={disabled ? undefined : onCheckedChange}>
+        <CheckboxPrimitive.Root
+            asChild
+            checked={indeterminate || isChecked}
+            disabled={disabled}
+            onCheckedChange={disabled ? undefined : onCheckedChange}>
+
+            <div className={cn(
+                padding ? paddingClasses[size] : "",
+                outerSizeClasses[size],
+                "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
+                onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
+                onCheckedChange ? "cursor-pointer" : "cursor-default"
+            )}>
                 <div
                     className={cn(
                         "border-2 relative transition-colors ease-in-out duration-150",
@@ -80,12 +94,7 @@ export const Checkbox = ({
                             )}
                     </CheckboxPrimitive.Indicator>
                 </div>
-            </CheckboxPrimitive.Root>
-            {/*{indeterminate && (*/}
-            {/*    <div >*/}
-            {/*         YO*/}
-            {/*    </div>*/}
-            {/*)}*/}
-        </div>
+            </div>
+        </CheckboxPrimitive.Root>
     );
 };

package/src/components/Chip.tsx

@@ -11,7 +11,7 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "smaller" | "small" | "medium";
+    size?: "tiny" | "small" | "medium";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
@@ -20,7 +20,7 @@ export interface ChipProps {
 }
 
 const sizeClassNames = {
-    smaller: "px-2 py-0.5 text-sm",
+    tiny: "px-2 py-0.5 text-sm",
     small: "px-3 py-1 text-sm",
     medium: "px-4 py-1.5 text-sm"
 }
@@ -46,7 +46,7 @@ export function Chip({
                 "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],
-                error || !usedColorScheme ? "bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-slate-200" : "",
+                error || !usedColorScheme ? "bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white" : "",
                 error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}

package/src/components/Dialog.tsx

@@ -14,6 +14,7 @@ export type DialogProps = {
     scrollable?: boolean;
     maxWidth?: keyof typeof widthClasses;
     modal?: boolean;
+    onOpenAutoFocus?: (e: Event) => void;
 };
 
 const widthClasses = {
@@ -41,7 +42,8 @@ export const Dialog = ({
                            fullScreen,
                            scrollable = true,
                            maxWidth = "lg",
-                           modal = true
+                           modal = true,
+                           onOpenAutoFocus
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -77,6 +79,7 @@ export const Dialog = ({
                     />
 
                     <DialogPrimitive.Content
+                        onOpenAutoFocus={onOpenAutoFocus}
                         className={cn("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div

package/src/components/ExpandablePanel.tsx

@@ -88,7 +88,7 @@ export function ExpandablePanel({
                 <Collapsible.Trigger
                     className={cn(focusedMixin,
                         "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
+                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,

package/src/components/IconButton.tsx

@@ -18,7 +18,7 @@ const buttonClasses =
     "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50";
 const baseClasses =
     "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
-const colorClasses = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-slate-300";
+const colorClasses = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",

package/src/components/Label.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "../util";
+import { defaultBorderMixin } from "../styles";
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", defaultBorderMixin, className)}
+        {...props}
+    />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/components/Markdown.tsx

@@ -3,26 +3,37 @@ import equal from "react-fast-compare"
 
 // @ts-ignore
 import MarkdownIt from "markdown-it";
+import { cn } from "../util";
 
 export interface MarkdownProps {
     source: string,
+    size?: "small" | "medium" | "large" | "xl" | "2xl";
     className?: string
 }
 
-const md = new MarkdownIt({ html: true, });
+const proseClasses = {
+    small: "prose-sm",
+    medium: "prose",
+    large: "prose-lg",
+    xl: "prose-xl",
+    "2xl": "prose-2xl"
+};
+
+const md = new MarkdownIt({ html: true });
 /**
  * @group Preview components
  */
 export const Markdown = React.memo<MarkdownProps>(function Markdown({
                                                                         source,
-                                                                        className
+                                                                        className,
+                                                                        size = "medium"
                                                                     }: MarkdownProps) {
         const html = useMemo(() => {
             return md.render(typeof source === "string" ? source : "");
         }, [source]);
 
         return <div
-            className={className}
+            className={cn(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
             dangerouslySetInnerHTML={{ __html: html }}
         />;
     }

package/src/components/RadioGroup.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { cn } from "../util";
+import { CircleIcon } from "../icons";
+
+const RadioGroup = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+    return (
+        <RadioGroupPrimitive.Root
+            className={cn("grid gap-2", className)}
+            {...props}
+            ref={ref}
+        />
+    )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+    return (
+        <RadioGroupPrimitive.Item
+            ref={ref}
+            className={cn(
+                "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        >
+            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg" />
+            </RadioGroupPrimitive.Indicator>
+        </RadioGroupPrimitive.Item>
+    )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/src/components/Select.tsx

@@ -127,38 +127,38 @@ export function Select({
                         "w-full h-full",
                         size === "small" ? "h-[42px]" : "h-[64px]",
                         padding ? "px-4 " : "",
-                        "outlin e-none focus:outline-none",
+                        "outline-none focus:outline-none",
                         "select-none rounded-md text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
-                        disabled ? "text-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-slate-200",
+                        disabled ? "text-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
                         "relative flex items-center",
                         includeFocusOutline ? focusedMixin : "",
                         inputClassName
                     )}>
 
-                    <SelectPrimitive.Value asChild>
-                        <div className={cn(
-                            "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
-                            "overflow-visible",
-                            size === "small" ? "h-[42px]" : "h-[64px]"
-                        )}>
-                            {renderValue &&
-                                (value && Array.isArray(value)
-                                    ? value.map((v, i) => (
-                                        <div key={v} className={"flex items-center gap-1 max-w-full"}>
-                                            {renderValue ? renderValue(v, i) : v}
-                                        </div>))
-                                    : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
+                    <div className={cn(
+                        "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
+                        "overflow-visible",
+                        size === "small" ? "h-[42px]" : "h-[64px]"
+                    )}>
+                    <SelectPrimitive.Value >
+                        {renderValue &&
+                            (value && Array.isArray(value)
+                                ? value.map((v, i) => (
+                                    <div key={v} className={"flex items-center gap-1 max-w-full"}>
+                                        {renderValue ? renderValue(v, i) : v}
+                                    </div>))
+                                : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
 
-                            {renderValues && (!value || Array.isArray(value))
-                                ? renderValues(value as string[] ?? [])
-                                : null}
+                        {renderValues && (!value || Array.isArray(value))
+                            ? renderValues(value as string[] ?? [])
+                            : null}
 
-                            {!renderValue && !renderValues && value}
+                        {!renderValue && !renderValues && value}
 
-                        </div>
                     </SelectPrimitive.Value>
+                    </div>
 
                     <SelectPrimitive.Icon className={cn(
                         "px-2 h-full flex items-center",
@@ -249,7 +249,7 @@ export function SelectGroup({
     return <>
         <SelectPrimitive.Group
             className={cn(
-                "text-xs text-slate-900 dark:text-slate-100 uppercase tracking-wider font-bold mt-6 first:mt-2",
+                "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className
             )}>

package/src/components/Table.tsx

@@ -13,7 +13,7 @@ export const Table = ({
                           className,
                           style
                       }: TableProps) => (
-    <table className={cn("w-full text-left text-gray-800 dark:text-slate-200 rounded-md overflow-x-auto",
+    <table className={cn("w-full text-left text-gray-800 dark:text-white rounded-md overflow-x-auto",
         className)}
            style={style}>
         {children}

package/src/components/Tabs.tsx

@@ -19,7 +19,7 @@ export function Tabs({
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
         <TabsPrimitive.List className={cn(
-            "flex text-sm font-medium text-center text-slate-800 dark:text-slate-200",
+            "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
             className)
         }>
             {children}
@@ -48,7 +48,7 @@ export function Tab({
                                       disabled
                                           ? "text-slate-400 dark:text-slate-500"
                                           : cn("text-slate-700 dark:text-slate-300",
-                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-slate-100",
+                                              "data-[state=active]:text-slate-900 data-[state=active]:dark:text-white",
                                               "hover:text-slate-800 dark:hover:text-slate-200"),
                                       // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
                                       // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",

package/src/components/TextField.tsx

@@ -132,7 +132,7 @@ export function TextField<T extends string | number>({
                 label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
-                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-slate-200",
+                disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-white",
                 inputClassName
             )}
             placeholder={focused || hasValue || !label ? placeholder : undefined}