@rovula/ui 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -24,15 +24,23 @@ interface TableProps {
 }
 declare const Table: React.FC<TableProps>;
 
-interface TextInputProps {
-    value: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    placeholder?: string;
-    type?: 'text' | 'password' | 'email';
+type InputProps = {
+    id?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "normal" | "full";
+    variant?: "flat" | "outline" | "underline";
+    type?: React.HTMLInputTypeAttribute;
+    helperText?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
     disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    hasClearIcon?: boolean;
     className?: string;
-}
-declare const TextInput: React.FC<TextInputProps>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+declare const TextInput: FC<InputProps>;
 
 type TextProps = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "label1" | "label2";

package/dist/index.js

@@ -3,7 +3,7 @@
 import "./theme/global.css";
 export { default as Button } from "./components/Button/Button";
 export { default as Table } from "./components/Table/Table";
-export { default as TextInput } from "./components/Form/TextInput";
+export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 // UTILS

package/dist/src/theme/global.css

@@ -652,9 +652,19 @@ video {
   /* #CC3E2A */
   --error-default: var(--error-100);
   --error-foreground: var(--white);
+  /* Button */
   --btn-rounded-sm: 10px;
   --btn-rounded-md: 12px;
   --btn-rounded-lg: 16px;
+  /* Input */
+  --input-default-text-color: 164 169 178;
+  --input-default-stroke-color: 231 231 231;
+  --input-active-text-color: 29 30 39;
+  --input-active-stroke-color: 208 208 208;
+  --input-disabled-text-color: 196 199 205;
+  --input-disabled-stroke-color: 239 239 239;
+  --input-disabled-background-color: 247 247 247;
+  --input-label-background-color: 249 251 255;
 }
 
 *, ::before, ::after {
@@ -769,6 +779,51 @@ video {
   pointer-events: none;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.-top-1 {
+  top: -0.25rem;
+}
+
+.-top-1\.5 {
+  top: -0.375rem;
+}
+
+.left-3 {
+  left: 0.75rem;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -779,6 +834,30 @@ video {
   margin-bottom: auto;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-\[6px\] {
+  margin-top: 6px;
+}
+
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -795,6 +874,25 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
+.size-3 {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -811,6 +909,10 @@ video {
   max-width: 48rem;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -843,10 +945,18 @@ video {
   justify-content: center;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-8 {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
@@ -868,6 +978,10 @@ video {
   white-space: nowrap;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-\[--btn-rounded-lg\] {
   border-radius: var(--btn-rounded-lg);
 }
@@ -880,18 +994,38 @@ video {
   border-radius: var(--btn-rounded-sm);
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
+.rounded-none {
+  border-radius: 0px;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-error {
   --tw-border-opacity: 1;
   border-color: rgb(var(--error-100) / var(--tw-border-opacity));
@@ -902,6 +1036,11 @@ video {
   border-color: rgb(var(--info-default) / var(--tw-border-opacity));
 }
 
+.border-input-stroke {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
+}
+
 .border-primary {
   --tw-border-opacity: 1;
   border-color: rgb(var(--primary-default) / var(--tw-border-opacity));
@@ -941,6 +1080,11 @@ video {
   background-color: rgb(var(--info-default) / var(--tw-bg-opacity));
 }
 
+.bg-input-label-background {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
+}
+
 .bg-primary {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
@@ -975,6 +1119,26 @@ video {
   background-color: rgb(var(--warning-default) / var(--tw-bg-opacity));
 }
 
+.fill-error {
+  fill: rgb(var(--error-100) / 1);
+}
+
+.fill-input-stroke-active {
+  fill: rgb(var(--input-active-stroke-color) / 1);
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
 .p-5 {
   padding: 1.25rem;
 }
@@ -994,6 +1158,11 @@ video {
   padding-right: 1.5rem;
 }
 
+.px-\[2px\] {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1169,6 +1338,11 @@ video {
   letter-spacing: .02857em;
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-error {
   --tw-text-opacity: 1;
   color: rgb(var(--error-100) / var(--tw-text-opacity));
@@ -1194,6 +1368,16 @@ video {
   color: rgb(var(--info-foreground) / var(--tw-text-opacity));
 }
 
+.text-input-text {
+  --tw-text-opacity: 1;
+  color: rgb(var(--input-default-text-color) / var(--tw-text-opacity));
+}
+
+.text-input-text-disabled {
+  --tw-text-opacity: 1;
+  color: rgb(var(--input-disabled-text-color) / var(--tw-text-opacity));
+}
+
 .text-primary {
   --tw-text-opacity: 1;
   color: rgb(var(--primary-default) / var(--tw-text-opacity));
@@ -1261,10 +1445,46 @@ video {
   text-underline-offset: 4px;
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .outline {
   outline-style: solid;
 }
 
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.ring-error {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--error-100) / var(--tw-ring-opacity));
+}
+
+.ring-input-stroke {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--input-default-stroke-color) / var(--tw-ring-opacity));
+}
+
+.ring-input-stroke-disabled {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--input-disabled-stroke-color) / var(--tw-ring-opacity));
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1405,11 +1625,34 @@ video {
   font-weight: 400;
 }
 
+.placeholder\:text-input-text-disabled::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(var(--input-disabled-text-color) / var(--tw-text-opacity));
+}
+
+.placeholder\:text-input-text-disabled::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(var(--input-disabled-text-color) / var(--tw-text-opacity));
+}
+
+.placeholder\:text-transparent::-moz-placeholder {
+  color: transparent;
+}
+
+.placeholder\:text-transparent::placeholder {
+  color: transparent;
+}
+
 .hover\:border-error-120:hover {
   --tw-border-opacity: 1;
   border-color: rgb(var(--error-120) / var(--tw-border-opacity));
 }
 
+.hover\:border-input-stroke-active:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--input-active-stroke-color) / var(--tw-border-opacity));
+}
+
 .hover\:border-warning-100:hover {
   --tw-border-opacity: 1;
   border-color: rgb(var(--warning-100) / var(--tw-border-opacity));
@@ -1462,16 +1705,113 @@ video {
   --tw-bg-opacity: 0.9;
 }
 
+.hover\:fill-input-text:hover {
+  fill: rgb(var(--input-default-text-color) / 1);
+}
+
 .hover\:text-opacity-80:hover {
   --tw-text-opacity: 0.8;
 }
 
+.focus\:border-input-stroke:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--input-default-stroke-color) / var(--tw-border-opacity));
+}
+
+.focus\:pe-10:focus {
+  padding-inline-end: 2.5rem;
+}
+
+.focus\:pe-6:focus {
+  padding-inline-end: 1.5rem;
+}
+
+.focus\:pe-8:focus {
+  padding-inline-end: 2rem;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
 .active\:scale-\[98\%\]:active {
   --tw-scale-x: 98%;
   --tw-scale-y: 98%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.peer:focus ~ .peer-focus\:-top-1 {
+  top: -0.25rem;
+}
+
+.peer:focus ~ .peer-focus\:-top-1\.5 {
+  top: -0.375rem;
+}
+
+.peer:focus ~ .peer-focus\:flex {
+  display: flex;
+}
+
+.peer:focus ~ .peer-focus\:bg-input-label-background {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--input-label-background-color) / var(--tw-bg-opacity));
+}
+
+.peer:focus ~ .peer-focus\:text-input-text-active {
+  --tw-text-opacity: 1;
+  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
+}
+
+.peer:focus ~ .peer-focus\:typography-label1 {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
+.peer:focus ~ .peer-focus\:typography-label2 {
+  font-size: 10px;
+  line-height: 10px;
+  font-weight: 400;
+}
+
+.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:-top-1\.5 {
+  top: -0.375rem;
+}
+
+.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:-top-1\.5 {
+  top: -0.375rem;
+}
+
+.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label1 {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
+.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label1 {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
+.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label2 {
+  font-size: 10px;
+  line-height: 10px;
+  font-weight: 400;
+}
+
+.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label2 {
+  font-size: 10px;
+  line-height: 10px;
+  font-weight: 400;
+}
+
 .aria-disabled\:pointer-events-none[aria-disabled="true"] {
   pointer-events: none;
 }
@@ -1482,4 +1822,4 @@ video {
 
 .aria-disabled\:opacity-50[aria-disabled="true"] {
   opacity: 0.5;
-}
+}

package/dist/theme/global.css

@@ -128,9 +128,22 @@
     --error-default: var(--error-100);
     --error-foreground: var(--white);
 
-
+    /* Button */
     --btn-rounded-sm: 10px;
     --btn-rounded-md: 12px;
     --btn-rounded-lg: 16px;
+
+    /* Input */
+    --input-default-text-color: 164 169 178;
+    --input-default-stroke-color: 231 231 231;
+
+    --input-active-text-color: 29 30 39;
+    --input-active-stroke-color: 208 208 208;
+  
+    --input-disabled-text-color: 196 199 205;
+    --input-disabled-stroke-color: 239 239 239;
+    --input-disabled-background-color: 247 247 247;
+    
+    --input-label-background-color: 249 251 255;
   }
-}
+}

package/dist/theme/presets/colors.js

@@ -1,8 +1,11 @@
+const { DEFAULTS } = require("@rollup/plugin-node-resolve");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
       colors: {
+        // Palette colors
         themes: {
           50: "rgb(var(--themes-50) / <alpha-value>)",
           100: "rgb(var(--themes-100) / <alpha-value>)",
@@ -134,6 +137,29 @@ module.exports = {
           DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
           foreground: "rgb(var(--error-foreground) / <alpha-value>)",
         },
+        // Component color
+        input: {
+          text: {
+            DEFAULT: "rgb(var(--input-default-text-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-text-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-text-color) / <alpha-value>)",
+          },
+          stroke: {
+            DEFAULT: "rgb(var(--input-default-stroke-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-stroke-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-stroke-color) / <alpha-value>)",
+          },
+          background: {
+            DEFAULT: "transparent",
+            active: "transparent",
+            disabled:
+              "rgb(var(--input-disabled-background-color) / <alpha-value>)",
+          },
+          label: {
+            background:
+              "rgb(var(--input-label-background-color) / <alpha-value>)",
+          },
+        },
       },
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import TextInput from "./TextInput";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/TextInput",
+  component: TextInput,
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    label: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    fullwidth: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextInput id="1" placeholder="placeholder" size="lg" {...args} />
+        <TextInput id="2" placeholder="placeholder" size="md" {...args} />
+        <TextInput id="3" placeholder="placeholder" size="sm" {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;