@stackshift-ui/textarea 6.0.12-beta.2 → 6.1.0

package/dist/chunk-AE3A43CA.mjs

@@ -0,0 +1 @@
+import*as e from"react";import{cn as s,DefaultComponent as i,useStackShiftUIComponents as d}from"@stackshift-ui/system";import{jsx as p}from"react/jsx-runtime";var o="Textarea",l=e.forwardRef(({className:r,...t},a)=>{let{[o]:n=i}=d();return p(n,{as:"textarea",className:s("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",r),ref:a,...t})});l.displayName=o;export{l as a};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var v=Object.create;var s=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var M=(a,e)=>{for(var t in e)s(a,t,{get:e[t],enumerable:!0})},y=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of R(e))!H.call(a,r)&&r!==t&&s(a,r,{get:()=>e[r],enumerable:!(o=P(e,r))||o.enumerable});return a};var $=(a,e,t)=>(t=a!=null?v(E(a)):{},y(e||!a||!a.__esModule?s(t,"default",{value:a,enumerable:!0}):t,a)),k=a=>y(s({},"__esModule",{value:!0}),a);var q={};M(q,{Textarea:()=>b});module.exports=k(q);var l=require("@stackshift-ui/system"),g=$(require("classnames")),n=require("react/jsx-runtime"),c="Textarea",b=({required:a=!1,name:e,ariaLabel:t,placeholder:o,onChange:r,labelClass:x,variant:T="primary",label:u,noLabel:f,children:F,className:h,as:C="textarea",...p})=>{var m;let{[c]:N=l.DefaultComponent}=(0,l.useStackShiftUIComponents)(),i="h-24 w-full resize rounded-global p-4 text-xs leading-none",d=`${i}`,L=`${i} p-4 outline-none`,S=`${i}  py-3 border border-slate-300`,V=(m={primary:d,outline:S,secondary:L}[T])!=null?m:d;return(0,n.jsxs)(n.Fragment,{children:[!f&&(0,n.jsx)("label",{htmlFor:e,className:x,children:u||e}),(0,n.jsx)(N,{as:C,...p,"data-testid":c,onChange:r,"aria-label":t||e,className:(0,g.default)(V,h),placeholder:o,name:e,required:a,id:e,...p})]})};b.displayName=c;0&&(module.exports={Textarea});
+"use strict";var c=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var r in o)s(e,r,{get:o[r],enumerable:!0})},i=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of u(o))!x.call(e,a)&&a!==r&&s(e,a,{get:()=>o[a],enumerable:!(n=f(o,a))||n.enumerable});return e};var y=(e,o,r)=>(r=e!=null?c(b(e)):{},i(o||!e||!e.__esModule?s(r,"default",{value:e,enumerable:!0}):r,e)),v=e=>i(s({},"__esModule",{value:!0}),e);var C={};g(C,{Textarea:()=>p});module.exports=v(C);var d=y(require("react")),t=require("@stackshift-ui/system"),m=require("react/jsx-runtime"),l="Textarea",p=d.forwardRef(({className:e,...o},r)=>{let{[l]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,m.jsx)(n,{as:"textarea",className:(0,t.cn)("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:r,...o})});p.displayName=l;0&&(module.exports={Textarea});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-GNX4DKIE.mjs";export{e as Textarea};
+"use strict";import{a as e}from"./chunk-AE3A43CA.mjs";export{e as Textarea};

package/dist/textarea.d.ts

@@ -1,19 +1,3 @@
-import type { ElementType, HTMLProps, ReactNode } from "react";
-type Variant = "primary" | "outline" | "secondary";
-export interface TextareaProps extends Omit<HTMLProps<HTMLTextAreaElement>, "as"> {
-    required?: boolean;
-    name: string;
-    ariaLabel: string;
-    placeholder?: string;
-    onChange?: (...args: any) => any;
-    labelClass?: string;
-    variant?: Variant;
-    label?: string;
-    noLabel?: boolean;
-    [key: string]: any;
-    children?: ReactNode;
-    className?: string;
-    as?: ElementType;
-}
-export declare const Textarea: React.FC<TextareaProps>;
-export {};
+import * as React from "react";
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/textarea.js

@@ -1 +1 @@
-"use strict";var v=Object.create;var s=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var M=(a,e)=>{for(var t in e)s(a,t,{get:e[t],enumerable:!0})},y=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of R(e))!H.call(a,r)&&r!==t&&s(a,r,{get:()=>e[r],enumerable:!(o=P(e,r))||o.enumerable});return a};var $=(a,e,t)=>(t=a!=null?v(E(a)):{},y(e||!a||!a.__esModule?s(t,"default",{value:a,enumerable:!0}):t,a)),k=a=>y(s({},"__esModule",{value:!0}),a);var q={};M(q,{Textarea:()=>b});module.exports=k(q);var l=require("@stackshift-ui/system"),g=$(require("classnames")),n=require("react/jsx-runtime"),c="Textarea",b=({required:a=!1,name:e,ariaLabel:t,placeholder:o,onChange:r,labelClass:T,variant:x="primary",label:h,noLabel:u,children:F,className:f,as:C="textarea",...p})=>{var m;let{[c]:N=l.DefaultComponent}=(0,l.useStackShiftUIComponents)(),i="h-24 w-full resize rounded-global p-4 text-xs leading-none",d=`${i}`,L=`${i} p-4 outline-none`,S=`${i}  py-3 border border-slate-300`,V=(m={primary:d,outline:S,secondary:L}[x])!=null?m:d;return(0,n.jsxs)(n.Fragment,{children:[!u&&(0,n.jsx)("label",{htmlFor:e,className:T,children:h||e}),(0,n.jsx)(N,{as:C,...p,"data-testid":c,onChange:r,"aria-label":t||e,className:(0,g.default)(V,f),placeholder:o,name:e,required:a,id:e,...p})]})};b.displayName=c;0&&(module.exports={Textarea});
+"use strict";var c=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var r in o)s(e,r,{get:o[r],enumerable:!0})},i=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of u(o))!x.call(e,a)&&a!==r&&s(e,a,{get:()=>o[a],enumerable:!(n=f(o,a))||n.enumerable});return e};var y=(e,o,r)=>(r=e!=null?c(b(e)):{},i(o||!e||!e.__esModule?s(r,"default",{value:e,enumerable:!0}):r,e)),v=e=>i(s({},"__esModule",{value:!0}),e);var C={};g(C,{Textarea:()=>p});module.exports=v(C);var d=y(require("react")),t=require("@stackshift-ui/system"),m=require("react/jsx-runtime"),l="Textarea",p=d.forwardRef(({className:e,...o},r)=>{let{[l]:n=t.DefaultComponent}=(0,t.useStackShiftUIComponents)();return(0,m.jsx)(n,{as:"textarea",className:(0,t.cn)("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",e),ref:r,...o})});p.displayName=l;0&&(module.exports={Textarea});

package/dist/textarea.mjs

@@ -1 +1 @@
-import{a}from"./chunk-GNX4DKIE.mjs";export{a as Textarea};
+import{a}from"./chunk-AE3A43CA.mjs";export{a as Textarea};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/textarea",
   "description": "",
-  "version": "6.0.12-beta.2",
+  "version": "6.1.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,20 +29,20 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10-beta.2",
-    "@stackshift-ui/eslint-config": "6.0.10-beta.2"
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10-beta.2",
-    "@stackshift-ui/system": "6.0.11-beta.2"
+    "@stackshift-ui/scripts": "6.1.0",
+    "@stackshift-ui/system": "6.1.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11-beta.2"
+    "@stackshift-ui/system": ">=7.0.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/textarea.test.tsx

@@ -3,11 +3,31 @@ import { afterEach, describe, test } from "vitest";
 import { Textarea } from "./textarea";
 
 describe.concurrent("textarea", () => {
-  afterEach(cleanup);
+  afterEach(() => {
+    cleanup();
+  });
 
   test("Common: Textarea - test if renders without errors", ({ expect }) => {
     const clx = "textarea-class";
-    render(<Textarea className={clx} name="stackshift-textarea" ariaLabel="text area" />);
-    expect(screen.getByTestId("textarea").classList).toContain(clx);
+    const { unmount } = render(<Textarea className={clx} placeholder="Enter text here" />);
+    const textarea = screen.getByPlaceholderText("Enter text here");
+    expect(textarea.classList).toContain(clx);
+    expect(textarea.tagName.toLowerCase()).toBe("textarea");
+    unmount();
+  });
+
+  test("Common: Textarea - test with aria-label", ({ expect }) => {
+    const { unmount } = render(<Textarea aria-label="Text area input" />);
+    const textarea = screen.getByLabelText("Text area input");
+    expect(textarea.tagName.toLowerCase()).toBe("textarea");
+    unmount();
+  });
+
+  test("Common: Textarea - test with rows prop", ({ expect }) => {
+    const { unmount } = render(<Textarea placeholder="Test rows" rows={3} />);
+    const textarea = screen.getByPlaceholderText("Test rows");
+    screen.debug(textarea);
+    expect(textarea.getAttribute("rows")).toBe("3");
+    unmount();
   });
 });

package/src/textarea.tsx

@@ -1,80 +1,26 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { ElementType, HTMLProps, ReactNode } from "react";
+import * as React from "react";
 
-type StyleVariants<T extends string> = Record<T, string>;
-type Variant = "primary" | "outline" | "secondary";
-
-export interface TextareaProps extends Omit<HTMLProps<HTMLTextAreaElement>, "as"> {
-  required?: boolean;
-  name: string;
-  ariaLabel: string;
-  placeholder?: string;
-  onChange?: (...args: any) => any;
-  labelClass?: string;
-  variant?: Variant;
-  label?: string;
-  noLabel?: boolean;
-  [key: string]: any;
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Textarea";
 
-export const Textarea: React.FC<TextareaProps> = ({
-  required = false,
-  name,
-  ariaLabel,
-  placeholder,
-  onChange,
-  labelClass,
-  variant = "primary",
-  label,
-  noLabel,
-  children,
-  className,
-  as = "textarea",
-  ...props
-}) => {
-  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
-
-  const commonStyle = "h-24 w-full resize rounded-global p-4 text-xs leading-none";
-  const primary = `${commonStyle}`;
-  const secondary = `${commonStyle} p-4 outline-none`;
-  const outline = `${commonStyle}  py-3 border border-slate-300`;
-
-  const variants: StyleVariants<Variant> = {
-    primary,
-    outline,
-    secondary,
-  };
-
-  const variantClass = variants[variant] ?? primary;
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  return (
-    <>
-      {!noLabel && (
-        <label htmlFor={name} className={labelClass}>
-          {label || name}
-        </label>
-      )}
+    return (
       <Component
-        as={as}
-        {...props}
-        data-testid={displayName}
-        onChange={onChange}
-        aria-label={ariaLabel || name}
-        className={cn(variantClass, className)}
-        placeholder={placeholder}
-        name={name}
-        required={required}
-        id={name}
+        as="textarea"
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-primary/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
         {...props}
       />
-    </>
-  );
-};
-
+    );
+  },
+);
 Textarea.displayName = displayName;
+
+export { Textarea };

package/dist/chunk-GNX4DKIE.mjs

@@ -1 +0,0 @@
-import{DefaultComponent as C,useStackShiftUIComponents as N}from"@stackshift-ui/system";import L from"classnames";import{Fragment as V,jsx as s,jsxs as v}from"react/jsx-runtime";var t="Textarea",S=({required:l=!1,name:e,ariaLabel:i,placeholder:c,onChange:p,labelClass:d,variant:m="primary",label:y,noLabel:g,children:P,className:b,as:T="textarea",...r})=>{var o;let{[t]:x=C}=N(),a="h-24 w-full resize rounded-global p-4 text-xs leading-none",n=`${a}`,h=`${a} p-4 outline-none`,u=`${a}  py-3 border border-slate-300`,f=(o={primary:n,outline:u,secondary:h}[m])!=null?o:n;return v(V,{children:[!g&&s("label",{htmlFor:e,className:d,children:y||e}),s(x,{as:T,...r,"data-testid":t,onChange:p,"aria-label":i||e,className:L(f,b),placeholder:c,name:e,required:l,id:e,...r})]})};S.displayName=t;export{S as a};