@stackshift-ui/textarea 6.0.2 → 6.0.4-beta.0

package/dist/chunk-GNX4DKIE.mjs

@@ -0,0 +1 @@
+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};

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:()=>x});module.exports=k(q);var l=require("@stackshift-ui/system"),g=$(require("classnames")),n=require("react/jsx-runtime"),c="Textarea",x=({required:a=!1,name:e,ariaLabel:t,placeholder:o,onChange:r,labelClass:T,variant:b="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 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}[b])!=null?m:d;return(0,n.jsxs)(n.Fragment,{children:[!f&&(0,n.jsx)("label",{htmlFor:e,className:T,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})]})};x.displayName=c;0&&(module.exports={Textarea});
+"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});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-I5S3MZFR.mjs";export{e as Textarea};
+"use strict";import{a as e}from"./chunk-GNX4DKIE.mjs";export{e as 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:()=>T});module.exports=k(q);var l=require("@stackshift-ui/system"),g=$(require("classnames")),n=require("react/jsx-runtime"),c="Textarea",T=({required:a=!1,name:e,ariaLabel:t,placeholder:o,onChange:r,labelClass:b,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 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:b,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})]})};T.displayName=c;0&&(module.exports={Textarea});
+"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});

package/dist/textarea.mjs

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

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/textarea",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,13 +29,13 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.2",
-    "@stackshift-ui/eslint-config": "6.0.2"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/scripts": "6.0.2"
+    "@stackshift-ui/scripts": "6.0.2",
+    "@stackshift-ui/system": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./textarea";

package/src/textarea.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Textarea } from "./textarea";
+
+describe.concurrent("textarea", () => {
+  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);
+  });
+});

package/src/textarea.tsx

@@ -0,0 +1,80 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import cn from "classnames";
+import type { ElementType, HTMLProps, ReactNode } 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;
+}
+
+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;
+
+  return (
+    <>
+      {!noLabel && (
+        <label htmlFor={name} className={labelClass}>
+          {label || name}
+        </label>
+      )}
+      <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}
+        {...props}
+      />
+    </>
+  );
+};
+
+Textarea.displayName = displayName;

package/dist/chunk-I5S3MZFR.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:T,as:b="textarea",...r})=>{var o;let{[t]:x=C}=N(),a="h-24 w-full resize rounded 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:b,...r,"data-testid":t,onChange:p,"aria-label":i||e,className:L(f,T),placeholder:c,name:e,required:l,id:e,...r})]})};S.displayName=t;export{S as a};