@commercetools/nimbus 0.0.3 → 0.0.4-rc2

package/dist/index.d.ts

@@ -10,8 +10,8 @@ import { AriaLinkOptions } from 'react-aria';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
 import { Bleed } from '@chakra-ui/react';
-import { CardContentProps } from './card.slots';
-import { CardHeaderProps } from './card.slots';
+import { CardContentProps as CardContentProps_2 } from './card.slots';
+import { CardHeaderProps as CardHeaderProps_2 } from './card.slots';
 import { CardProps as CardProps_2 } from './card.types';
 import { Code } from '@chakra-ui/react';
 import { ConditionalValue } from '@chakra-ui/react';
@@ -209,7 +209,7 @@ declare const alertRecipe: SlotRecipeDefinition<"title" | "description" | "icon"
 tone: {
 critical: {
 root: {
-colorPalette: "error";
+colorPalette: "critical";
 };
 };
 info: {
@@ -224,7 +224,7 @@ colorPalette: "amber";
 };
 positive: {
 root: {
-colorPalette: "success";
+colorPalette: "positive";
 };
 };
 };
@@ -453,7 +453,7 @@ colorPalette: "primary";
 };
 critical: {
 button: {
-colorPalette: "error";
+colorPalette: "critical";
 };
 };
 neutral: {
@@ -484,15 +484,31 @@ declare type ButtonRootProps = HTMLChakraProps<"button", ButtonRecipeProps>;
 export declare const Card: {
     Root: ForwardRefExoticComponent<CardProps_2 & RefAttributes<HTMLDivElement>>;
     Header: {
-        ({ children, ...props }: CardHeaderProps): null;
+        ({ children, ...props }: CardHeaderProps_2): null;
         displayName: string;
     };
     Content: {
-        ({ children, ...props }: CardContentProps): null;
+        ({ children, ...props }: CardContentProps_2): null;
         displayName: string;
     };
 };
 
+export declare const CardContent: {
+    ({ children, ...props }: CardContentProps): null;
+    displayName: string;
+};
+
+declare interface CardContentProps extends HTMLChakraProps<"div", CardRecipeProps> {
+}
+
+export declare const CardHeader: {
+    ({ children, ...props }: CardHeaderProps): null;
+    displayName: string;
+};
+
+declare interface CardHeaderProps extends HTMLChakraProps<"div", CardRecipeProps> {
+}
+
 /**
  * Main props interface for the Card component.
  * Extends CardVariantProps to include both root props and variant props,
@@ -562,6 +578,8 @@ backgroundColor: "colorPalette.2";
 declare interface CardRecipeProps extends RecipeProps<"div">, UnstyledProp {
 }
 
+export declare const CardRoot: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
 /**
  * Root props interface that extends Chakra's HTML props with our recipe props.
  * This creates a complete set of props for the root element, combining
@@ -779,7 +797,21 @@ export declare interface FormFieldProps extends FormFieldRootSlotProps {
  * Recipe configuration for the FormField component.
  * Defines the styling variants and base styles using Chakra UI's recipe system.
  */
-declare const formFieldRecipe: SlotRecipeDefinition<"error" | "input" | "label" | "description" | "root" | "popover", {
+declare const formFieldRecipe: SlotRecipeDefinition<"input" | "label" | "description" | "root" | "error" | "popover", {
+size: {
+md: {
+root: {
+"--form-field-font-size": "fontSizes.350";
+"--form-field-line-height": "lineHeights.500";
+};
+};
+sm: {
+root: {
+"--form-field-font-size": "fontSizes.300";
+"--form-field-line-height": "lineHeights.450";
+};
+};
+};
 direction: {
 column: {
 root: {
@@ -1294,6 +1326,8 @@ export declare const ToggleButtonGroup: {
     Button: ToggleButtonGroupButtonComponent_2;
 };
 
+export declare const ToggleButtonGroupButton: ToggleButtonGroupButtonComponent;
+
 /** Type signature for the `ToggleButtonGroup.Button` sub-component (using `forwardRef`). */
 export declare type ToggleButtonGroupButtonComponent = ForwardRefExoticComponent<ToggleButtonGroupButtonProps & RefAttributes<typeof ToggleButton>>;
 
@@ -1306,6 +1340,8 @@ declare type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", Recipe
 /** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
 export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps>;
 
+export declare const ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
+
 /** Type signature for the main `ToggleButtonGroup` component (using `forwardRef`). */
 export declare type ToggleButtonGroupRootComponent = ForwardRefExoticComponent<ToggleButtonGroupProps & RefAttributes<typeof ToggleButtonGroup_2>>;
 

package/dist/index.js

@@ -5564,7 +5564,7 @@ const We = $e({
         colorPalette: "primary"
       },
       critical: {
-        colorPalette: "error"
+        colorPalette: "critical"
       },
       neutral: {
         colorPalette: "neutral"
@@ -8903,8 +8903,8 @@ const Kp = kp(X.breakpoints), Fp = As({
       layerStyle: "disabled"
     },
     "&[data-invalid='true']": {
-      "--border-color": "colors.error.7",
-      color: "error.11"
+      "--border-color": "colors.critical.7",
+      color: "critical.11"
     }
   },
   variants: {
@@ -8982,14 +8982,14 @@ const Kp = kp(X.breakpoints), Fp = As({
     inverted: {
       value: "{colors.neutral.9}"
     },
-    error: {
-      value: "{colors.error.8}"
+    critical: {
+      value: "{colors.critical.8}"
     },
     warning: {
-      value: "{colors.danger.8}"
+      value: "{colors.warning.8}"
     },
-    success: {
-      value: "{colors.success.8}"
+    positive: {
+      value: "{colors.positive.8}"
     },
     info: {
       value: "{colors.ingo.8}"
@@ -9507,7 +9507,7 @@ const Kp = kp(X.breakpoints), Fp = As({
       userSelect: "none",
       color: "neutral.11",
       "&[data-invalid='true']": {
-        color: "error.11"
+        color: "critical.11"
       }
     },
     indicator: {
@@ -9531,10 +9531,10 @@ const Kp = kp(X.breakpoints), Fp = As({
       },
       "&[data-invalid='true']": {
         bg: "transparent",
-        borderColor: "error.9",
-        color: "error.11",
+        borderColor: "critical.9",
+        color: "critical.11",
         "&:hover": {
-          borderColor: "error.10"
+          borderColor: "critical.10"
         }
       },
       "&[data-selected='true'], &[data-indeterminate='true']": {
@@ -9546,12 +9546,12 @@ const Kp = kp(X.breakpoints), Fp = As({
           borderColor: "colorPalette.10"
         },
         "&[data-invalid='true']": {
-          bg: "error.9",
-          borderColor: "error.9",
-          color: "error.contrast",
+          bg: "critical.9",
+          borderColor: "critical.9",
+          color: "critical.contrast",
           "&:hover": {
-            bg: "error.10",
-            borderColor: "error.10"
+            bg: "critical.10",
+            borderColor: "critical.10"
           }
         }
       }
@@ -9632,7 +9632,7 @@ const Kp = kp(X.breakpoints), Fp = As({
       },
       "[data-invalid] &": {
         "--border-width": "sizes.50",
-        "--border-color": "colors.error.7"
+        "--border-color": "colors.critical.7"
       }
       // [data-hovered]
       // [data-pressed]
@@ -9661,7 +9661,7 @@ const Kp = kp(X.breakpoints), Fp = As({
         opacity: 0.5
       },
       "[data-invalid] &": {
-        color: "error.11"
+        color: "critical.11"
       }
     },
     // Popover
@@ -10630,7 +10630,7 @@ const bb = {
   variants: {
     tone: {
       critical: {
-        root: { colorPalette: "error" }
+        root: { colorPalette: "critical" }
       },
       info: {
         root: { colorPalette: "info" }
@@ -10639,7 +10639,7 @@ const bb = {
         root: { colorPalette: "amber" }
       },
       positive: {
-        root: { colorPalette: "success" }
+        root: { colorPalette: "positive" }
       }
     },
     variant: {
@@ -10684,31 +10684,29 @@ const bb = {
   }
 }, Lt = M(
   void 0
-), xs = _(
-  ({ children: r, ...e }, t) => {
-    const [n, o] = W(null), [i, l] = W(null), [a, s] = W(null), [u, d] = W(null), c = H(
-      () => ({
-        setTitle: o,
-        setDescription: l,
-        setActions: s,
-        setDismiss: d
-      }),
-      [o, l, s, d]
-    );
-    return /* @__PURE__ */ S(Lt.Provider, { value: c, children: /* @__PURE__ */ ee(n0, { ref: t, ...e, role: "alert", children: [
-      /* @__PURE__ */ S(l0, { alignItems: "flex-start", children: u0(e.tone) }),
-      /* @__PURE__ */ ee(Ln, { flex: "1", gap: "200", children: [
-        /* @__PURE__ */ ee(Fe, { children: [
-          n,
-          i
-        ] }),
-        a
+), xs = _(({ children: r, ...e }, t) => {
+  const [n, o] = W(null), [i, l] = W(null), [a, s] = W(null), [u, d] = W(null), c = H(
+    () => ({
+      setTitle: o,
+      setDescription: l,
+      setActions: s,
+      setDismiss: d
+    }),
+    [o, l, s, d]
+  );
+  return /* @__PURE__ */ S(Lt.Provider, { value: c, children: /* @__PURE__ */ ee(n0, { ref: t, ...e, role: "alert", children: [
+    /* @__PURE__ */ S(l0, { alignItems: "flex-start", children: u0(e.tone) }),
+    /* @__PURE__ */ ee(Ln, { flex: "1", gap: "200", children: [
+      /* @__PURE__ */ ee(Fe, { children: [
+        n,
+        i
       ] }),
-      u,
-      r
-    ] }) });
-  }
-);
+      a
+    ] }),
+    u,
+    r
+  ] }) });
+});
 xs.displayName = "Alert.Root";
 const Ps = ({ children: r, ...e }) => {
   const t = A(Lt);
@@ -10720,7 +10718,10 @@ const Ps = ({ children: r, ...e }) => {
   }, [r, e]), null;
 };
 Ps.displayName = "Alert.Title";
-const Ss = ({ children: r, ...e }) => {
+const Ss = ({
+  children: r,
+  ...e
+}) => {
   const t = A(Lt);
   return I(() => {
     if (t) {
@@ -10812,7 +10813,7 @@ const d0 = xe({
         button: { colorPalette: "primary" }
       },
       critical: {
-        button: { colorPalette: "error" }
+        button: { colorPalette: "critical" }
       },
       neutral: {
         button: { colorPalette: "neutral" }
@@ -10859,8 +10860,8 @@ const mb = {
       gridArea: "label",
       fontWeight: "500",
       color: "neutral.11",
-      fontSize: "350",
-      lineHeight: "500"
+      fontSize: "var(--form-field-font-size)",
+      lineHeight: "var(--form-field-line-height)"
     },
     input: {
       gridArea: "input"
@@ -10868,14 +10869,14 @@ const mb = {
     description: {
       gridArea: "description",
       color: "neutral.11",
-      fontSize: "350",
-      lineHeight: "500"
+      fontSize: "var(--form-field-font-size)",
+      lineHeight: "var(--form-field-line-height)"
     },
     error: {
       gridArea: "error",
-      color: "error.11",
-      fontSize: "350",
-      lineHeight: "500"
+      color: "critical.11",
+      fontSize: "var(--form-field-font-size)",
+      lineHeight: "var(--form-field-line-height)"
     },
     popover: {
       "--scrollbar-color": "colors.neutral.8",
@@ -10894,6 +10895,20 @@ const mb = {
     }
   },
   variants: {
+    size: {
+      md: {
+        root: {
+          "--form-field-font-size": "fontSizes.350",
+          "--form-field-line-height": "lineHeights.500"
+        }
+      },
+      sm: {
+        root: {
+          "--form-field-font-size": "fontSizes.300",
+          "--form-field-line-height": "lineHeights.450"
+        }
+      }
+    },
     direction: {
       column: {
         root: {
@@ -10926,7 +10941,8 @@ const mb = {
   },
   // Default variant values when not explicitly specified
   defaultVariants: {
-    direction: "column"
+    direction: "column",
+    size: "md"
   }
 }), { withProvider: m0, withContext: Rt } = Ye({
   recipe: g0
@@ -11120,6 +11136,9 @@ export {
   Fe as Box,
   $n as Button,
   bb as Card,
+  $s as CardContent,
+  ys as CardHeader,
+  ms as CardRoot,
   $v as Checkbox,
   Sb as Code,
   ub as ColorModeLabel,
@@ -11166,6 +11185,8 @@ export {
   ff as Text,
   Sv as TextInput,
   mb as ToggleButtonGroup,
+  Ds as ToggleButtonGroupButton,
+  Cs as ToggleButtonGroupRoot,
   wp as Tooltip,
   Ep as TooltipTrigger,
   us as VisuallyHidden,