@tipp/ui 2.4.0 → 2.6.0

package/dist/molecules/dynamic-field.cjs

@@ -68,6 +68,7 @@ var import_themes = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
 var import_themes2 = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
 
 // src/utils/map-with-responsive.ts
@@ -88,11 +89,38 @@ var mapWithResponsive = (args) => {
   return value;
 };
 
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
 // src/atoms/typo.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Typo = (0, import_react.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const _a = props, { size, variant, children, color, className } = _a, rest = __objRest(_a, ["size", "variant", "children", "color", "className"]);
+    const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
     const radixSize = (0, import_react.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
@@ -111,7 +139,16 @@ var Typo = (0, import_react.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes2.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes2.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";
@@ -125,6 +162,7 @@ var import_react3 = require("react");
 
 // src/atoms/heading.tsx
 var import_themes3 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
 var import_react2 = require("react");
 var import_themes4 = require("@radix-ui/themes");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -145,14 +183,26 @@ var mapVariant = (variant) => {
   }
 };
 function Heading2(props) {
-  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const _a = props, { size, children, variant, color, className } = _a, rest = __objRest(_a, ["size", "children", "variant", "color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react2.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
   const radixSize = (0, import_react2.useMemo)(() => {
     return variant ? mapWithResponsive({
       value: variant,
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_themes3.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx2.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      children
+    })
+  );
 }
 
 // src/molecules/form/form.tsx
@@ -323,61 +373,93 @@ var TextArea = (0, import_react6.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // src/atoms/select.tsx
-var import_themes7 = require("@radix-ui/themes");
+var import_themes8 = require("@radix-ui/themes");
+var import_clsx4 = require("clsx");
+var import_react8 = require("react");
+
+// src/theme/theme-provider.tsx
 var import_react7 = require("react");
+var import_themes7 = require("@radix-ui/themes");
+var import_clsx3 = require("clsx");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var SelectContext = (0, import_react7.createContext)({
+var ThemeAccentContext = (0, import_react7.createContext)(void 0);
+
+// src/atoms/select.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SelectContext = (0, import_react8.createContext)({
   error: false
 });
-var Content = (0, import_react7.forwardRef)((props, ref) => {
-  const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
-  const { error } = (0, import_react7.useContext)(SelectContext);
-  const cls = (0, import_react7.useMemo)(() => {
+var Content = (0, import_react8.forwardRef)((props, ref) => {
+  const _a = props, { className, isNavigation, color } = _a, rest = __objRest(_a, ["className", "isNavigation", "color"]);
+  const { error, color: contextColor } = (0, import_react8.useContext)(SelectContext);
+  const themeAccent = (0, import_react8.useContext)(ThemeAccentContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react8.useMemo)(
+    () => {
+      var _a2;
+      return resolveColor((_a2 = color != null ? color : contextColor) != null ? _a2 : themeAccent);
+    },
+    [color, contextColor, themeAccent]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  const cls = (0, import_react8.useMemo)(() => {
     const etc = isNavigation ? "nav-select" : "";
     const errorCls = error ? "tipp-error" : "";
-    return [etc, errorCls, className].join(" ");
-  }, [className, error, isNavigation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_themes7.Select.Content,
+    return (0, import_clsx4.clsx)(etc, errorCls, colorClassName, className);
+  }, [className, colorClassName, error, isNavigation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_themes8.Select.Content,
     __spreadProps(__spreadValues({
       position: "popper"
     }, rest), {
       className: cls,
+      color: appliedColor,
       ref
     })
   );
 });
 Content.displayName = "Select.Content";
-var Trigger = (0, import_react7.forwardRef)(
-  (props, ref) => {
-    const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
-    const { error } = (0, import_react7.useContext)(SelectContext);
-    const cls = (0, import_react7.useMemo)(() => {
-      const errorCls = error ? "error" : "";
-      return [errorCls, className].join(" ");
-    }, [className, error]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes7.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
-  }
-);
+var Trigger = (0, import_react8.forwardRef)((props, ref) => {
+  const _a = props, { className, color } = _a, rest = __objRest(_a, ["className", "color"]);
+  const { error, color: contextColor } = (0, import_react8.useContext)(SelectContext);
+  const { color: radixColor, className: colorClassName } = (0, import_react8.useMemo)(
+    () => resolveColor(color != null ? color : contextColor),
+    [color, contextColor]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  const cls = (0, import_react8.useMemo)(() => {
+    const errorCls = error ? "error" : "";
+    return (0, import_clsx4.clsx)(errorCls, colorClassName, className);
+  }, [className, colorClassName, error]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_themes8.Select.Trigger,
+    __spreadProps(__spreadValues({}, rest), {
+      className: cls,
+      color: appliedColor,
+      ref
+    })
+  );
+});
 Trigger.displayName = "Select.Trigger";
 function Root4(props) {
-  const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes7.Select.Root, __spreadValues({}, rest)) });
+  const _a = props, { error, color } = _a, rest = __objRest(_a, ["error", "color"]);
+  const value = (0, import_react8.useMemo)(() => ({ error, color }), [error, color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.Select.Root, __spreadValues({}, rest)) });
 }
 Root4.displayName = "Select.Root";
-var Select = __spreadProps(__spreadValues({}, import_themes7.Select), {
+var Select = __spreadProps(__spreadValues({}, import_themes8.Select), {
   Root: Root4,
   Trigger,
   Content
 });
 
 // src/atoms/check-box-group.tsx
-var import_themes8 = require("@radix-ui/themes");
-var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Root5 = (0, import_react8.forwardRef)((props, ref) => {
-  const _a = props, { children, size = "medium" } = _a, rest = __objRest(_a, ["children", "size"]);
-  const groupSize = (0, import_react8.useMemo)(() => {
+var import_themes9 = require("@radix-ui/themes");
+var import_clsx5 = require("clsx");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Root5 = (0, import_react9.forwardRef)((props, ref) => {
+  const _a = props, { children, size = "medium", color, className } = _a, rest = __objRest(_a, ["children", "size", "color", "className"]);
+  const groupSize = (0, import_react9.useMemo)(() => {
     switch (size) {
       case "small":
         return "1";
@@ -388,25 +470,61 @@ var Root5 = (0, import_react8.forwardRef)((props, ref) => {
         return "2";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+  const { className: colorClassName } = (0, import_react9.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_themes9.CheckboxGroup.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx5.clsx)(colorClassName, className),
+      ref,
+      size: groupSize,
+      children
+    })
+  );
 });
 Root5.displayName = "CheckboxGroup.Root";
 var CheckboxGroup = {
   Root: Root5,
-  Item: import_themes8.CheckboxGroup.Item
+  Item: import_themes9.CheckboxGroup.Item
 };
 
 // src/atoms/radio-group.tsx
-var import_themes9 = require("@radix-ui/themes");
+var import_themes10 = require("@radix-ui/themes");
+var import_clsx6 = require("clsx");
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Root6 = (0, import_react10.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react10.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_themes10.RadioGroup.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx6.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root6.displayName = "RadioGroup.Root";
+var RadioGroup = __spreadProps(__spreadValues({}, import_themes10.RadioGroup), {
+  Root: Root6
+});
 
 // src/atoms/check-box.tsx
-var import_themes10 = require("@radix-ui/themes");
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Checkbox = (0, import_react9.forwardRef)(
+var import_themes11 = require("@radix-ui/themes");
+var import_clsx7 = require("clsx");
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Checkbox = (0, import_react11.forwardRef)(
   (props, ref) => {
-    const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    const radixSize = (0, import_react9.useMemo)(() => {
+    const _a = props, { size = "medium", color, className } = _a, rest = __objRest(_a, ["size", "color", "className"]);
+    const radixSize = (0, import_react11.useMemo)(() => {
       switch (size) {
         case "small":
           return "1";
@@ -416,22 +534,54 @@ var Checkbox = (0, import_react9.forwardRef)(
           return "3";
       }
     }, [size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes10.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+    const { color: radixColor, className: colorClassName } = resolveColor(color);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_themes11.Checkbox,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx7.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize
+      })
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/atoms/radio-cards.tsx
-var import_themes11 = require("@radix-ui/themes");
+var import_themes12 = require("@radix-ui/themes");
+var import_clsx8 = require("clsx");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Root7 = (0, import_react12.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react12.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_themes12.RadioCards.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx8.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root7.displayName = "RadioCards.Root";
+var RadioCards = __spreadProps(__spreadValues({}, import_themes12.RadioCards), {
+  Root: Root7
+});
 
 // src/atoms/grid.tsx
-var import_themes12 = require("@radix-ui/themes");
+var import_themes13 = require("@radix-ui/themes");
 
 // src/atoms/inset.tsx
-var import_themes13 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 
 // src/molecules/dynamic-field.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
@@ -500,7 +650,7 @@ function DynamicFormField({
   const selectedValue = typeof value === "string" || typeof value === "number" ? String(value) : "";
   switch (field.type) {
     case "short_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -508,7 +658,7 @@ function DynamicFormField({
         })
       );
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           placeholder: field.placeholder,
@@ -516,7 +666,7 @@ function DynamicFormField({
         })
       );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TextField.Root,
         __spreadProps(__spreadValues({}, commonProps), {
           inputMode: "numeric",
@@ -526,9 +676,9 @@ function DynamicFormField({
         })
       );
     case "long_text":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
     case "dropdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         Select.Root,
         {
           disabled: readonly,
@@ -537,7 +687,7 @@ function DynamicFormField({
           },
           value: selectedValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Select.Trigger,
               {
                 placeholder: field.placeholder,
@@ -549,13 +699,13 @@ function DynamicFormField({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
           ]
         }
       );
     case "choice":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_themes9.RadioGroup.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        RadioGroup.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : (newValue) => {
@@ -563,26 +713,26 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: String(value || ""),
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "radio_cards": {
       const options = getOptions(field);
       if (!options) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_themes11.RadioCards.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : (newValue) => {
             void setFieldValue(name, newValue);
           },
           value: selectedValue,
-          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes11.RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typo, { children: option.label }) }, option.value))
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RadioCards.Item, { value: String(option.value), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { children: option.label }) }, option.value))
         }
       );
     }
     case "choices":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         CheckboxGroup.Root,
         {
           disabled: readonly,
@@ -591,12 +741,12 @@ function DynamicFormField({
           },
           orientation: field.orientation,
           value: Array.isArray(value) ? value.map(String) : [],
-          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
         }
       );
     case "yes_no":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes.Flex, { gap: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes.Flex, { gap: "2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Checkbox,
           {
             checked: Boolean(value),
@@ -606,7 +756,7 @@ function DynamicFormField({
             }
           }
         ),
-        field.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
+        field.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { color: "gray", variant: "caption", children: field.description }) : null
       ] });
     case "image_radio_card": {
       const options = getImageOptions(field);
@@ -630,23 +780,23 @@ function DynamicFormField({
         if (!selectedOption) return;
         void setFieldValue(name, selectedOption.value);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_themes11.RadioCards.Root,
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        RadioCards.Root,
         {
           disabled: readonly,
           onValueChange: readonly ? void 0 : handleValueChange,
           value: selectedValue,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes12.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes13.Grid, { columns: gridColumns, gap: gridGap, rows: gridRows, children: options.map((option) => {
             const optionValue = String(option.value);
             const altText = option.alt || option.label;
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_themes11.RadioCards.Item,
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              RadioCards.Item,
               {
                 style: {
                   padding: 0
                 },
                 value: optionValue,
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes13.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes14.Inset, { style: { width: "100%", height: "100%", padding: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "img",
                   {
                     alt: altText,