@firecms/ui 3.0.0-canary.16 → 3.0.0-canary.160

package/src/components/Button.tsx

@@ -1,12 +1,11 @@
+"use client";
 import React from "react";
-
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
     & {
-    variant?: "filled" | "outlined" | "text";
+    variant?: "filled" | "neutral" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error";
     size?: "small" | "medium" | "large" | "xl" | "2xl";
@@ -32,33 +31,42 @@ const ButtonInner = React.forwardRef<
    }: ButtonProps<any>, ref) => {
 
     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";
+        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2";
 
-    const buttonClasses = cn({
+    const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
+
         // Filled Variants
-        "border border-transparent bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-transparent bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white": variant === "filled" && color === "secondary" && !disabled,
-        "border border-transparent bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white": variant === "filled" && color === "error" && !disabled,
-        "border border-transparent bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
+        "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+
         // Text Variants
-        "border border-transparent text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
-        "border border-transparent text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
-        "border border-transparent text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
-        "border border-transparent text-text-primary dark:text-text-primary-dark hover:bg-slate-200 hover:dark:bg-gray-700": variant === "text" && color === "text" && !disabled,
+        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 dark:hover:bg-surface-900": variant === "text" && color === "primary" && !disabled,
+        "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
+        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
+        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
+
         // Outlined Variants
-        "border border-primary text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
-        "border border-secondary text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
-        "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,
+        "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
+        "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
+        "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
+        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
+
+        // Neutral Variants
+        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-white": variant === "neutral" && (color === "primary" || color === "text") && !disabled,
+        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-secondary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-white": variant === "neutral" && color === "secondary" && !disabled,
+        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-error dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-error": variant === "neutral" && color === "error" && !disabled,
+
         // Disabled states for all variants
         "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,
+        "border border-surface-500 opacity-50": variant === "outlined" && disabled,
+        "border border-surface-500 bg-surface-500 opacity-50": (variant === "filled" || variant === "neutral") && disabled,
     });
 
-    const sizeClasses = cn(
+    const sizeClasses = cls(
         {
             "py-1 px-2": size === "small",
             "py-2 px-4": size === "medium",
@@ -73,7 +81,7 @@ const ButtonInner = React.forwardRef<
             <Component
                 ref={ref}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 {...(props as React.ComponentPropsWithRef<any>)}>
                 {startIcon}
                 {children}
@@ -85,7 +93,7 @@ const ButtonInner = React.forwardRef<
         <button ref={ref as any}
                 type={props.type ?? "button"}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 disabled={disabled}
                 {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>
             {startIcon}

package/src/components/Card.tsx

@@ -1,6 +1,7 @@
+"use client";
 import React, { useCallback } from "react";
-import { cardClickableMixin, cardMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cardClickableMixin, cardMixin } from "../styles";
+import { cls } from "../util";
 
 type CardProps = {
     children: React.ReactNode;
@@ -29,7 +30,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(({
             role={onClick ? "button" : undefined}
             tabIndex={onClick ? 0 : undefined}
             onClick={onClick}
-            className={cn(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
+            className={cls(cardMixin, onClick && cardClickableMixin, className)}
             style={style}
             {...props}>
             {children}

package/src/components/CenteredView.tsx

@@ -1,24 +1,35 @@
+"use client";
 import React from "react";
 import { Container } from "./Container";
-import { cn } from "../util";
+import { cls } from "../util";
 
-export function CenteredView({
-                                 children,
-                                 maxWidth,
-                                 className,
-                                 fullScreen
-                             }: {
+export type CenteredViewProps = {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    outerClassName?: string;
     className?: string;
     fullScreen?: boolean;
-}) {
+};
 
-    return <div className={cn("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full")}>
-        <Container className={cn("m-auto", className)}
-                   maxWidth={maxWidth}>
-            {children}
-        </Container>
-    </div>
+export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(({
+                                                                                     children,
+                                                                                     maxWidth,
+                                                                                     outerClassName,
+                                                                                     className,
+                                                                                     fullScreen,
+                                                                                     ...rest
+                                                                                 }, ref) => { // Notice how the ref is now received as the second argument
 
-}
+    return (
+        <div ref={ref}
+             className={cls("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
+             {...rest}>
+            <Container className={cls("m-auto", className)} maxWidth={maxWidth}>
+                {children}
+            </Container>
+        </div>
+    );
+
+});
+
+CenteredView.displayName = "CenteredView";

package/src/components/Checkbox.tsx

@@ -2,15 +2,16 @@ import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 import { Icon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface CheckboxProps {
     checked: boolean;
+    id?: string;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     padding?: boolean;
-    size?: "tiny" | "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
 
@@ -18,20 +19,20 @@ 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",
-    tiny: "w-4 h-4 rounded flex items-center justify-center"
+    smallest: "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 ",
-    tiny: "w-6 h-6"
+    smallest: "w-6 h-6"
 }
 const paddingClasses = {
     medium: "p-2",
     small: "p-2",
     large: "p-2",
-    tiny: ""
+    smallest: ""
 }
 
 const colorClasses = {
@@ -40,6 +41,7 @@ const colorClasses = {
 }
 
 export const Checkbox = ({
+                             id,
                              checked,
                              indeterminate = false,
                              padding = true,
@@ -55,34 +57,34 @@ export const Checkbox = ({
         ? 20
         : size === "small"
             ? 16
-            : size === "tiny"
+            : size === "smallest"
                 ? 14
                 : 24;
     return (
         <CheckboxPrimitive.Root
-            asChild
+            id={id}
             checked={indeterminate || isChecked}
             disabled={disabled}
             onCheckedChange={disabled ? undefined : onCheckedChange}>
 
-            <div className={cn(
+            <div className={cls(
                 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 ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "",
                 onCheckedChange ? "cursor-pointer" : "cursor-default"
             )}>
                 <div
-                    className={cn(
+                    className={cls(
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled
-                            ? (indeterminate || isChecked ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600")
-                            : (indeterminate || isChecked ? colorClasses[color] : "bg-white dark:bg-slate-900"),
-                        (indeterminate || isChecked) ? "text-slate-100 dark:text-slate-900" : "",
+                            ? (indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600")
+                            : (indeterminate || isChecked ? colorClasses[color] : "bg-white dark:bg-surface-900"),
+                        (indeterminate || isChecked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                         disabled
                             ? "border-transparent"
-                            : (indeterminate || isChecked ? "border-transparent" : "border-slate-800 dark:border-slate-200")
+                            : (indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
                     )}>
                     <CheckboxPrimitive.Indicator asChild>
                         {indeterminate

package/src/components/Chip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CHIP_COLORS, cn, getColorSchemeForKey } from "../util";
+import { CHIP_COLORS, cls, getColorSchemeForKey } from "../util";
 
 export type ChipColorScheme = {
     color: string;
@@ -11,18 +11,19 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "tiny" | "small" | "medium";
+    size?: "small" | "medium" | "large";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
     onClick?: () => void;
     icon?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 
 const sizeClassNames = {
-    tiny: "px-2 py-0.5 text-sm",
-    small: "px-3 py-1 text-sm",
-    medium: "px-4 py-1.5 text-sm"
+    small: "px-2 py-0.5 text-sm",
+    medium: "px-3 py-1 text-sm",
+    large: "px-4 py-1.5 text-sm"
 }
 
 /**
@@ -35,18 +36,19 @@ export function Chip({
                          outlined,
                          onClick,
                          icon,
-                         size = "medium",
-                         className
+                         size = "large",
+                         className,
+                         style
                      }: ChipProps) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
-            className={cn("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
-                onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
+                onClick ? "cursor-pointer hover:bg-surface-accent-300 hover:dark:bg-surface-accent-700" : "",
                 sizeClassNames[size],
-                error || !usedColorScheme ? "bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white" : "",
+                error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "",
                 error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}
@@ -54,6 +56,7 @@ export function Chip({
                 backgroundColor: error || !usedColorScheme ? undefined : usedColorScheme.color,
                 color: error || !usedColorScheme ? undefined : usedColorScheme.text,
                 overflow: "hidden",
+                ...style
                 // display: "-webkit-box",
                 // WebkitLineClamp: 1,
                 // WebkitBoxOrient: "vertical",

package/src/components/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type CircularProgressProps = {
     size?: "small" | "medium" | "large",
@@ -31,11 +31,11 @@ export function CircularProgress({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 sizeClasses,
                 borderClasses,
                 "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
-                "text-primary-dark dark:text-primary",
+                "text-primary dark:text-primary",
                 className)}
             role="status">
               <span

package/src/components/Collapse.tsx

@@ -1,7 +1,9 @@
+"use client";
 import React from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 interface CollapseProps {
     children?: React.ReactNode;
@@ -53,7 +55,7 @@ export function Collapse({
             className={className}>
 
             <Collapsible.Content
-                className={cn(`CollapseContent-${duration}`)}
+                className={cls(`CollapseContent-${duration}`)}
             >
                 {children}
             </Collapsible.Content>

package/src/components/Container.tsx

@@ -1,5 +1,6 @@
+"use client";
 import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ContainerProps = {
     children: React.ReactNode;
@@ -37,7 +38,7 @@ const ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> =
     return (
         <div
             ref={ref}
-            className={cn("mx-auto px-3 md:px-4 lg-px-6",
+            className={cls("mx-auto px-3 md:px-4 lg-px-6",
                 classForMaxWidth,
                 className)}
             style={style}>