@dust-tt/sparkle 0.2.270 → 0.2.271

package/dist/esm/components/TextArea.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
-export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+declare const RESIZE_DIRECTIONS: readonly ["none", "vertical", "horizontal", "both"];
+type ResizeDirectionType = (typeof RESIZE_DIRECTIONS)[number];
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    resize?: ResizeDirectionType;
     error?: string | null;
     showErrorLabel?: boolean;
     minRows?: number;
-    className?: string;
 }
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { TextArea };
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/esm/components/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,2FAiCpB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,iBAAiB,qDAAsD,CAAC;AAE9E,KAAK,mBAAmB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAWD,QAAA,MAAM,QAAQ,2FA8Cb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/esm/components/TextArea.js

@@ -1,12 +1,22 @@
 import { __assign, __rest } from "tslib";
 import React from "react";
-import { classNames } from "../lib/utils";
-export var TextArea = React.forwardRef(function (_a, ref) {
-    var error = _a.error, _b = _a.showErrorLabel, showErrorLabel = _b === void 0 ? false : _b, className = _a.className, _c = _a.minRows, minRows = _c === void 0 ? 10 : _c, props = __rest(_a, ["error", "showErrorLabel", "className", "minRows"]);
+import { cn } from "../lib/utils";
+var RESIZE_DIRECTIONS = ["none", "vertical", "horizontal", "both"];
+var textAreaStyles = cn("s-flex s-w-full s-px-3 s-py-2", "s-transition s-duration-100", "s-text-sm placeholder:s-text-muted-foreground s-text-foreground", "s-ring-offset-background s-border s-border-border-dark s-bg-background s-rounded-xl", "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 ", "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground");
+var TextArea = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.resize, resize = _b === void 0 ? "both" : _b, _c = _a.minRows, minRows = _c === void 0 ? 10 : _c, error = _a.error, showErrorLabel = _a.showErrorLabel, props = __rest(_a, ["className", "resize", "minRows", "error", "showErrorLabel"]);
+    var resizeClass = {
+        none: "s-resize-none",
+        vertical: "s-resize-y",
+        horizontal: "s-resize-x",
+        both: "s-resize",
+    };
     return (React.createElement("div", { className: "s-flex s-flex-col s-gap-1 s-p-px" },
-        React.createElement("textarea", __assign({ rows: minRows, ref: ref, className: classNames("overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-scrollbar-hide s-duration-200", !error
-                ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
-                : "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500", "s-border-structure-200 s-bg-structure-50", "s-resize-y", className !== null && className !== void 0 ? className : "") }, props)),
+        React.createElement("textarea", __assign({ className: cn(textAreaStyles, resizeClass[resize], className, !error
+                ? cn("s-ring-structure-200 focus:s-ring-action-300", "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark")
+                : cn("s-ring-warning-200 focus:s-ring-warning-300", "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark")), ref: ref, rows: minRows }, props)),
         error && showErrorLabel && (React.createElement("div", { className: "s-ml-2 s-text-sm s-text-warning-500" }, error))));
 });
+TextArea.displayName = "TextArea";
+export { TextArea };
 //# sourceMappingURL=TextArea.js.map

package/dist/esm/components/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUhD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EAMgB,EAChB,GAAG;IAND,IAAA,KAAK,WAAA,EACL,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,SAAS,eAAA,EACT,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACT,KAAK,cALV,mDAMC,CADS;IAIV,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,2CACE,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,8IAA8I,EAC9I,CAAC,KAAK;gBACJ,CAAC,CAAC,0EAA0E;gBAC5E,CAAC,CAAC,8DAA8D,EAClE,0CAA0C,EAC1C,YAAY,EACZ,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAChB,IACG,KAAK,EACT;QACD,KAAK,IAAI,cAAc,IAAI,CAC1B,6BAAK,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAO,CACnE,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,IAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,CAAU,CAAC;AAY9E,IAAM,cAAc,GAAG,EAAE,CACvB,+BAA+B,EAC/B,6BAA6B,EAC7B,iEAAiE,EACjE,qFAAqF,EACrF,oFAAoF,EACpF,sFAAsF,CACvF,CAAC;AAEF,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAC/B,UACE,EAOC,EACD,GAAG;IAPD,IAAA,SAAS,eAAA,EACT,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EACf,eAAY,EAAZ,OAAO,mBAAG,EAAE,KAAA,EACZ,KAAK,WAAA,EACL,cAAc,oBAAA,EACX,KAAK,cANV,6DAOC,CADS;IAIV,IAAM,WAAW,GAAG;QAClB,IAAI,EAAE,eAAe;QACrB,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,YAAY;QACxB,IAAI,EAAE,UAAU;KACjB,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,2CACE,SAAS,EAAE,EAAE,CACX,cAAc,EACd,WAAW,CAAC,MAAM,CAAC,EACnB,SAAS,EACT,CAAC,KAAK;gBACJ,CAAC,CAAC,EAAE,CACA,8CAA8C,EAC9C,kEAAkE,CACnE;gBACH,CAAC,CAAC,EAAE,CACA,6CAA6C,EAC7C,iEAAiE,CAClE,CACN,EACD,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,OAAO,IACT,KAAK,EACT;QACD,KAAK,IAAI,cAAc,IAAI,CAC1B,6BAAK,SAAS,EAAC,qCAAqC,IAAE,KAAK,CAAO,CACnE,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/esm/stories/TextArea.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("../components/TextArea").TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    component: React.ForwardRefExoticComponent<import("../components/TextArea").TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 };
 export default meta;
 export declare const TextAreaExample: () => React.JSX.Element;

package/dist/sparkle.css

@@ -941,10 +941,6 @@ select {
   -webkit-line-clamp: 3;
 }
 
-.s-block {
-  display: block;
-}
-
 .s-inline-block {
   display: inline-block;
 }
@@ -1465,10 +1461,22 @@ select {
           user-select: none;
 }
 
+.s-resize-none {
+  resize: none;
+}
+
 .s-resize-y {
   resize: vertical;
 }
 
+.s-resize-x {
+  resize: horizontal;
+}
+
+.s-resize {
+  resize: both;
+}
+
 .s-list-decimal {
   list-style-type: decimal;
 }
@@ -2064,11 +2072,6 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
-.s-border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
 .s-border-rose-100 {
   --tw-border-opacity: 1;
   border-color: rgb(255 228 230 / var(--tw-border-opacity));
@@ -4218,16 +4221,6 @@ select {
   color: rgb(148 163 184 / var(--tw-placeholder-opacity));
 }
 
-.s-placeholder-element-700::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-placeholder-opacity));
-}
-
-.s-placeholder-element-700::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-placeholder-opacity));
-}
-
 .s-opacity-0 {
   opacity: 0;
 }
@@ -4688,16 +4681,6 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.focus\:s-border-action-300:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
-}
-
-.focus\:s-border-red-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
 .focus\:s-bg-action-50-dark:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(23 37 84 / var(--tw-bg-opacity));
@@ -4735,11 +4718,6 @@ select {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
-.focus\:s-ring-red-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-}
-
 .focus\:s-ring-warning-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.270",
+  "version": "0.2.271",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/TextArea.tsx

@@ -1,40 +1,66 @@
 import React from "react";
 
-import { classNames } from "@sparkle/lib/utils";
+import { cn } from "@sparkle/lib/utils";
 
-export interface TextAreaProps
+const RESIZE_DIRECTIONS = ["none", "vertical", "horizontal", "both"] as const;
+
+type ResizeDirectionType = (typeof RESIZE_DIRECTIONS)[number];
+
+export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  resize?: ResizeDirectionType;
   error?: string | null;
   showErrorLabel?: boolean;
   minRows?: number;
-  className?: string;
 }
 
-export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+const textAreaStyles = cn(
+  "s-flex s-w-full s-px-3 s-py-2",
+  "s-transition s-duration-100",
+  "s-text-sm placeholder:s-text-muted-foreground s-text-foreground",
+  "s-ring-offset-background s-border s-border-border-dark s-bg-background s-rounded-xl",
+  "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 ",
+  "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground"
+);
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
-      error,
-      showErrorLabel = false,
       className,
+      resize = "both",
       minRows = 10,
+      error,
+      showErrorLabel,
       ...props
-    }: TextAreaProps,
+    },
     ref
   ) => {
+    const resizeClass = {
+      none: "s-resize-none",
+      vertical: "s-resize-y",
+      horizontal: "s-resize-x",
+      both: "s-resize",
+    };
+
     return (
       <div className="s-flex s-flex-col s-gap-1 s-p-px">
         <textarea
-          rows={minRows}
-          ref={ref}
-          className={classNames(
-            "overflow-y-auto s-block s-w-full s-min-w-0 s-rounded-xl s-text-sm s-placeholder-element-700 s-transition-all s-scrollbar-hide s-duration-200",
+          className={cn(
+            textAreaStyles,
+            resizeClass[resize],
+            className,
             !error
-              ? "s-border-structure-100 focus:s-border-action-300 focus:s-ring-action-300"
-              : "s-border-red-500 focus:s-border-red-500 focus:s-ring-red-500",
-            "s-border-structure-200 s-bg-structure-50",
-            "s-resize-y",
-            className ?? ""
+              ? cn(
+                  "s-ring-structure-200 focus:s-ring-action-300",
+                  "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
+                )
+              : cn(
+                  "s-ring-warning-200 focus:s-ring-warning-300",
+                  "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
+                )
           )}
+          ref={ref}
+          rows={minRows}
           {...props}
         />
         {error && showErrorLabel && (
@@ -44,3 +70,6 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     );
   }
 );
+TextArea.displayName = "TextArea";
+
+export { TextArea };