@nubase/frontend 0.1.17 → 0.1.19

package/dist/index.mjs

@@ -5230,9 +5230,40 @@ FormControl.displayName = "FormControl";
 
 // src/components/form-controls/controls/Checkbox/Checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva as cva4 } from "class-variance-authority";
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
+var checkboxVariants = cva4([
+  // Layout & Sizing
+  "peer size-4 shrink-0",
+  // Border & Shape
+  "border border-input rounded-[4px]",
+  // Background
+  "dark:bg-input/30",
+  // Visual Effects
+  "shadow-xs outline-none",
+  "transition-shadow",
+  // Checked State
+  "data-[state=checked]:bg-primary",
+  "data-[state=checked]:text-primary-foreground",
+  "data-[state=checked]:border-primary",
+  "dark:data-[state=checked]:bg-primary",
+  // Focus State
+  "focus-visible:border-ring",
+  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  // Disabled State
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50"
+]);
+var checkboxIndicatorVariants = cva4([
+  // Layout
+  "flex items-center justify-center",
+  // Text
+  "text-current",
+  // Animation
+  "transition-none"
+]);
 var Checkbox = React.forwardRef(({ className, hasError, ...props }, ref) => {
   return /* @__PURE__ */ jsx13(
     CheckboxPrimitive.Root,
@@ -5240,8 +5271,14 @@ var Checkbox = React.forwardRef(({ className, hasError, ...props }, ref) => {
       ref,
       "data-slot": "checkbox",
       className: cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        hasError && "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-destructive ring-destructive/20",
+        checkboxVariants(),
+        hasError && [
+          "border-destructive",
+          "ring-destructive/20",
+          "aria-invalid:border-destructive",
+          "aria-invalid:ring-destructive/20",
+          "dark:aria-invalid:ring-destructive/40"
+        ],
         className
       ),
       "aria-invalid": hasError,
@@ -5250,7 +5287,7 @@ var Checkbox = React.forwardRef(({ className, hasError, ...props }, ref) => {
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
-          className: "flex items-center justify-center text-current transition-none",
+          className: checkboxIndicatorVariants(),
           children: /* @__PURE__ */ jsx13(CheckIcon, { className: "size-3.5" })
         }
       )
@@ -5280,9 +5317,9 @@ var BooleanEditFieldRenderer = ({
 };
 
 // src/components/form/renderers/ViewFieldWrapper.tsx
-import { cva as cva4 } from "class-variance-authority";
+import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var viewFieldWrapperVariants = cva4(
+var viewFieldWrapperVariants = cva5(
   [
     // Base styles shared by all view field renderers
     "w-full min-w-0 px-3 py-1 rounded-md",
@@ -5334,18 +5371,62 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback as useCallback3, useRef as useRef2 } from "react";
 
 // src/components/form-controls/controls/LookupSelect/LookupSelect.tsx
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva6 } from "class-variance-authority";
 import { useCombobox } from "downshift";
 import { forwardRef as forwardRef6, useEffect as useEffect3, useState as useState3 } from "react";
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var lookupSelectVariants = cva5(
-  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-);
-var menuVariants = cva5(
-  "absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-auto text-sm"
-);
-var optionVariants = cva5(
-  "px-3 py-2 cursor-pointer transition-colors select-none relative",
+var lookupSelectVariants = cva6([
+  // Layout & Sizing
+  "flex h-9 w-full min-w-0",
+  // Spacing & Borders
+  "px-3 py-1 rounded-md border border-input",
+  // Background & Text
+  "bg-transparent text-base",
+  "dark:bg-input/30",
+  // Visual Effects
+  "shadow-xs outline-none",
+  "transition-[color,box-shadow]",
+  // Placeholder & Selection
+  "placeholder:text-muted-foreground",
+  "selection:bg-primary selection:text-primary-foreground",
+  // File Input Styling
+  "file:text-foreground file:inline-flex file:h-7",
+  "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+  // Focus State
+  "focus-visible:border-ring",
+  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  // Invalid State
+  "aria-invalid:border-destructive",
+  "aria-invalid:ring-destructive/20",
+  "dark:aria-invalid:ring-destructive/40",
+  // Disabled State
+  "disabled:pointer-events-none",
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50"
+]);
+var menuVariants = cva6([
+  // Positioning
+  "absolute z-50 w-full mt-1",
+  // Background & Border
+  "bg-background border border-border rounded-md",
+  // Visual Effects
+  "shadow-lg",
+  // Sizing & Overflow
+  "max-h-60 overflow-auto",
+  // Text
+  "text-sm"
+]);
+var optionVariants = cva6(
+  [
+    // Layout
+    "relative",
+    // Spacing
+    "px-3 py-2",
+    // Interaction
+    "cursor-pointer select-none",
+    // Visual Effects
+    "transition-colors"
+  ],
   {
     variants: {
       isHighlighted: {
@@ -5813,10 +5894,10 @@ var LookupViewFieldRenderer = ({
 import { useLayoutEffect, useRef as useRef3 } from "react";
 
 // src/components/form-controls/controls/TextInput/TextInput.tsx
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva7 } from "class-variance-authority";
 import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var textInputVariants = cva6([
+var textInputVariants = cva7([
   // Layout & Sizing
   "flex h-9 w-full min-w-0",
   // Spacing & Borders
@@ -6574,10 +6655,10 @@ var SchemaFormBody = ({
 };
 
 // src/components/buttons/ButtonBar/ButtonBar.tsx
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var buttonBarVariants = cva7("flex gap-3 p-3", {
+var buttonBarVariants = cva8("flex gap-3 p-3", {
   variants: {
     alignment: {
       left: "justify-start",
@@ -6651,9 +6732,9 @@ var SchemaFormButtonBar = ({
 };
 
 // src/components/callout/Callout.tsx
-import { cva as cva8 } from "class-variance-authority";
+import { cva as cva9 } from "class-variance-authority";
 import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
-var calloutVariants = cva8(
+var calloutVariants = cva9(
   "rounded-md px-4 py-3 text-sm flex items-start gap-3",
   {
     variants: {
@@ -6925,13 +7006,39 @@ import {
 } from "react";
 
 // src/components/form-controls/controls/SearchTextInput/SearchTextInput.tsx
-import { cva as cva9 } from "class-variance-authority";
+import { cva as cva10 } from "class-variance-authority";
 import { Search } from "lucide-react";
 import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
-var searchTextInputVariants = cva9(
-  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent pl-10 pr-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-);
+var searchTextInputVariants = cva10([
+  // Layout & Sizing
+  "flex h-9 w-full min-w-0",
+  // Spacing & Borders (pl-10 for search icon)
+  "pl-10 pr-3 py-1 rounded-md border border-input",
+  // Background & Text
+  "bg-transparent text-base",
+  "dark:bg-input/30",
+  // Visual Effects
+  "shadow-xs outline-none",
+  "transition-[color,box-shadow]",
+  // Placeholder & Selection
+  "placeholder:text-muted-foreground",
+  "selection:bg-primary selection:text-primary-foreground",
+  // File Input Styling
+  "file:text-foreground file:inline-flex file:h-7",
+  "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+  // Focus State
+  "focus-visible:border-ring",
+  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  // Invalid State
+  "aria-invalid:border-destructive",
+  "aria-invalid:ring-destructive/20",
+  "dark:aria-invalid:ring-destructive/40",
+  // Disabled State
+  "disabled:pointer-events-none",
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50"
+]);
 var SearchTextInput = forwardRef9(
   ({ className, type = "search", hasError, ...props }, ref) => {
     return /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
@@ -7177,8 +7284,10 @@ var TreeNavigatorComponent = ({
           event.preventDefault();
           if (currentItem?.hasChildren) {
             toggleExpanded(currentItem.id);
+          } else if (currentItem?.onExecute) {
+            currentItem.onExecute();
           } else {
-            currentItem?.onExecute?.();
+            itemRefs.current[selectedIndex]?.click();
           }
         }
       }
@@ -8574,18 +8683,60 @@ function ActionCellRendererGroup(_props) {
 }
 
 // src/components/form-controls/controls/Select/Select.tsx
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { useCombobox as useCombobox2, useSelect } from "downshift";
 import { forwardRef as forwardRef11, useMemo as useMemo4, useState as useState11 } from "react";
 import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
-var selectVariants = cva10(
-  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-);
-var menuVariants2 = cva10(
-  "absolute z-50 w-full mt-1 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-auto text-sm"
-);
-var optionVariants2 = cva10(
-  "px-4 py-2 cursor-pointer transition-colors select-none",
+var selectVariants = cva11([
+  // Layout & Sizing
+  "flex h-9 w-full min-w-0",
+  // Spacing & Borders
+  "px-3 py-1 rounded-md border border-input",
+  // Background & Text
+  "bg-transparent text-base",
+  "dark:bg-input/30",
+  // Visual Effects
+  "shadow-xs outline-none",
+  "transition-[color,box-shadow]",
+  // Placeholder & Selection
+  "placeholder:text-muted-foreground",
+  "selection:bg-primary selection:text-primary-foreground",
+  // File Input Styling
+  "file:text-foreground file:inline-flex file:h-7",
+  "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+  // Focus State
+  "focus-visible:border-ring",
+  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  // Invalid State
+  "aria-invalid:border-destructive",
+  "aria-invalid:ring-destructive/20",
+  "dark:aria-invalid:ring-destructive/40",
+  // Disabled State
+  "disabled:pointer-events-none",
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50"
+]);
+var menuVariants2 = cva11([
+  // Positioning
+  "absolute z-50 w-full mt-1",
+  // Background & Border
+  "bg-background border border-border rounded-md",
+  // Visual Effects
+  "shadow-lg",
+  // Sizing & Overflow
+  "max-h-60 overflow-auto",
+  // Text
+  "text-sm"
+]);
+var optionVariants2 = cva11(
+  [
+    // Spacing
+    "px-4 py-2",
+    // Interaction
+    "cursor-pointer select-none",
+    // Visual Effects
+    "transition-colors"
+  ],
   {
     variants: {
       isHighlighted: {
@@ -11974,10 +12125,10 @@ __export(definitions_exports, {
 });
 
 // src/components/buttons/ActionBar/ActionBar.tsx
-import { cva as cva11 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx74, jsxs as jsxs32 } from "react/jsx-runtime";
-var actionBarVariants = cva11("flex items-center gap-1 text-sm font-medium", {
+var actionBarVariants = cva12("flex items-center gap-1 text-sm font-medium", {
   variants: {
     variant: {
       default: ""
@@ -11987,7 +12138,7 @@ var actionBarVariants = cva11("flex items-center gap-1 text-sm font-medium", {
     variant: "default"
   }
 });
-var actionVariants = cva11(
+var actionVariants = cva12(
   "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
   {
     variants: {
@@ -12001,7 +12152,7 @@ var actionVariants = cva11(
     }
   }
 );
-var separatorVariants = cva11("bg-border w-[1px] h-6 mx-2 opacity-60");
+var separatorVariants = cva12("bg-border w-[1px] h-6 mx-2 opacity-60");
 var ActionBar = forwardRef12(
   ({ className, variant, actions, ...props }, ref) => {
     const { executeAction: executeAction2 } = useActionExecutor();
@@ -12057,10 +12208,10 @@ var ActionBar = forwardRef12(
 ActionBar.displayName = "ActionBar";
 
 // src/components/buttons/ActionBar/ActionBarContainer.tsx
-import { cva as cva12 } from "class-variance-authority";
+import { cva as cva13 } from "class-variance-authority";
 import { forwardRef as forwardRef13 } from "react";
 import { jsx as jsx75 } from "react/jsx-runtime";
-var actionBarContainerVariants = cva12(
+var actionBarContainerVariants = cva13(
   "bg-card border-border rounded-lg border p-3",
   {
     variants: {
@@ -14412,7 +14563,7 @@ var MainNav = forwardRef19(
 MainNav.displayName = "MainNav";
 
 // src/components/navigation/main-nav/NavItemComponent.tsx
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 
 // src/components/navigation/main-nav/SafeLink.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -14434,7 +14585,7 @@ var SafeLink = ({ to, className, onClick, children }) => {
 
 // src/components/navigation/main-nav/NavItemComponent.tsx
 import { Fragment as Fragment10, jsx as jsx102, jsxs as jsxs45 } from "react/jsx-runtime";
-var navItemVariants = cva13(
+var navItemVariants = cva14(
   "flex items-center gap-3 px-3 py-2 text-sm font-medium transition-all duration-200 rounded-md group",
   {
     variants: {
@@ -15588,7 +15739,8 @@ function SignInScreen() {
             {
               name: "email",
               validators: {
-                onBlur: ({ value }) => !value ? "Email is required" : void 0
+                onBlur: ({ value }) => !value ? "Email is required" : void 0,
+                onChange: ({ value }) => !value ? "Email is required" : void 0
               },
               children: (field) => /* @__PURE__ */ jsx113(FormControl, { label: "Email", required: true, field, children: /* @__PURE__ */ jsx113(
                 TextInput,
@@ -15598,6 +15750,7 @@ function SignInScreen() {
                   placeholder: "Enter your email",
                   value: field.state.value,
                   onChange: (e) => field.handleChange(e.target.value),
+                  onInput: (e) => field.handleChange(e.target.value),
                   onBlur: field.handleBlur,
                   autoComplete: "email",
                   disabled: isLoading,
@@ -15611,7 +15764,8 @@ function SignInScreen() {
             {
               name: "password",
               validators: {
-                onBlur: ({ value }) => !value ? "Password is required" : void 0
+                onBlur: ({ value }) => !value ? "Password is required" : void 0,
+                onChange: ({ value }) => !value ? "Password is required" : void 0
               },
               children: (field) => /* @__PURE__ */ jsx113(FormControl, { label: "Password", required: true, field, children: /* @__PURE__ */ jsx113(
                 TextInput,
@@ -15621,6 +15775,7 @@ function SignInScreen() {
                   placeholder: "Enter your password",
                   value: field.state.value,
                   onChange: (e) => field.handleChange(e.target.value),
+                  onInput: (e) => field.handleChange(e.target.value),
                   onBlur: field.handleBlur,
                   autoComplete: "current-password",
                   disabled: isLoading,
@@ -15794,6 +15949,13 @@ function SignUpScreen() {
                       return "Please enter a valid email address";
                     }
                     return void 0;
+                  },
+                  onChange: ({ value }) => {
+                    if (!value) return "Email is required";
+                    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                      return "Please enter a valid email address";
+                    }
+                    return void 0;
                   }
                 },
                 children: (field) => /* @__PURE__ */ jsx114(FormControl, { label: "Email", required: true, field, children: /* @__PURE__ */ jsx114(
@@ -15804,6 +15966,7 @@ function SignUpScreen() {
                     placeholder: "Enter your email",
                     value: field.state.value,
                     onChange: (e) => field.handleChange(e.target.value),
+                    onInput: (e) => field.handleChange(e.target.value),
                     onBlur: field.handleBlur,
                     autoComplete: "email",
                     disabled: isLoading,
@@ -15846,6 +16009,13 @@ function SignUpScreen() {
                       return "Password must be at least 8 characters";
                     }
                     return void 0;
+                  },
+                  onChange: ({ value }) => {
+                    if (!value) return "Password is required";
+                    if (value.length < 8) {
+                      return "Password must be at least 8 characters";
+                    }
+                    return void 0;
                   }
                 },
                 children: (field) => /* @__PURE__ */ jsx114(FormControl, { label: "Password", required: true, field, children: /* @__PURE__ */ jsx114(
@@ -15856,6 +16026,7 @@ function SignUpScreen() {
                     placeholder: "Enter your password",
                     value: field.state.value,
                     onChange: (e) => field.handleChange(e.target.value),
+                    onInput: (e) => field.handleChange(e.target.value),
                     onBlur: field.handleBlur,
                     autoComplete: "new-password",
                     disabled: isLoading,
@@ -15874,6 +16045,12 @@ function SignUpScreen() {
                     if (!value) return "Please confirm your password";
                     if (value !== password) return "Passwords do not match";
                     return void 0;
+                  },
+                  onChange: ({ value, fieldApi }) => {
+                    const password = fieldApi.form.getFieldValue("password");
+                    if (!value) return "Please confirm your password";
+                    if (value !== password) return "Passwords do not match";
+                    return void 0;
                   }
                 },
                 children: (field) => /* @__PURE__ */ jsx114(FormControl, { label: "Confirm Password", required: true, field, children: /* @__PURE__ */ jsx114(
@@ -15884,6 +16061,7 @@ function SignUpScreen() {
                     placeholder: "Confirm your password",
                     value: field.state.value,
                     onChange: (e) => field.handleChange(e.target.value),
+                    onInput: (e) => field.handleChange(e.target.value),
                     onBlur: field.handleBlur,
                     autoComplete: "new-password",
                     disabled: isLoading,
@@ -18962,6 +19140,7 @@ export {
   Widget,
   boldCommand,
   checkListCommand,
+  checkboxVariants,
   cleanupKeybindings,
   codeBlockCommand,
   codeCommand,