@sikka/hawa 0.1.27 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -109,6 +109,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "class-variance-authority": "^0.7.0",

package/src/elements/HawaTextField.tsx

@@ -1,6 +1,6 @@
 import React, { FC, PropsWithRef } from "react"
-import clsx from "clsx"
 import { Label } from "./Label"
+import { cn } from "../util"
 
 // TODO: make icon based on direction
 // TODO: Preferebly use context to pass direction rtl | ltr
@@ -51,98 +51,40 @@ export const HawaTextField: FC<TextFieldTypes> = ({
     full: "w-full",
   }
 
-  let defaultStyle = "flex max-h-fit flex-col justify-center gap-2"
+  let defaultStyle = "flex max-h-fit flex-col justify-center gap-1"
   let defaultInputStyle =
-    "block w-full rounded border bg-background p-2 text-sm text-black dark:text-white focus:border-blue-500 focus:ring-blue-500"
+    "block w-full rounded border transition-all bg-background p-2 text-sm text-black dark:text-white focus:border-blue-500 focus:ring-blue-500"
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
 
   return (
-    <div
-      className={clsx(defaultStyle, marginStyles[margin], widthStyles[width])}
-    >
-      {props.label && (
-        // <label
-        //   // htmlFor="first_name"
-        //   className="mb-2 block text-sm font-medium "
-        // >
-        //   {props.label}
-        // </label>
-        <Label>{props.label}</Label>
-      )}
-      {preview ? (
-        <>
-          {props.multiline ? (
-            <textarea
-              id="message"
-              rows={4}
-              className={defaultInputStyle}
-              onChange={props.onChange}
-              type={props.type}
-              aria-label={props.label}
-              placeholder={props.placeholder}
-              defaultValue={props.defaultValue}
-              value={props.value}
-              {...props}
-            />
-          ) : (
-            <div className="relative">
-              {props.icon && (
-                <div className="absolute left-3 top-1/2 -translate-y-1/2">
-                  {props.icon}
-                </div>
-              )}
-              <input
-                {...props}
-                disabled={preview}
-                className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
-              />
-              {/* <div
-                // {...props}
-                className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
-              >
-                {props.value}
-              </div> */}
-            </div>
-          )}
-        </>
-      ) : (
-        <>
-          {props.multiline ? (
-            <textarea
-              id="message"
-              rows={4}
-              className={defaultInputStyle}
-              onChange={props.onChange}
-              type={props.type}
-              aria-label={props.label}
-              placeholder={props.placeholder}
-              defaultValue={props.defaultValue}
-              value={props.value}
-              {...props}
-            />
-          ) : (
-            <div className="relative">
-              {props.icon && (
-                <div className="absolute left-3 top-1/2 -translate-y-1/2">
-                  {props.icon}
-                </div>
-              )}
-              <input
-                {...props}
-                className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
-              />
+    <div className={cn(defaultStyle, marginStyles[margin], widthStyles[width])}>
+      {props.label && <Label>{props.label}</Label>}
+      <>
+        <div className="relative">
+          {props.icon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2">
+              {props.icon}
             </div>
           )}
+          <input
+            {...props}
+            className={cn(
+              defaultInputStyle,
+              props.icon && "pl-10",
+              preview && "border-transparent px-0"
+            )}
+            disabled={preview}
+          />
+        </div>
 
-          {props.helpertext ? (
-            <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
-              {props.helpertext}
-            </p>
-          ) : null}
-        </>
-      )}
+        {props.helpertext ? (
+          <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
+            {props.helpertext}
+          </p>
+        ) : null}
+      </>
     </div>
   )
 }

package/src/elements/Input.tsx

@@ -3,17 +3,22 @@ import * as React from "react"
 import { cn } from "../util"
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  preview?: boolean
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, preview, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
+          preview &&
+            "  disabled:cursor-default disabled:opacity-100 border-opacity-25 "
         )}
+        disabled={preview}
         ref={ref}
         {...props}
       />

package/src/elements/Separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "../util"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/src/elements/Tabs.tsx

@@ -52,7 +52,7 @@ const TabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        "flex w-fit flex-wrap items-center justify-start gap-1  rounded bg-muted p-1  text-muted-foreground ",
+        "flex w-fit flex-wrap items-center justify-start gap-1 rounded  border bg-muted p-1  text-muted-foreground ",
         orientation === "horizontal" ? "flex-col" : "flex-row",
         className
       )}

package/src/elements/Textarea.tsx

@@ -1,21 +1,27 @@
 import * as React from "react"
 
 import { cn } from "../util"
+import { Label } from "./Label"
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, label, ...props }, ref) => {
     return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
+      <>
+        {label && <Label htmlFor={props.id}>{label}</Label>}
+        <textarea
+          className={cn(
+            "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      </>
     )
   }
 )

package/src/elements/index.ts

@@ -65,3 +65,5 @@ export * from "./InterfaceSettings"
 export * from "./DropdownMenu"
 export * from "./Popover"
 export * from "./Tabs"
+export * from "./Textarea"
+export * from "./Separator"

package/src/styles.css

@@ -887,6 +887,9 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-0 {
   margin-left: 0px;
 }
@@ -959,6 +962,9 @@ video {
 .mt-1\.5 {
   margin-top: 0.375rem;
 }
+.mt-10 {
+  margin-top: 2.5rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -1235,6 +1241,9 @@ video {
 .w-\[190px\] {
   width: 190px;
 }
+.w-\[1px\] {
+  width: 1px;
+}
 .w-\[25px\] {
   width: 25px;
 }
@@ -1548,9 +1557,6 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.gap-9 {
-  gap: 2.25rem;
-}
 .gap-\[2px\] {
   gap: 2px;
 }
@@ -1859,6 +1865,9 @@ video {
 .border-b-primary {
   border-bottom-color: hsl(var(--primary));
 }
+.border-opacity-25 {
+  --tw-border-opacity: 0.25;
+}
 .bg-background {
   background-color: hsl(var(--background));
 }
@@ -1890,6 +1899,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
+.bg-border {
+  background-color: hsl(var(--border));
+}
 .bg-buttonPrimary-500 {
   background-color: hsl(var(--button-primary-500));
 }
@@ -2111,6 +2123,10 @@ video {
 .p-\[5px\] {
   padding: 5px;
 }
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -3149,6 +3165,9 @@ body {
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
+.disabled\:cursor-default:disabled {
+  cursor: default;
+}
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -3156,6 +3175,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.disabled\:opacity-100:disabled {
+  opacity: 1;
+}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }