@getgreenline/blaze-ui 1.0.41 → 1.0.43

package/dist/components/input-group.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 import { Button } from "../components/button";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({

package/dist/components/input.d.ts

@@ -1,4 +1,8 @@
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+import { type AttentionKey } from "../hooks/use-invalid-attention";
+type InputProps = React.ComponentProps<"input"> & {
+    attentionKey?: AttentionKey;
+};
+declare function Input({ attentionKey, className, style, type, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export { Input };
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,gCAAgC,CAAA;AAEvC,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAChD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED,iBAAS,KAAK,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAsB5E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/input.js

@@ -1,8 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../lib/utils.js';
+import { isAriaInvalid, useInvalidAttention } from '../hooks/use-invalid-attention.js';
 
-function Input({ className, type, ...props }) {
-    return (jsx("input", { type: type, "data-slot": "input", className: cn("tw:file:text-foreground tw:placeholder:text-input-placeholder tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:border-border tw:h-10 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:disabled:cursor-not-allowed tw:disabled:select-none tw:disabled:bg-input tw:disabled:text-muted-foreground tw:disabled:placeholder:text-muted-foreground tw:disabled:opacity-50 tw:disabled:shadow-none tw:dark:disabled:bg-input/80 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
+function Input({ attentionKey, className, style, type, ...props }) {
+    const isInvalid = isAriaInvalid(props["aria-invalid"]);
+    const { attentionProps } = useInvalidAttention({
+        attentionKey,
+        invalid: isInvalid,
+        style,
+    });
+    return (jsx("input", { type: type, "data-slot": "input", className: cn("tw:file:text-foreground tw:placeholder:text-input-placeholder tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/30 tw:border-border tw:h-10 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:disabled:cursor-not-allowed tw:disabled:select-none tw:disabled:bg-input tw:disabled:text-muted-foreground tw:disabled:placeholder:text-muted-foreground tw:disabled:opacity-50 tw:disabled:shadow-none tw:dark:disabled:bg-input/80 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...attentionProps, ...props }));
 }
 
 export { Input };

package/dist/components/multi-select.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type AttentionKey } from "../hooks/use-invalid-attention";
 export interface MultiSelectOption {
     value: string;
     label: string;
@@ -8,10 +9,11 @@ export interface MultiSelectProps extends Omit<React.ComponentProps<"button">, "
     options: MultiSelectOption[];
     value: string[];
     onValueChange: (value: string[]) => void;
+    attentionKey?: AttentionKey;
     placeholder?: string;
     size?: "sm" | "default";
     emptyMessage?: string;
 }
-declare function MultiSelect({ className, options, value, onValueChange, placeholder, size, emptyMessage, disabled, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function MultiSelect({ className, options, value, onValueChange, attentionKey, placeholder, size, emptyMessage, disabled, style, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export { MultiSelect };
 //# sourceMappingURL=multi-select.d.ts.map

package/dist/components/multi-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAClE,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAA8B,EAC9B,IAAgB,EAChB,YAAqC,EACrC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA+HlB;AAqDD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,gCAAgC,CAAA;AAGvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,EACb,YAAY,EACZ,WAA8B,EAC9B,IAAgB,EAChB,YAAqC,EACrC,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAqIlB;AAqDD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/multi-select.js

@@ -2,10 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { ChevronDownIcon, CheckIcon } from 'lucide-react';
+import { isAriaInvalid, useInvalidAttention } from '../hooks/use-invalid-attention.js';
 import { cn } from '../lib/utils.js';
 
-function MultiSelect({ className, options, value, onValueChange, placeholder = "Select options", size = "default", emptyMessage = "No options available", disabled, ...props }) {
-    const isInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+function MultiSelect({ className, options, value, onValueChange, attentionKey, placeholder = "Select options", size = "default", emptyMessage = "No options available", disabled, style, ...props }) {
+    const isInvalid = isAriaInvalid(props["aria-invalid"]);
+    const { attentionProps } = useInvalidAttention({
+        attentionKey,
+        invalid: isInvalid,
+        style,
+    });
     const valueRef = React.useRef(null);
     const selectedOptions = React.useMemo(() => options.filter((option) => value.includes(option.value)), [options, value]);
     const selectedLabels = React.useMemo(() => selectedOptions.map((option) => option.label), [selectedOptions]);
@@ -33,7 +39,7 @@ function MultiSelect({ className, options, value, onValueChange, placeholder = "
             : [...value, optionValue];
         onValueChange(nextValue);
     }
-    return (jsxs(PopoverPrimitive.Root, { children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-select-trigger", "data-size": size, disabled: disabled, className: cn("tw:!flex tw:!w-fit tw:!min-w-0 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "aria-invalid:tw:!border-destructive aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40", "dark:tw:!bg-input/30 dark:hover:tw:!bg-input/50", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", "data-[size=default]:tw:!min-h-9 data-[size=sm]:tw:!min-h-8", isInvalid && "tw:!border-destructive", className), ...props, children: [jsx("span", { ref: valueRef, "data-slot": "multi-select-value", className: cn("tw:!block tw:!min-w-0 tw:!flex-1 tw:!truncate tw:!text-left", selectedOptions.length === 0 && "tw:!text-muted-foreground"), children: selectedOptions.length === 0 ? placeholder : displayValue }), jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!opacity-50" })] }) }), jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "multi-select-content", align: "start", sideOffset: 4, className: "tw:!z-50 tw:!max-h-72 tw:!min-w-[var(--radix-popover-trigger-width)] tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!p-1 tw:!text-popover-foreground tw:!shadow-md tw:!outline-none data-[state=open]:tw:!animate-in data-[state=closed]:tw:!animate-out data-[state=closed]:tw:!fade-out-0 data-[state=open]:tw:!fade-in-0 data-[state=closed]:tw:!zoom-out-95 data-[state=open]:tw:!zoom-in-95", children: options.length === 0 ? (jsx("div", { className: "tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!text-muted-foreground", children: emptyMessage })) : (options.map((option) => {
+    return (jsxs(PopoverPrimitive.Root, { children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-select-trigger", "data-size": size, disabled: disabled, className: cn("tw:!flex tw:!w-fit tw:!min-w-0 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-border tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "aria-invalid:tw:!border-destructive aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40", "dark:tw:!bg-input/30 dark:hover:tw:!bg-input/50", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", "data-[size=default]:tw:!min-h-9 data-[size=sm]:tw:!min-h-8", isInvalid && "tw:!border-destructive", className), "aria-invalid": isInvalid || undefined, style: attentionProps.style, ...props, children: [jsx("span", { ref: valueRef, "data-slot": "multi-select-value", className: cn("tw:!block tw:!min-w-0 tw:!flex-1 tw:!truncate tw:!text-left", selectedOptions.length === 0 && "tw:!text-muted-foreground"), children: selectedOptions.length === 0 ? placeholder : displayValue }), jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!opacity-50" })] }) }), jsx(PopoverPrimitive.Portal, { children: jsx(PopoverPrimitive.Content, { "data-slot": "multi-select-content", align: "start", sideOffset: 4, className: "tw:!z-50 tw:!max-h-72 tw:!min-w-[var(--radix-popover-trigger-width)] tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!p-1 tw:!text-popover-foreground tw:!shadow-md tw:!outline-none data-[state=open]:tw:!animate-in data-[state=closed]:tw:!animate-out data-[state=closed]:tw:!fade-out-0 data-[state=open]:tw:!fade-in-0 data-[state=closed]:tw:!zoom-out-95 data-[state=open]:tw:!zoom-in-95", children: options.length === 0 ? (jsx("div", { className: "tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!text-muted-foreground", children: emptyMessage })) : (options.map((option) => {
                         const isSelected = value.includes(option.value);
                         return (jsxs("button", { type: "button", "data-slot": "multi-select-item", disabled: option.disabled, className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pl-2 tw:!pr-8 tw:!text-left tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "hover:tw:!bg-accent hover:tw:!text-accent-foreground focus:tw:!bg-accent focus:tw:!text-accent-foreground", option.disabled &&
                                 "tw:!cursor-not-allowed tw:!bg-muted/50 tw:!text-muted-foreground tw:!opacity-60 hover:tw:!bg-muted/50 hover:tw:!text-muted-foreground"), onClick: () => toggleValue(option.value), children: [jsx("span", { className: "tw:!absolute tw:!right-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: isSelected ? jsx(CheckIcon, { className: "tw:!size-4" }) : null }), jsx("span", { className: "tw:!min-w-0 tw:!flex-1 tw:!truncate", children: option.label })] }, option.value));

package/dist/components/textarea.d.ts

@@ -1,4 +1,8 @@
 import * as React from "react";
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+import { type AttentionKey } from "../hooks/use-invalid-attention";
+type TextareaProps = React.ComponentProps<"textarea"> & {
+    attentionKey?: AttentionKey;
+};
+declare function Textarea({ attentionKey, className, style, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAa1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,gCAAgC,CAAA;AAEvC,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED,iBAAS,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAqB5E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/textarea.js

@@ -1,8 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../lib/utils.js';
+import { isAriaInvalid, useInvalidAttention } from '../hooks/use-invalid-attention.js';
 
-function Textarea({ className, ...props }) {
-    return (jsx("textarea", { "data-slot": "textarea", className: cn("tw:border-input tw:placeholder:text-input-placeholder tw:dark:bg-input/30 tw:flex tw:field-sizing-content tw:min-h-16 tw:w-full tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:disabled:cursor-not-allowed tw:disabled:select-none tw:disabled:bg-input tw:disabled:text-muted-foreground tw:disabled:placeholder:text-muted-foreground tw:disabled:opacity-50 tw:disabled:shadow-none tw:dark:disabled:bg-input/80 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...props }));
+function Textarea({ attentionKey, className, style, ...props }) {
+    const isInvalid = isAriaInvalid(props["aria-invalid"]);
+    const { attentionProps } = useInvalidAttention({
+        attentionKey,
+        invalid: isInvalid,
+        style,
+    });
+    return (jsx("textarea", { "data-slot": "textarea", className: cn("tw:border-input tw:placeholder:text-input-placeholder tw:dark:bg-input/30 tw:flex tw:field-sizing-content tw:min-h-16 tw:w-full tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:disabled:cursor-not-allowed tw:disabled:select-none tw:disabled:bg-input tw:disabled:text-muted-foreground tw:disabled:placeholder:text-muted-foreground tw:disabled:opacity-50 tw:disabled:shadow-none tw:dark:disabled:bg-input/80 tw:md:text-sm", "tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px]", "tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive", className), ...attentionProps, ...props }));
 }
 
 export { Textarea };

package/dist/globals.css

@@ -25,10 +25,10 @@
   --accent: oklch(0.9632 0.0127 244.2532);
   --accent-foreground: oklch(0.6723 0.1606 244.9955);
   --destructive: oklch(0.6188 0.2376 25.7658);
-  --destructive-foreground: oklch(1.0000 0 0);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.9317 0.0118 231.6594);
   --input: oklch(0.934 0.0127 228.93);
-  --ring: oklch(0.6818 0.1584 243.3540);
+  --ring: oklch(0.6818 0.1584 243.354);
   --chart-1: oklch(0.6723 0.1606 244.9955);
   --chart-2: oklch(0.6907 0.1554 160.3454);
   --chart-3: oklch(0.8214 0.16 82.5337);
@@ -54,11 +54,21 @@
   --shadow-color: rgba(29, 161, 242, 0.15);
   --shadow-2xs: 0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.05);
   --shadow-xs: 0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow-md: 0px 4px 6px 0px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow-lg: 0px 10px 15px -3px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow-xl: 0px 20px 25px -5px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
+  --shadow-sm:
+    0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow:
+    0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow-md:
+    0px 4px 6px 0px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow-lg:
+    0px 10px 15px -3px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow-xl:
+    0px 20px 25px -5px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
   --shadow-2xl: 0px 25px 50px -12px hsl(202.8169 89.1213% 53.1373% / 0.25);
   --tracking-normal: 0em;
   --spacing: 0.25rem;
@@ -111,11 +121,21 @@
   --shadow-color: rgba(1, 6, 10, 0.15);
   --shadow-2xs: 0px 1px 2px 0px hsl(202.8169 89.1213% 53.1373% / 0.05);
   --shadow-xs: 0px 1px 2px 0px hsl(202.8169 89.1213% 53.1373% / 0.05);
-  --shadow-sm: 0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow: 0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow-md: 0px 1px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow-lg: 0px 10px 15px -3px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
-  --shadow-xl: 0px 20px 25px -5px hsl(202.8169 89.1213% 53.1373% / 0.10), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.10);
+  --shadow-sm:
+    0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow:
+    0px 1px 3px 0px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow-md:
+    0px 1px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow-lg:
+    0px 10px 15px -3px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
+  --shadow-xl:
+    0px 20px 25px -5px hsl(202.8169 89.1213% 53.1373% / 0.1),
+    0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.1);
   --shadow-2xl: 0px 25px 50px -12px hsl(202.8169 89.1213% 53.1373% / 0.25);
 }
 
@@ -183,6 +203,20 @@
   }
 }
 
+@keyframes blaze-invalid-attention-glow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+
+  25% {
+    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.24);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+}
+
 /* Fix style collisions with poopstrap/reactstrap/mui/antd  */
 .blaze-ui-root {
   --blaze-420-font-sm: 14px;
@@ -624,11 +658,11 @@
   background-color: var(--primary) !important;
 }
 
-.blaze-ui-root button[data-slot='switch'][data-state='unchecked'] {
+.blaze-ui-root button[data-slot="switch"][data-state="unchecked"] {
   background-color: var(--border) !important;
 }
 
-.dark .blaze-ui-root button[data-slot='switch'][data-state='unchecked'] {
+.dark .blaze-ui-root button[data-slot="switch"][data-state="unchecked"] {
   background-color: var(--input) !important;
 }
 

package/dist/hooks/use-invalid-attention.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export declare const INVALID_ATTENTION_GLOW_ANIMATION_NAME = "blaze-invalid-attention-glow";
+export declare const INVALID_ATTENTION_DURATION_MS = 850;
+export type AttentionKey = string | number | null | undefined;
+export type InvalidAttentionProps = {
+    style?: React.CSSProperties;
+};
+export type UseInvalidAttentionResult = {
+    attentionProps: InvalidAttentionProps;
+};
+type UseInvalidAttentionOptions = {
+    invalid: boolean;
+    attentionKey?: AttentionKey;
+    durationMs?: number;
+    style?: React.CSSProperties;
+};
+declare function isAriaInvalid(value: React.AriaAttributes["aria-invalid"]): value is true | "true" | "grammar" | "spelling";
+declare function useInvalidAttention({ invalid, attentionKey, durationMs, style, }: UseInvalidAttentionOptions): UseInvalidAttentionResult;
+export { isAriaInvalid, useInvalidAttention };
+//# sourceMappingURL=use-invalid-attention.d.ts.map

package/dist/hooks/use-invalid-attention.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-invalid-attention.d.ts","sourceRoot":"","sources":["../../src/hooks/use-invalid-attention.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,qCAAqC,iCAClB,CAAA;AAChC,eAAO,MAAM,6BAA6B,MAAM,CAAA;AAEhD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;AAC7D,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AACD,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,qBAAqB,CAAA;CACtC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,mDAEjE;AAED,iBAAS,mBAAmB,CAAC,EAC3B,OAAO,EACP,YAAY,EACZ,UAA0C,EAC1C,KAAK,GACN,EAAE,0BAA0B,GAAG,yBAAyB,CA8ExD;AAED,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/hooks/use-invalid-attention.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+const INVALID_ATTENTION_GLOW_ANIMATION_NAME = "blaze-invalid-attention-glow";
+const INVALID_ATTENTION_DURATION_MS = 850;
+function isAriaInvalid(value) {
+    return value === true || (typeof value === "string" && value !== "false");
+}
+function useInvalidAttention({ invalid, attentionKey, durationMs = INVALID_ATTENTION_DURATION_MS, style, }) {
+    const [isGlowing, setIsGlowing] = React.useState(false);
+    const frameRef = React.useRef(null);
+    const timeoutRef = React.useRef(null);
+    const lastTriggeredAttentionKeyRef = React.useRef(undefined);
+    const clearPendingGlow = React.useCallback(() => {
+        if (frameRef.current !== null) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        if (timeoutRef.current !== null) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    const startGlow = React.useCallback((nextDurationMs) => {
+        clearPendingGlow();
+        setIsGlowing(false);
+        // Restart the same animation reliably when the key changes again.
+        frameRef.current = window.requestAnimationFrame(() => {
+            setIsGlowing(true);
+            frameRef.current = null;
+        });
+        timeoutRef.current = window.setTimeout(() => {
+            setIsGlowing(false);
+            timeoutRef.current = null;
+        }, nextDurationMs);
+    }, [clearPendingGlow]);
+    React.useEffect(() => {
+        return clearPendingGlow;
+    }, [clearPendingGlow]);
+    React.useEffect(() => {
+        if (!invalid) {
+            setIsGlowing(false);
+            return;
+        }
+        const shouldTriggerGlow = !Object.is(lastTriggeredAttentionKeyRef.current, attentionKey);
+        if (!shouldTriggerGlow) {
+            return;
+        }
+        lastTriggeredAttentionKeyRef.current = attentionKey;
+        startGlow(durationMs);
+    }, [attentionKey, durationMs, invalid, startGlow]);
+    const glowStyle = isGlowing
+        ? {
+            animation: `${INVALID_ATTENTION_GLOW_ANIMATION_NAME} ${durationMs}ms ease-out`,
+        }
+        : undefined;
+    const attentionProps = React.useMemo(() => ({
+        style: {
+            ...style,
+            ...glowStyle,
+        },
+    }), [glowStyle, style]);
+    return { attentionProps };
+}
+
+export { INVALID_ATTENTION_DURATION_MS, INVALID_ATTENTION_GLOW_ANIMATION_NAME, isAriaInvalid, useInvalidAttention };

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export * from "./components/tooltip";
 export * from "./components/login-screen";
 export * from "./components/visually-hidden";
 export * from "./hooks/use-mobile";
+export * from "./hooks/use-invalid-attention";
 export * from "./components/command";
 export * from "./components/item";
 export * from "./components/toggle-group";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,aAAa,CAAA"}

package/dist/index.js

@@ -47,6 +47,7 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './comp
 export { LoginScreen } from './components/login-screen.js';
 export { VisuallyHidden } from './components/visually-hidden.js';
 export { useIsMobile } from './hooks/use-mobile.js';
+export { INVALID_ATTENTION_DURATION_MS, INVALID_ATTENTION_GLOW_ANIMATION_NAME, isAriaInvalid, useInvalidAttention } from './hooks/use-invalid-attention.js';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/command.js';
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from './components/item.js';
 export { ToggleGroup, ToggleGroupItem } from './components/toggle-group.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getgreenline/blaze-ui",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.1",
@@ -38,8 +38,8 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^1.14.0",
     "next-themes": "^0.4.6",
-    "react-hook-form": "^7.74.0",
-    "react-resizable-panels": "^4.10.0",
+    "react-hook-form": "^7.75.0",
+    "react-resizable-panels": "^4.11.0",
     "recharts": "3.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
@@ -57,16 +57,16 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@tailwindcss/postcss": "^4.2.4",
-    "@turbo/gen": "^2.9.6",
+    "@turbo/gen": "^2.9.9",
     "@types/node": "^20.19.39",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.2.1",
-    "rollup": "^4.60.2",
+    "eslint": "^10.3.0",
+    "rollup": "^4.60.3",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.3",
-    "@workspace/eslint-config": "0.0.0",
-    "@workspace/typescript-config": "0.0.0"
+    "@workspace/typescript-config": "0.0.0",
+    "@workspace/eslint-config": "0.0.0"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",