@stackshift-ui/input 6.0.12 → 7.0.0-beta.1

package/dist/chunk-UKYDCVEP.mjs

@@ -0,0 +1 @@
+import{cn as r,DefaultComponent as a,useStackShiftUIComponents as s}from"@stackshift-ui/system";import{jsx as l}from"react/jsx-runtime";var e="Input";function d({className:i,type:t,...n}){let{[e]:o=a}=s();return l(o,{as:"input",type:t,"data-slot":"input",className:r("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",i),...n})}d.displayName=e;export{d 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: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});
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var i in e)a(t,i,{get:e[i],enumerable:!0})},c=(t,e,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of u(e))!f.call(t,o)&&o!==i&&a(t,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return t};var b=t=>c(a({},"__esModule",{value:!0}),t);var g={};m(g,{Input:()=>d});module.exports=b(g);var n=require("@stackshift-ui/system"),l=require("react/jsx-runtime"),s="Input";function d({className:t,type:e,...i}){let{[s]:r=n.DefaultComponent}=(0,n.useStackShiftUIComponents)();return(0,l.jsx)(r,{as:"input",type:e,"data-slot":"input",className:(0,n.cn)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",t),...i})}d.displayName=s;0&&(module.exports={Input});

package/dist/index.mjs

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

package/dist/input.d.ts

@@ -1,23 +1,6 @@
-import type { ElementType, HTMLProps, ReactNode } from "react";
-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;
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+declare namespace Input {
+    var displayName: string;
 }
-export declare const Input: React.FC<InputProps>;
-export {};
+export { 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 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});
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},c=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of u(e))!f.call(i,o)&&o!==t&&a(i,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return i};var b=i=>c(a({},"__esModule",{value:!0}),i);var g={};m(g,{Input:()=>d});module.exports=b(g);var n=require("@stackshift-ui/system"),l=require("react/jsx-runtime"),s="Input";function d({className:i,type:e,...t}){let{[s]:r=n.DefaultComponent}=(0,n.useStackShiftUIComponents)();return(0,l.jsx)(r,{as:"input",type:e,"data-slot":"input",className:(0,n.cn)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",i),...t})}d.displayName=s;0&&(module.exports={Input});

package/dist/input.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/input",
   "description": "",
-  "version": "6.0.12",
+  "version": "7.0.0-beta.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -34,15 +34,15 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/system": "6.0.11"
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.1"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "@stackshift-ui/system": ">=6.1.0-beta.1"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/input.test.tsx

@@ -7,7 +7,49 @@ describe.concurrent("input", () => {
 
   test("Common: Input - test if renders without errors", ({ expect }) => {
     const clx = "input-class";
-    render(<Input className={clx} />);
-    expect(screen.getByTestId("input").classList).toContain(clx);
+    const { unmount } = render(<Input className={clx} placeholder="Test input" />);
+    const input = screen.getByPlaceholderText("Test input");
+    expect(input.classList).toContain(clx);
+  });
+
+  test("Common: Input - test with aria-label", ({ expect }) => {
+    const { unmount } = render(<Input aria-label="Test input" />);
+    const input = screen.getByLabelText("Test input");
+    expect(input.tagName.toLowerCase()).toBe("input");
+    unmount();
+  });
+
+  test("Common: Input - test with different types", ({ expect }) => {
+    const { unmount: unmountEmail } = render(<Input type="email" placeholder="Enter your email" />);
+    const input = screen.getByPlaceholderText("Enter your email");
+    expect(input.getAttribute("type")).toBe("email");
+
+    const { unmount: unmountPassword } = render(
+      <Input type="password" placeholder="Enter your password" />,
+    );
+    const passwordInput = screen.getByPlaceholderText("Enter your password");
+    expect(passwordInput.getAttribute("type")).toBe("password");
+
+    const { unmount: unmountNumber } = render(<Input type="number" placeholder="Enter your age" />);
+    const numberInput = screen.getByPlaceholderText("Enter your age");
+    expect(numberInput.getAttribute("type")).toBe("number");
+
+    const { unmount: unmountTel } = render(
+      <Input type="tel" placeholder="Enter your phone number" />,
+    );
+    const telInput = screen.getByPlaceholderText("Enter your phone number");
+    expect(telInput.getAttribute("type")).toBe("tel");
+
+    unmountEmail();
+    unmountPassword();
+    unmountNumber();
+    unmountTel();
+  });
+
+  test("Common: Input - test with required attribute", ({ expect }) => {
+    const { unmount } = render(<Input type="text" placeholder="Enter your name" required />);
+    const input = screen.getByPlaceholderText("Enter your name");
+    expect(input.getAttribute("required")).toBe("");
+    unmount();
   });
 });

package/src/input.tsx

@@ -1,92 +1,27 @@
-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";
-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;
-}
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 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
-}) => {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   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
+      as="input"
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
       )}
-      <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}
-      />
-    </>
+      {...props}
+    />
   );
-};
-
+}
 Input.displayName = displayName;
+
+export { Input };

package/dist/chunk-7VREZAQM.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 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};