@validationcloud/fractal-ui 1.27.0 → 1.27.1

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

@@ -4,6 +4,7 @@ type TextInputProps = {
     disablePasswordManagers?: boolean;
     rightAccessory?: React.ReactNode;
     errorState?: boolean;
+    containerClassName?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
-export declare const TextInput: ({ variant, disablePasswordManagers, rightAccessory, errorState, className, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ variant, disablePasswordManagers, rightAccessory, errorState, className, containerClassName, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/text-input/text-input.stories.d.ts

@@ -1,10 +1,11 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
-    component: ({ variant, disablePasswordManagers, rightAccessory, errorState, className, ...props }: {
+    component: ({ variant, disablePasswordManagers, rightAccessory, errorState, className, containerClassName, ...props }: {
         variant?: "outlined" | "filled";
         disablePasswordManagers?: boolean;
         rightAccessory?: React.ReactNode;
         errorState?: boolean;
+        containerClassName?: string;
     } & import('react').InputHTMLAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
     args: {
         disabled: false;
@@ -22,3 +23,4 @@ export declare const ErrorState: Story;
 export declare const ErrorStateFilled: Story;
 export declare const Disabled: Story;
 export declare const DisabledFilled: Story;
+export declare const WithContainerClassName: Story;

package/dist/fractal-ui.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as i, jsxs as h, Fragment as b } from "react/jsx-runtime";
-import { Slot as C, DropdownMenu as c, ScrollArea as p, Tooltip as L } from "radix-ui";
-import { forwardRef as v } from "react";
+import { Slot as F, DropdownMenu as v, ScrollArea as p, Tooltip as c } from "radix-ui";
+import { forwardRef as u } from "react";
 import { extendTailwindMerge as w } from "tailwind-merge";
 const t = w({
   extend: {
@@ -46,9 +46,9 @@ const t = w({
   tag: "tg-tag px-[6px] py-[2px] rounded",
   caption: "tg-caption px-2 py-[2px] rounded-lg",
   bodyBold: "tg-body-bold px-[10px] py-1 rounded"
-}, B = v(
+}, B = u(
   ({ asChild: e, color: l = "number", size: d = "tag", className: o, ...r }, f) => {
-    const a = e ? C.Root : "div";
+    const a = e ? F.Root : "div";
     return /* @__PURE__ */ i(
       a,
       {
@@ -60,7 +60,7 @@ const t = w({
   }
 );
 B.displayName = "Badge";
-const A = v(
+const A = u(
   ({
     asChild: e,
     header: l,
@@ -70,9 +70,9 @@ const A = v(
     background: f = "bg-neutral-70",
     className: a,
     children: n,
-    ...F
+    ...L
   }, s) => {
-    const M = e ? C.Root : "div";
+    const M = e ? F.Root : "div";
     return /* @__PURE__ */ i(
       M,
       {
@@ -90,7 +90,7 @@ const A = v(
           f,
           a
         ),
-        ...F,
+        ...L,
         children: e ? n : /* @__PURE__ */ h(b, { children: [
           l && /* @__PURE__ */ i(_, { padding: r, children: l }),
           n
@@ -122,7 +122,7 @@ function _({ padding: e, children: l, className: d, ...o }) {
     }
   );
 }
-const u = {
+const C = {
   base: [
     // Base
     "flex cursor-pointer items-center justify-center text-nowrap text-neutral-10 ring-inset transition ease-in-out",
@@ -231,18 +231,18 @@ const u = {
     small: "-mx-4 -my-2 px-4 py-2",
     xsmall: "-mx-4 -my-1.5 px-2 py-1"
   }
-}, V = v(
+}, V = u(
   ({ asChild: e, variant: l = "primary", size: d = "medium", className: o, children: r, ...f }, a) => {
-    const n = e ? C.Root : "button";
+    const n = e ? F.Root : "button";
     return /* @__PURE__ */ i(
       n,
       {
         ref: a,
         className: t(
-          ...u.base,
-          ...u.variants[l],
-          l !== "text" && u.sizes[d],
-          l === "ghost" && u.ghostSizes[d],
+          ...C.base,
+          ...C.variants[l],
+          l !== "text" && C.sizes[d],
+          l === "ghost" && C.ghostSizes[d],
           o
         ),
         ...f,
@@ -278,9 +278,9 @@ function I({
     )
   ] });
 }
-const H = v(
+const H = u(
   ({ className: e, baseColor: l = "bg-neutral-60", textValue: d, ...o }, r) => /* @__PURE__ */ i(
-    c.Item,
+    v.Item,
     {
       className: t(
         "tg-button-small data-highlighted:text-neutral-10 flex cursor-pointer items-center truncate rounded-[10px] px-4 py-2.5 transition-colors outline-none select-none",
@@ -304,10 +304,10 @@ function j({
   disabled: f,
   ...a
 }) {
-  return /* @__PURE__ */ h(c.Root, { ...a, children: [
-    /* @__PURE__ */ i(c.Trigger, { className: t("", o), asChild: !0, disabled: f, children: e }),
-    /* @__PURE__ */ i(c.Portal, { children: /* @__PURE__ */ i(p.Root, { type: "hover", style: { "--scrollbar-size": "10px" }, asChild: !0, children: /* @__PURE__ */ h(
-      c.Content,
+  return /* @__PURE__ */ h(v.Root, { ...a, children: [
+    /* @__PURE__ */ i(v.Trigger, { className: t("", o), asChild: !0, disabled: f, children: e }),
+    /* @__PURE__ */ i(v.Portal, { children: /* @__PURE__ */ i(p.Root, { type: "hover", style: { "--scrollbar-size": "10px" }, asChild: !0, children: /* @__PURE__ */ h(
+      v.Content,
       {
         className: t(
           "max-h-(--radix-dropdown-menu-content-available-height) overflow-hidden rounded-2xl shadow-[0px_8px_20px_2px_rgba(0,0,0,0.40)]",
@@ -438,9 +438,9 @@ function W({ className: e, ...l }) {
     }
   );
 }
-const q = v(
+const q = u(
   ({ asChild: e, className: l, ...d }, o) => {
-    const r = e ? C.Root : "div";
+    const r = e ? F.Root : "div";
     return /* @__PURE__ */ i(
       r,
       {
@@ -524,22 +524,24 @@ const G = {
   rightAccessory: d,
   errorState: o,
   className: r,
-  ...f
+  containerClassName: f,
+  ...a
 }) => {
-  const a = e === "filled", n = o || f["aria-invalid"];
+  const n = e === "filled", L = o || a["aria-invalid"];
   return /* @__PURE__ */ h(
     "div",
     {
       className: t(
         // base wrapper styles:
-        "flex min-h-10 flex-row items-center justify-between rounded-lg",
+        "flex min-h-10 w-full flex-row items-center justify-between rounded-lg",
         // variant-specific base:
-        a ? "bg-neutral-60" : "border-neutral-40 focus-within:border-secondary-40 border bg-transparent",
+        n ? "bg-neutral-60" : "border-neutral-40 focus-within:border-secondary-40 border bg-transparent",
         // error:
-        n && (a ? "" : "border-warning-50 focus-within:border-warning-50"),
+        L && (n ? "" : "border-warning-50 focus-within:border-warning-50"),
         // disabled:
-        f.disabled && "cursor-not-allowed",
-        f.disabled && (a ? "bg-neutral-55" : "border-neutral-55")
+        a.disabled && "cursor-not-allowed",
+        a.disabled && (n ? "bg-neutral-55" : "border-neutral-55"),
+        f
       ),
       children: [
         /* @__PURE__ */ i(
@@ -549,16 +551,16 @@ const G = {
               // base input styles:
               "tg-body placeholder-neutral-40 flex-1 bg-transparent px-3 focus:outline-none disabled:cursor-not-allowed",
               // text color:
-              a ? "text-neutral-10 caret-secondary-40" : "",
+              n ? "text-neutral-10 caret-secondary-40" : "",
               // error:
-              n && a && "text-warning-50",
+              L && n && "text-warning-50",
               // disabled:
-              f.disabled && !a && "text-neutral-40",
+              a.disabled && !n && "text-neutral-40",
               r
             ),
-            "aria-invalid": n,
+            "aria-invalid": L,
             ...l && G,
-            ...f
+            ...a
           }
         ),
         d && /* @__PURE__ */ i("div", { className: "pr-4", children: d })
@@ -575,21 +577,21 @@ function Y({
   defaultOpen: f,
   onOpenChange: a,
   delayDuration: n,
-  className: F,
+  className: L,
   children: s,
   ...M
 }) {
   return /* @__PURE__ */ h(
-    L.Root,
+    c.Root,
     {
       open: r,
       defaultOpen: f,
       onOpenChange: a,
       delayDuration: n,
       children: [
-        /* @__PURE__ */ i(L.Trigger, { className: "cursor-pointer", asChild: !0, children: s }),
-        /* @__PURE__ */ i(L.Portal, { children: /* @__PURE__ */ h(
-          L.Content,
+        /* @__PURE__ */ i(c.Trigger, { className: "cursor-pointer", asChild: !0, children: s }),
+        /* @__PURE__ */ i(c.Portal, { children: /* @__PURE__ */ h(
+          c.Content,
           {
             className: t(
               "tg-caption text-neutral-20 max-h-(--radix-tooltip-content-available-height) origin-(--radix-tooltip-content-transform-origin) rounded-lg p-3 text-center text-pretty shadow-md",
@@ -597,7 +599,7 @@ function Y({
               "data-[state=closed]:animate-tooltip-exit data-[state=delayed-open]:animate-tooltip-delayed-enter data-[state=instant-open]:animate-tooltip-enter",
               o && "w-(--radix-tooltip-trigger-width)",
               l,
-              F
+              L
             ),
             side: d,
             sideOffset: 4,
@@ -606,7 +608,7 @@ function Y({
             children: [
               e,
               /* @__PURE__ */ i(
-                L.Arrow,
+                c.Arrow,
                 {
                   className: t(
                     l === "bg-neutral-60" && "fill-neutral-60",
@@ -630,7 +632,7 @@ function l2({
   skipDelayDuration: d = 50,
   ...o
 }) {
-  return /* @__PURE__ */ i(L.TooltipProvider, { delayDuration: l, skipDelayDuration: d, ...o, children: e });
+  return /* @__PURE__ */ i(c.TooltipProvider, { delayDuration: l, skipDelayDuration: d, ...o, children: e });
 }
 export {
   B as Badge,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.27.0",
+  "version": "1.27.1",
   "module": "./dist/fractal-ui.js",
   "type": "module",
   "files": [