@proteos/ui 0.32.1 → 0.33.0

package/dist/index.d.cts

@@ -233,6 +233,12 @@ declare const fieldControlStyles: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    hasFocusRing: {
+        true: {};
+        false: {
+            box: string;
+        };
+    };
 }, {
     box: string[];
     content: string;
@@ -260,6 +266,12 @@ declare const fieldControlStyles: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    hasFocusRing: {
+        true: {};
+        false: {
+            box: string;
+        };
+    };
 }, {
     box: string[];
     content: string;
@@ -287,6 +299,12 @@ declare const fieldControlStyles: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    hasFocusRing: {
+        true: {};
+        false: {
+            box: string;
+        };
+    };
 }, {
     box: string[];
     content: string;
@@ -1372,12 +1390,15 @@ type InputProps = TextFieldProps & {
     /** Chrome variant. Defaults to `field`. `cell` flattens the box for
      *  spreadsheet-style inline editing (2px radius, no halo / resting shadow). */
     appearance?: FieldAppearance;
+    /** Set false to drop the focus/invalid ring — for tight hosts whose
+     *  overflow clip would cut it off. Border states stay. Defaults to true. */
+    hasFocusRing?: boolean;
     /** Extra props forwarded to the underlying <input>. */
     inputProps?: Omit<InputProps$1, 'className'>;
     /** Visual override for the input control only. */
     inputClassName?: string;
 };
-declare function Input({ label, description, errorMessage, placeholder, size, appearance, inputProps, inputClassName, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, description, errorMessage, placeholder, size, appearance, hasFocusRing, inputProps, inputClassName, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 type KbdProps = HTMLAttributes<HTMLElement>;
 declare function Kbd({ className, children, ...props }: KbdProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -233,6 +233,12 @@ declare const fieldControlStyles: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    hasFocusRing: {
+        true: {};
+        false: {
+            box: string;
+        };
+    };
 }, {
     box: string[];
     content: string;
@@ -260,6 +266,12 @@ declare const fieldControlStyles: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    hasFocusRing: {
+        true: {};
+        false: {
+            box: string;
+        };
+    };
 }, {
     box: string[];
     content: string;
@@ -287,6 +299,12 @@ declare const fieldControlStyles: tailwind_variants.TVReturnType<{
             content: string;
         };
     };
+    hasFocusRing: {
+        true: {};
+        false: {
+            box: string;
+        };
+    };
 }, {
     box: string[];
     content: string;
@@ -1372,12 +1390,15 @@ type InputProps = TextFieldProps & {
     /** Chrome variant. Defaults to `field`. `cell` flattens the box for
      *  spreadsheet-style inline editing (2px radius, no halo / resting shadow). */
     appearance?: FieldAppearance;
+    /** Set false to drop the focus/invalid ring — for tight hosts whose
+     *  overflow clip would cut it off. Border states stay. Defaults to true. */
+    hasFocusRing?: boolean;
     /** Extra props forwarded to the underlying <input>. */
     inputProps?: Omit<InputProps$1, 'className'>;
     /** Visual override for the input control only. */
     inputClassName?: string;
 };
-declare function Input({ label, description, errorMessage, placeholder, size, appearance, inputProps, inputClassName, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ label, description, errorMessage, placeholder, size, appearance, hasFocusRing, inputProps, inputClassName, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
 type KbdProps = HTMLAttributes<HTMLElement>;
 declare function Kbd({ className, children, ...props }: KbdProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -523,12 +523,25 @@ var fieldControlStyles = tv({
         box: "h-[29px] rounded-[4px] shadow-none focus:shadow-none data-[focused]:shadow-none data-[invalid]:shadow-none",
         content: "py-1"
       }
+    },
+    /* `hasFocusRing: false` — keep the full field chrome but drop the
+       focus/invalid ring, for tight hosts whose overflow clip would cut it
+       off (e.g. the editor-header title). The border still turns accent on
+       focus / danger on invalid. Declared after `appearance` so its
+       shadow-none wins the tailwind-merge order. */
+    hasFocusRing: {
+      true: {},
+      false: {
+        box: "focus:shadow-none data-[focused]:shadow-none data-[invalid]:shadow-none"
+      }
     }
   },
   compoundVariants: [
-    { appearance: "cell", invalid: true, class: { box: "shadow-none" } }
+    { appearance: "cell", invalid: true, class: { box: "shadow-none" } },
+    // invalid:true's RESTING danger ring — reduce back to the inset shadow.
+    { hasFocusRing: false, invalid: true, class: { box: "shadow-[var(--shadow-inset)]" } }
   ],
-  defaultVariants: { size: "md", invalid: false, appearance: "field" }
+  defaultVariants: { size: "md", invalid: false, appearance: "field", hasFocusRing: true }
 });
 var fieldTextStyles = {
   sm: "text-[13px]",
@@ -4185,12 +4198,13 @@ function Input({
   placeholder,
   size,
   appearance,
+  hasFocusRing,
   inputProps,
   inputClassName,
   className,
   ...props
 }) {
-  const styles2 = fieldControlStyles({ size, appearance });
+  const styles2 = fieldControlStyles({ size, appearance, hasFocusRing });
   return /* @__PURE__ */ jsxs(
     TextField,
     {