@yomologic/react-ui 0.5.11 → 0.6.2

package/dist/base.css

@@ -69,6 +69,10 @@
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
+  
+  /* Font Families - Users can override these */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-input: var(--font-family-base);
 
   /* Component: Button */
   --button-padding-xs-x: 0.5rem;
@@ -304,6 +308,38 @@
   --star-size: 1.5rem;
 }
 
+/* Apply font-family to form inputs */
+input,
+textarea,
+select {
+  font-family: var(--font-family-input);
+}
+
+/* Custom scrollbar for textarea with primary color */
+textarea::-webkit-scrollbar {
+  width: 8px;
+}
+
+textarea::-webkit-scrollbar-track {
+  background: var(--color-surface);
+  border-radius: 4px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background: var(--color-primary);
+  border-radius: 4px;
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary-hover);
+}
+
+/* Firefox scrollbar */
+textarea {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary) var(--color-surface);
+}
+
 /* Responsive Typography - Desktop Overrides */
 @media (min-width: 1024px) {
   :root {

package/dist/index.js

@@ -676,7 +676,7 @@ function FormControl({
           {
             className: cn(
               "text-small",
-              currentError ? "text-error" : "text-(--color-muted-foreground)"
+              currentError ? "text-(--color-error)" : "text-(--color-muted-foreground)"
             ),
             id: `${fieldId}-message`,
             role: currentError ? "alert" : void 0,
@@ -748,7 +748,7 @@ function FormHelperText({
     {
       className: cn(
         "text-small",
-        isError ? "text-error" : "text-(--color-muted-foreground)",
+        isError ? "text-(--color-error)" : "text-(--color-muted-foreground)",
         className
       ),
       role: isError ? "alert" : void 0,
@@ -1063,10 +1063,10 @@ var Input = import_react5.default.forwardRef(
                 "aria-describedby": inputError ? `${fieldId}-error` : helperText ? `${fieldId}-helper` : void 0,
                 className: cn(
                   "w-full px-3 py-2 border rounded-md transition-colors",
-                  "text-(--color-muted-foreground) placeholder-gray-400",
+                  "text-(--color-foreground) placeholder-gray-400",
                   "focus:outline-none",
                   "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                  inputError ? "border-error focus:ring-2 focus:ring-error focus:border-error active:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
+                  inputError ? "border-(--color-error) focus:ring-2 focus:ring-(--color-error) focus:border-(--color-error) active:border-(--color-error)" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
                   leftIcon && "pl-10",
                   rightIcon && "pr-10",
                   className
@@ -1080,7 +1080,7 @@ var Input = import_react5.default.forwardRef(
             shouldRenderError && inputError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "p",
               {
-                className: "text-small text-error",
+                className: "text-small text-(--color-error)",
                 id: `${fieldId}-error`,
                 role: "alert",
                 children: inputError
@@ -1307,10 +1307,10 @@ var Textarea = import_react6.default.forwardRef(
               "aria-describedby": textareaError ? `${textareaId}-error` : helperText ? `${textareaId}-helper` : void 0,
               className: cn(
                 "w-full px-3 py-2 border rounded-md transition-colors",
-                "text-(--color-muted-foreground) placeholder-gray-400",
+                "text-(--color-foreground) placeholder-gray-400",
                 "focus:outline-none",
                 "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                textareaError ? "border-error focus:ring-2 focus:ring-error focus:border-error active:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
+                textareaError ? "border-(--color-error) focus:ring-2 focus:ring-(--color-error) focus:border-(--color-error) active:border-(--color-error)" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) active:border-(--color-primary)",
                 resizeClasses[resize],
                 autoResize && "overflow-hidden",
                 !autoResize && "overflow-auto",
@@ -1789,7 +1789,7 @@ function Checkbox({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-small text-(--color-error)", role: "alert", children: displayError }) })
   ] });
 }
 function CheckboxGroup({
@@ -1939,7 +1939,7 @@ function CheckboxGroup({
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
-            className: `text-small ${error ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${error ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             role: error ? "alert" : void 0,
             children: error || helperText
           }
@@ -2118,7 +2118,7 @@ function RadioGroup({
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "p",
           {
-            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             role: displayError ? "alert" : void 0,
             children: displayError || helperText
           }
@@ -2347,7 +2347,7 @@ function Select({
             flex items-center justify-between
             transition-all duration-200
             outline-none
-            ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error focus-visible:ring-2 focus-visible:ring-error focus-visible:border-error" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) focus-visible:ring-2 focus-visible:ring-(--color-primary)/30 focus-visible:border-(--color-primary)"}
+            ${displayError ? "border-(--color-error) focus:ring-2 focus:ring-(--color-error) focus:border-(--color-error) focus-visible:ring-2 focus-visible:ring-(--color-error) focus-visible:border-(--color-error)" : "border-(--color-border) focus:ring-2 focus:ring-(--color-primary)/30 focus:border-(--color-primary) focus-visible:ring-2 focus-visible:ring-(--color-primary)/30 focus-visible:border-(--color-primary)"}
             ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
             ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
           `,
@@ -2436,7 +2436,7 @@ function Select({
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "p",
           {
-            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             children: displayError || helperText
           }
         ) })
@@ -2515,7 +2515,7 @@ function NativeSelect({
             style: { color: "var(--color-muted-foreground)" },
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-1 text-error", children: "*" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-1 text-(--color-error)", children: "*" })
             ]
           }
         ),
@@ -2535,7 +2535,7 @@ function NativeSelect({
                     appearance-none
                     cursor-pointer
                     outline-none
-                    ${displayError ? "border-error focus:border-error active:border-error" : "border-(--color-border) focus:border-(--color-primary) active:border-(--color-primary)"}
+                    ${displayError ? "border-(--color-error) focus:border-(--color-error) active:border-(--color-error)" : "border-(--color-border) focus:border-(--color-primary) active:border-(--color-primary)"}
                     ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-primary)"}
                     ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
                     pr-10
@@ -2551,7 +2551,7 @@ function NativeSelect({
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "p",
           {
-            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-(--color-error)" : "text-(--color-muted-foreground)"}`,
             children: displayError || helperText
           }
         ) })