@altimateai/ui-components 0.0.69 → 0.0.70-beta.1

package/dist/Stack.js

@@ -5353,54 +5353,55 @@ const go = H(({ className: e, ...t }, n) => /* @__PURE__ */ g.jsx(
 ));
 go.displayName = mo.displayName;
 const ql = l.forwardRef(
-  ({ className: e, type: t, icon: n, iconPosition: r = "left", ...o }, s) => t === "checkbox" ? /* @__PURE__ */ g.jsx(
-    Kr,
-    {
-      className: e,
-      ...o
-    }
-  ) : t === "radio" ? /* @__PURE__ */ g.jsx(
-    go,
-    {
-      className: e,
-      ...o
-    }
-  ) : n ? /* @__PURE__ */ g.jsxs("div", { className: "al-relative al-w-full", children: [
-    /* @__PURE__ */ g.jsx(
-      "input",
+  ({ className: e, type: t, icon: n, iconPosition: r = "left", insetRing: o = !1, ...s }, a) => {
+    const i = "al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-py-2 al-text-base al-ring-offset-background file:al-border-0 file:al-bg-transparent file:al-text-sm file:al-font-medium file:al-text-foreground placeholder:al-text-muted-foreground focus-visible:al-outline-none disabled:al-cursor-not-allowed disabled:al-opacity-50 md:al-text-sm", c = o ? "focus-visible:al-ring-1 focus-visible:al-ring-inset focus-visible:al-ring-ring" : "focus-visible:al-ring-2 focus-visible:al-ring-ring focus-visible:al-ring-offset-2";
+    return t === "checkbox" ? /* @__PURE__ */ g.jsx(
+      Kr,
       {
-        type: t,
-        className: M(
-          "al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-py-2 al-text-base al-ring-offset-background file:al-border-0 file:al-bg-transparent file:al-text-sm file:al-font-medium file:al-text-foreground placeholder:al-text-muted-foreground focus-visible:al-outline-none focus-visible:al-ring-2 focus-visible:al-ring-ring focus-visible:al-ring-offset-2 disabled:al-cursor-not-allowed disabled:al-opacity-50 md:al-text-sm",
-          r === "left" ? "al-pl-10 al-pr-3" : "al-pl-3 al-pr-10",
-          e
-        ),
-        ref: s,
-        ...o
+        className: e,
+        ...s
       }
-    ),
-    /* @__PURE__ */ g.jsx(
-      "div",
+    ) : t === "radio" ? /* @__PURE__ */ g.jsx(
+      go,
       {
-        className: M(
-          "al-absolute al-top-0 al-flex al-h-10 al-items-center al-pointer-events-none",
-          r === "left" ? "al-left-3" : "al-right-3"
-        ),
-        children: /* @__PURE__ */ g.jsx(n, { size: 16, className: "al-text-muted-foreground" })
+        className: e,
+        ...s
       }
-    )
-  ] }) : /* @__PURE__ */ g.jsx(
-    "input",
-    {
-      type: t,
-      className: M(
-        "al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-px-3 al-py-2 al-text-base al-ring-offset-background file:al-border-0 file:al-bg-transparent file:al-text-sm file:al-font-medium file:al-text-foreground placeholder:al-text-muted-foreground focus-visible:al-outline-none focus-visible:al-ring-2 focus-visible:al-ring-ring focus-visible:al-ring-offset-2 disabled:al-cursor-not-allowed disabled:al-opacity-50 md:al-text-sm",
-        e
+    ) : n ? /* @__PURE__ */ g.jsxs("div", { className: "al-relative al-w-full", children: [
+      /* @__PURE__ */ g.jsx(
+        "input",
+        {
+          type: t,
+          className: M(
+            i,
+            c,
+            r === "left" ? "al-pl-10 al-pr-3" : "al-pl-3 al-pr-10",
+            e
+          ),
+          ref: a,
+          ...s
+        }
       ),
-      ref: s,
-      ...o
-    }
-  )
+      /* @__PURE__ */ g.jsx(
+        "div",
+        {
+          className: M(
+            "al-absolute al-top-0 al-flex al-h-10 al-items-center al-pointer-events-none",
+            r === "left" ? "al-left-3" : "al-right-3"
+          ),
+          children: /* @__PURE__ */ g.jsx(n, { size: 16, className: "al-text-muted-foreground" })
+        }
+      )
+    ] }) : /* @__PURE__ */ g.jsx(
+      "input",
+      {
+        type: t,
+        className: M(i, c, "al-px-3", e),
+        ref: a,
+        ...s
+      }
+    );
+  }
 );
 ql.displayName = "Input";
 const Zl = l.forwardRef(

package/dist/shadcn/index.d.ts

@@ -68,6 +68,8 @@ interface InputProps extends Omit<React$1.ComponentProps<"input">, "ref"> {
         className?: string;
     }>;
     iconPosition?: "left" | "right";
+    /** When true, the focus ring appears inside the input border instead of outside */
+    insetRing?: boolean;
 }
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 

package/dist/storybook/Input.stories.tsx

@@ -13,6 +13,7 @@ import {
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   icon?: React.ComponentType<{ size?: string | number; className?: string }>;
   iconPosition?: "left" | "right";
+  insetRing?: boolean;
 };
 
 export default {
@@ -30,6 +31,10 @@ export default {
       control: "select",
       options: ["left", "right"],
     },
+    insetRing: {
+      control: "boolean",
+      description: "When true, the focus ring appears inside the input border instead of outside",
+    },
   },
 } as Meta<typeof Input>;
 
@@ -124,6 +129,20 @@ DisabledWithIcon.args = {
   disabled: true,
 };
 
+export const InsetRing = Template.bind({});
+InsetRing.args = {
+  placeholder: "Focus ring appears inside",
+  insetRing: true,
+};
+
+export const InsetRingWithIcon = Template.bind({});
+InsetRingWithIcon.args = {
+  placeholder: "Inset ring with icon",
+  icon: IconMail,
+  iconPosition: "left",
+  insetRing: true,
+};
+
 // InputPassword Stories
 const PasswordTemplate: StoryFn<ComponentProps<typeof InputPassword>> = args => (
   <div className="al-p-4 al-max-w-md">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.69",
+  "version": "0.0.70-beta.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"