indas-ui 0.1.9 → 0.1.11

package/dist/components/ui/forms/input.js

@@ -48,7 +48,7 @@ const Input = React.forwardRef(({ className, type = "text", label, error, helper
     };
     // Compact mode - just return the input without wrapper
     if (compact) {
-        return (_jsx("input", { id: inputId, name: inputName, type: type, className: cn("flex h-10 w-full border px-3 py-2 text-xs", "bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-subtle))]", "focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]/10", "disabled:cursor-not-allowed disabled:opacity-50", "transition-all duration-200", type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", 
+        return (_jsx("input", { id: inputId, name: inputName, type: type, className: cn("flex h-10 w-full border px-3 py-2 text-xs", "bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-subtle))]", "focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-focus))]/10", "disabled:cursor-not-allowed disabled:opacity-50", "transition-all duration-200", type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", 
             // Joined group styling
             position === 'first' && "rounded-l border-r-0", position === 'middle' && "border-r-0", position === 'last' && "rounded-r", position === 'only' && "rounded", !position && "rounded", 
             // Edited field highlighting
@@ -58,10 +58,10 @@ const Input = React.forwardRef(({ className, type = "text", label, error, helper
                 ? "border-[rgb(var(--color-danger))] focus:border-[rgb(var(--color-danger))]"
                 : isEdited
                     ? "border-[rgb(var(--color-warning))] focus:border-[rgb(var(--color-warning))] focus:ring-[rgb(var(--color-warning))]/20 focus:z-10"
-                    : "border-[rgb(var(--bd-default))] focus:border-[rgb(var(--color-primary))] focus:z-10", className), ref: ref, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, min: type === 'number' ? 0 : undefined, ...props }));
+                    : "border-[rgb(var(--bd-default))] focus:border-[rgb(var(--color-focus))] focus:z-10", className), ref: ref, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, min: type === 'number' ? 0 : undefined, ...props }));
     }
     // Standard mode with wrapper
-    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-xs font-medium text-[rgb(var(--fg-default))] mb-1.5", suppressHydrationWarning: true, children: label })), _jsxs("div", { className: "relative", children: [LeftIcon && (_jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: _jsx(LeftIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })), _jsx("input", { id: inputId, name: inputName, type: type, className: cn("flex h-10 w-full rounded-md border px-3 py-2 text-xs", "bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-subtle))]", "focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]/10", "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[rgb(var(--bg-subtle))]", "transition-all duration-200", type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", LeftIcon && "pl-10", RightIcon && "pr-10", 
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-xs font-medium text-[rgb(var(--fg-default))] mb-1.5", suppressHydrationWarning: true, children: label })), _jsxs("div", { className: "relative", children: [LeftIcon && (_jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: _jsx(LeftIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })), _jsx("input", { id: inputId, name: inputName, type: type, className: cn("flex h-10 w-full rounded-md border px-3 py-2 text-xs", "bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-subtle))]", "focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-focus))]/10", "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[rgb(var(--bg-subtle))]", "transition-all duration-200", type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", LeftIcon && "pl-10", RightIcon && "pr-10", 
                         // Edited field highlighting
                         isEdited && !props.disabled && "bg-[rgb(var(--color-warning-subtle))] border-[rgb(var(--color-warning))]", 
                         // Border color
@@ -69,7 +69,7 @@ const Input = React.forwardRef(({ className, type = "text", label, error, helper
                             ? "border-[rgb(var(--color-danger))] focus:border-[rgb(var(--color-danger))]"
                             : isEdited
                                 ? "border-[rgb(var(--color-warning))] focus:border-[rgb(var(--color-warning))] focus:ring-[rgb(var(--color-warning))]/20"
-                                : "border-[rgb(var(--bd-default))] focus:border-[rgb(var(--color-primary))]", className), ref: ref, suppressHydrationWarning: label ? true : false, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, min: type === 'number' ? 0 : undefined, ...props }), RightIcon && (_jsx("div", { className: cn("absolute right-3 top-1/2 transform -translate-y-1/2", onRightIconClick && !props.disabled && "cursor-pointer", props.disabled && "opacity-50 cursor-not-allowed"), onClick: props.disabled ? undefined : onRightIconClick, children: _jsx(RightIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }))] }), error && typeof error === 'string' && (_jsx("p", { className: "mt-1 text-sm text-[rgb(var(--color-danger))]", children: error })), helper && !error && (_jsx("p", { className: "mt-1 text-sm text-[rgb(var(--fg-muted))]", children: helper }))] }));
+                                : "border-[rgb(var(--bd-default))] focus:border-[rgb(var(--color-focus))]", className), ref: ref, suppressHydrationWarning: label ? true : false, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, min: type === 'number' ? 0 : undefined, ...props }), RightIcon && (_jsx("div", { className: cn("absolute right-3 top-1/2 transform -translate-y-1/2", onRightIconClick && !props.disabled && "cursor-pointer", props.disabled && "opacity-50 cursor-not-allowed"), onClick: props.disabled ? undefined : onRightIconClick, children: _jsx(RightIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }))] }), error && typeof error === 'string' && (_jsx("p", { className: "mt-1 text-sm text-[rgb(var(--color-danger))]", children: error })), helper && !error && (_jsx("p", { className: "mt-1 text-sm text-[rgb(var(--fg-muted))]", children: helper }))] }));
 });
 Input.displayName = "Input";
 export { Input };

package/dist/components/ui/navigation/tabs.js

@@ -10,9 +10,9 @@ import { Dropdown } from '../../forms/dropdown/index.js';
 const TabsRoot = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-10 items-center justify-center rounded-md bg-[rgb(var(--bg-subtle))] p-1 text-[rgb(var(--fg-muted))]', className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-[rgb(var(--bg-surface))] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-primary))] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[rgb(var(--bg-surface))] data-[state=active]:text-[rgb(var(--fg-default))] data-[state=active]:shadow-sm', className), suppressHydrationWarning: true, ...props })));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-[rgb(var(--bg-surface))] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-focus))] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[rgb(var(--bg-surface))] data-[state=active]:text-[rgb(var(--fg-default))] data-[state=active]:shadow-sm', className), suppressHydrationWarning: true, ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-[rgb(var(--bg-surface))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-primary))] focus-visible:ring-offset-2', className), suppressHydrationWarning: true, ...props })));
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-[rgb(var(--bg-surface))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-focus))] focus-visible:ring-offset-2', className), suppressHydrationWarning: true, ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 export function Tabs({ tabs, activeTab, onTabChange, fullWidth = false, className = '', variant = 'pill', size = 'md', dropdownValues, onDropdownChange }) {
     const containerClasses = cn('inline-flex items-center max-w-full overflow-x-auto scrollbar-hide [-webkit-overflow-scrolling:touch]', variant === 'pill' && 'bg-[rgb(var(--bg-subtle))] rounded-full border border-[rgb(var(--bd-default))] p-px gap-0.5', variant === 'rounded' && 'rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-0.5', fullWidth && 'w-full', className);

package/dist/styles/tokens.css

@@ -22,6 +22,9 @@
 
     /* Primary Color System (Main brand/accent) - Default #003366 */
     --color-primary: 0 51 102;               /* Primary brand color #003366 */
+    /* What a focused field or button is outlined in. The brand colour unless the app says
+       otherwise: an app that keeps its brand colour for primary actions sets a neutral here. */
+    --color-focus: var(--color-primary);
     --color-primary-hover: 0 40 82;          /* Primary hover state - darker #003366 */
     --color-primary-subtle: 250 251 252;     /* Very light primary backgrounds (0.02 opacity equivalent) */
     --color-primary-muted: 102 153 204;      /* Muted primary */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indas-ui",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Indas UI — React component library for business apps: Tailwind design tokens, Radix primitives, Lucide icons, DataGrid, dashboards and charts.",
   "license": "MIT",
   "author": "Indas Analytics Pvt Ltd",