@stackshift-ui/input 6.0.2 → 6.0.4

package/dist/chunk-7VREZAQM.mjs

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

package/dist/index.js

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

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-ZZTG2VMD.mjs";export{e as Input};
+"use strict";import{a as e}from"./chunk-7VREZAQM.mjs";export{e as Input};

package/dist/input.js

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

package/dist/input.mjs

@@ -1 +1 @@
-import{a}from"./chunk-ZZTG2VMD.mjs";export{a as Input};
+import{a}from"./chunk-7VREZAQM.mjs";export{a as Input};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/input",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "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": {
@@ -34,7 +35,7 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "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 "./input";

package/src/input.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Input } from "./input";
+
+describe.concurrent("input", () => {
+  afterEach(cleanup);
+
+  test("Common: Input - test if renders without errors", ({ expect }) => {
+    const clx = "input-class";
+    render(<Input className={clx} />);
+    expect(screen.getByTestId("input").classList).toContain(clx);
+  });
+});

package/src/input.tsx

@@ -0,0 +1,92 @@
+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";
+type InputType = "number" | "password" | "email" | "text";
+type TextSize = "sm" | "md" | "lg";
+
+export interface InputProps extends Omit<HTMLProps<HTMLInputElement>, "as"> {
+  noLabel?: boolean;
+  label?: string;
+  ariaLabel?: string;
+  required?: boolean;
+  name?: string;
+  labelClass?: string;
+  placeholder?: string;
+  type?: InputType;
+  variant?: Variant;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  textSize?: TextSize;
+  [key: string]: any;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "Input";
+
+export const Input: React.FC<InputProps> = ({
+  noLabel,
+  label,
+  ariaLabel,
+  required = false,
+  name,
+  labelClass,
+  placeholder,
+  type = "text",
+  variant = "primary",
+  onChange,
+  textSize = "md",
+  children,
+  className,
+  as = "input",
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const commonStyle = "w-full rounded-global px-4 py-2 leading-loose";
+  const primary = `${commonStyle}`;
+  const secondary = `${commonStyle} bg-gray-100 p-4 text-xs outline-none`;
+  const outline = `${commonStyle} text-xs py-3 border border-slate-300`;
+
+  const text = {
+    sm: "text-xs",
+    md: "text-base",
+    lg: "text-lg",
+  }[textSize];
+
+  const variants: StyleVariants<Variant> = {
+    primary,
+    secondary,
+    outline,
+  };
+
+  const variantClass = variants[variant] ?? primary;
+
+  return (
+    <>
+      {!noLabel && (
+        <label className={labelClass} htmlFor={name}>
+          {label || name}
+        </label>
+      )}
+      <Component
+        name={name}
+        id={name}
+        placeholder={placeholder}
+        required={required}
+        aria-label={ariaLabel || name}
+        type={type}
+        as={as}
+        className={cn(variantClass, text, className)}
+        onChange={onChange}
+        {...props}
+        data-testid={displayName}
+      />
+    </>
+  );
+};
+
+Input.displayName = displayName;

package/dist/chunk-ZZTG2VMD.mjs

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