@rovula/ui 0.0.6 → 0.0.8

package/dist/src/theme/global.css

@@ -854,6 +854,10 @@ video {
   margin-top: 6px;
 }
 
+.box-border {
+  box-sizing: border-box;
+}
+
 .block {
   display: block;
 }
@@ -901,6 +905,10 @@ video {
   width: 400px;
 }
 
+.w-auto {
+  width: auto;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1730,9 +1738,9 @@ video {
   padding-inline-end: 2rem;
 }
 
-.focus\:ring-2:focus {
+.focus\:ring-1: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);
+  --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);
 }
 
@@ -1740,73 +1748,111 @@ video {
   --tw-ring-inset: inset;
 }
 
+.focus\:ring-error:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--error-100) / var(--tw-ring-opacity));
+}
+
+.focus\:ring-input-stroke-active:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--input-active-stroke-color) / var(--tw-ring-opacity));
+}
+
 .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:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
+  top: 0.5rem;
 }
 
-.peer:focus ~ .peer-focus\:-top-1\.5 {
-  top: -0.375rem;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:top-2 {
+  top: 0.5rem;
 }
 
-.peer:focus ~ .peer-focus\:flex {
-  display: flex;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-4 {
+  top: 1rem;
 }
 
-.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:placeholder-shown ~ .peer-placeholder-shown\:top-4 {
+  top: 1rem;
 }
 
-.peer:focus ~ .peer-focus\:text-input-text-active {
-  --tw-text-opacity: 1;
-  color: rgb(var(--input-active-text-color) / var(--tw-text-opacity));
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
+  background-color: transparent;
 }
 
-.peer:focus ~ .peer-focus\:typography-label1 {
-  font-size: 12px;
-  line-height: 12px;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
+  background-color: transparent;
+}
+
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 400;
 }
 
-.peer:focus ~ .peer-focus\:typography-label2 {
-  font-size: 10px;
-  line-height: 10px;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 400;
 }
 
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:-top-1\.5 {
-  top: -0.375rem;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
 }
 
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:-top-1\.5 {
-  top: -0.375rem;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
 }
 
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label1 {
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-small1 {
   font-size: 12px;
-  line-height: 12px;
+  line-height: 14px;
   font-weight: 400;
 }
 
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label1 {
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-small1 {
   font-size: 12px;
-  line-height: 12px;
+  line-height: 14px;
   font-weight: 400;
 }
 
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label2 {
-  font-size: 10px;
-  line-height: 10px;
+.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:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label2 {
+.peer:focus ~ .peer-focus\:typography-label2 {
   font-size: 10px;
   line-height: 10px;
   font-weight: 400;

package/package.json

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

package/src/components/Select/Select copy.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+
+import { labelVariant, selectVariant } from "./Select.styles";
+import { helperTextVariant } from "../TextInput/TextInput.styles";
+import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
+import { twMerge } from "tailwind-merge";
+import TextInput from "../TextInput/TextInput";
+
+type Options = {
+  value: string;
+  label: string;
+};
+
+type SelectProps = {
+  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;
+  className?: string;
+  options: Options[];
+} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size">;
+
+const Select = ({
+  id,
+  options,
+  label,
+  size = "md",
+  rounded = "normal",
+  variant = "outline",
+  type = "text",
+  helperText,
+  errorMessage,
+  fullwidth = true,
+  disabled = false,
+  error = false,
+  required = true,
+  ...props
+}: SelectProps) => {
+  const _id = id || `${type}-${label}-select`;
+
+  const [isPlaceholderShown, setIsPlaceholderShown] = useState(true);
+
+  return (
+    <div className={`relative ${fullwidth ? "w-full" : "w-auto"}`}>
+      <select
+        id={_id}
+        {...props}
+        className={twMerge(
+          selectVariant({
+            size,
+            variant,
+            rounded,
+            fullwidth,
+            disabled,
+            error,
+          }),
+          props.className
+        )}
+        disabled={disabled}
+      >
+        <option
+          value=""
+          disabled
+          selected={true}
+          className="hidden select-placeholder"
+        ></option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {label && (
+        <label
+          className={labelVariant({ size, isPlaceholderShown })}
+          htmlFor="select"
+        >
+          {label} {required && <span className="text-error">*</span>}
+        </label>
+      )}
+      {(errorMessage || helperText) && (
+        <span className={helperTextVariant({ size, error, disabled })}>
+          <ExclamationCircleIcon
+            width={16}
+            height={16}
+            className={error ? "fill-error" : ""}
+          />{" "}
+          {errorMessage || helperText}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Select;

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Select from "./Select";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+  title: "Components/Select",
+  component: Select,
+  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 Select>;
+
+export default meta;
+
+const options = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+  { value: "option4", label: "Option 4" },
+];
+
+export const Default = {
+  args: {
+    label: "Choose an option:",
+    // value: "",
+    fullwidth: true,
+    options,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Select id="1" size="lg" options={options} {...args} />
+        <Select id="2" size="md" options={options} {...args} />
+        <Select id="3" size="sm" options={options} {...args} />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Select/Select.styles.ts

@@ -0,0 +1,111 @@
+import React from "react";
+import { cva } from "class-variance-authority";
+
+export const selectVariant = cva(
+  [
+    "border-0 outline-none",
+    "p-1 flex w-auto box-border",
+    "peer text-black placeholder:text-transparent",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 px-3 typography-small1",
+        md: "py-2 px-3 typography-subtitile4",
+        lg: "p-4 typography-subtitile1",
+      },
+      rounded: {
+        none: "rounded-none",
+        normal: "rounded-xl",
+        full: "rounded-full",
+      },
+      variant: {
+        flat: "",
+        outline:
+          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
+        underline:
+          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error focus:ring-error",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "outline",
+      rounded: "normal",
+      fullwidth: false,
+      disabled: false,
+      error: false,
+    },
+  }
+);
+
+export const labelVariant = cva(
+  [
+    "absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "left-3 -top-1.5 bg-input-label-background",
+          "peer-focus:-top-1.5 peer-focus:typography-label2",
+        ],
+        md: [
+          "left-3 -top-1.5 bg-input-label-background",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+        ],
+        lg: [
+          "left-4 -top-1.5 bg-input-label-background",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
+          // "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+        ],
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error",
+      },
+      isPlaceholderShown: {
+        // true: "",
+        false: "typography-label1",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        isPlaceholderShown: false,
+        className: "typography-label2",
+      },
+      {
+        isPlaceholderShown: true,
+        size: "sm",
+        className: "top-2 typography-small1 bg-transparent",
+      },
+      {
+        isPlaceholderShown: true,
+        size: "md",
+        className: "top-2 typography-subtitile4 bg-transparent",
+      },
+      {
+        isPlaceholderShown: true,
+        size: "lg",
+        className: "top-4 typography-subtitile1 bg-transparent",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+      isPlaceholderShown: false,
+    },
+  }
+);

package/src/components/Select/Select.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+import TextInput from "../TextInput/TextInput";
+
+type Options = {
+  value: string;
+  label: string;
+};
+
+type SelectProps = {
+  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;
+  className?: string;
+  options: Options[];
+} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size">;
+
+const Select = ({
+  id,
+  options,
+  label,
+  size = "md",
+  rounded = "normal",
+  variant = "outline",
+  type = "text",
+  helperText,
+  errorMessage,
+  fullwidth = true,
+  disabled = false,
+  error = false,
+  required = true,
+  ...props
+}: SelectProps) => {
+  const _id = id || `${type}-${label}-select`;
+
+  const [isPlaceholderShown, setIsPlaceholderShown] = useState(true);
+
+  return (
+    <div className={`relative ${fullwidth ? "w-full" : "w-auto"}`}>
+      <TextInput label="Test" />
+    </div>
+  );
+};
+
+export default Select;

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

@@ -35,9 +35,9 @@ export const Default = {
     };
     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} />
+        <TextInput id="1" size="lg" {...args} />
+        <TextInput id="2" size="md" {...args} />
+        <TextInput id="3" size="sm" {...args} />
       </div>
     );
   },

package/src/components/TextInput/TextInput.styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 export const inputVariant = cva(
   [
     "border-0 outline-none",
-    "p-1 flex",
+    "p-1 flex w-auto box-border",
     "peer text-black placeholder:text-transparent",
   ],
   {
@@ -21,7 +21,7 @@ export const inputVariant = cva(
       variant: {
         flat: "",
         outline:
-          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",
+          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
         underline:
           "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
       },
@@ -32,7 +32,7 @@ export const inputVariant = cva(
         true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
       },
       error: {
-        true: "ring-error",
+        true: "ring-error focus:ring-error",
       },
       hasClearIcon: {
         true: "",
@@ -73,22 +73,25 @@ export const inputVariant = cva(
 
 export const labelVariant = cva(
   [
-    "absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+    "absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
   ],
   {
     variants: {
       size: {
         sm: [
-          "left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2",
-          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2",
+          "left-3 -top-1.5 typography-label2 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label2",
         ],
         md: [
-          "left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1",
-          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+          "left-3 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
         lg: [
-          "left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1",
-          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+          "left-4 -top-1.5 typography-label1 bg-input-label-background",
+          "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+          "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
       disabled: {
@@ -97,22 +100,11 @@ export const labelVariant = cva(
       error: {
         true: "ring-error",
       },
-      isFloating: {
-        true: "-top-1.5 typography-label1 bg-input-label-background",
-      },
     },
-    compoundVariants: [
-      {
-        size: "sm",
-        isFloating: true,
-        class: "-top-1.5 typography-label2 bg-input-label-background",
-      },
-    ],
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
-      isFloating: false,
     },
   }
 );

package/src/components/TextInput/TextInput.tsx

@@ -37,7 +37,7 @@ const TextInput: FC<InputProps> = forwardRef(
       type = "text",
       helperText,
       errorMessage,
-      fullwidth = false,
+      fullwidth = true,
       disabled = false,
       error = false,
       required = true,
@@ -61,7 +61,6 @@ const TextInput: FC<InputProps> = forwardRef(
       size,
       disabled,
       error,
-      isFloating: !!props.value ?? false,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
@@ -78,10 +77,11 @@ const TextInput: FC<InputProps> = forwardRef(
     };
 
     return (
-      <div className={`flex flex-col ${fullwidth ? "w-full" : ""}`}>
+      <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
           <input
             {...props}
+            placeholder=" "
             ref={inputRef}
             type={type}
             id={_id}

package/src/index.ts

@@ -3,9 +3,10 @@
 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";
+export { default as Select } from "./components/Select/Select";
 
 // UTILS
 export {