@sikka/hawa 0.1.26 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "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/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC } from "react"
-import { HawaTabs } from "../../elements"
+import { HawaRadio } from "../../elements"
 import { Tooltip } from "../../elements/Tooltip"
 
 const CheckMark = () => (
@@ -65,29 +65,23 @@ type ComparingPlansTypes = {
   direction?: "rtl" | "ltr"
 }
 export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState("SAR")
+  const [currentCurrency, setCurrentCurrency] = useState("sar")
   const [currentCycle, setCurrentCycle] = useState("month")
 
   return (
     <div id="detailed-pricing" className="w-full overflow-x-auto">
       <div className="mb-2 flex w-full justify-between">
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={currentCycle}
           options={props.billingCycles}
-          onChangeTab={(e: any) => {
-            // setCurrentCycle(e.label)
-            props.onCycleChange(e)
-          }}
+          onChangeTab={(e: any) => props.onCycleChange(e)}
         />
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={currentCurrency}
           options={props.currencies}
-          onChangeTab={(e: any) => {
-            // setCurrentCurrency(e.label)
-            props.onCurrencyChange(e)
-          }}
+          onChangeTab={(e: any) => props.onCurrencyChange(e)}
         />
       </div>
       <div className=" overflow-hidden rounded">

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { HawaPricingCard, HawaTabs } from "../../elements"
+import { HawaPricingCard, HawaRadio } from "../../elements"
 
 type PricingPlansTypes = {
   plans: [
@@ -46,14 +46,14 @@ export const PricingPlans: FC<PricingPlansTypes> = (props) => {
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={props.currentCycle}
           options={props.billingCycles}
           onChangeTab={(e: any) => props.onCycleChange(e)}
         />
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={props.currentCurrency}
           options={props.currencies}
           onChangeTab={(e: any) => props.onCurrencyChange(e)}

package/src/elements/HawaTabs.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC } from "react"
-import clsx from "clsx"
+import { cn } from "../util"
 
 // TODO: fix wrapping issue when small screen
 
@@ -62,13 +62,13 @@ export const HawaTabs: FC<TabsTypes> = ({
   return (
     <div
       dir={direction}
-      className={clsx(
+      className={cn(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
       )}
     >
       <ul
-        className={clsx(
+        className={cn(
           "w-full border-primary",
           marginBetween
             ? orientation === "vertical"
@@ -98,35 +98,33 @@ export const HawaTabs: FC<TabsTypes> = ({
         )}
       >
         {props.options?.map((opt: any, o) => (
-          <li key={o}>
-            <button
-              aria-current="page"
-              onClick={() => {
-                setSelectedOption(opt.value)
-                props?.onChangeTab(opt)
-              }}
-              className={clsx(
-                "flex flex-row items-center gap-2 ",
-                opt.value === selectedOption
-                  ? // props.options[selectedOption].value === opt.value
-                    [
-                      activeTabStyle[orientation],
-                      direction === "rtl" ? "rounded-r" : "rounded-l",
-                    ]
-                  : inactiveTabStyle[orientation],
-                "w-full  transition-all",
-                pill
-                  ? "rounded"
-                  : orientation === "vertical"
-                  ? "rounded rounded-bl-none rounded-tl-none"
-                  : "rounded sm:rounded-b-none"
-                // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
-              )}
-            >
-              {opt.icon}
-              {opt.label}
-            </button>
-          </li>
+          <button
+            key={o}
+            aria-current="page"
+            onClick={() => {
+              setSelectedOption(opt.value)
+              props?.onChangeTab(opt)
+            }}
+            className={cn(
+              opt.value === selectedOption
+                ? // props.options[selectedOption].value === opt.value
+                  [
+                    activeTabStyle[orientation],
+                    direction === "rtl" ? "rounded-r" : "rounded-l",
+                  ]
+                : inactiveTabStyle[orientation],
+              pill
+                ? "rounded"
+                : orientation === "vertical"
+                ? "rounded rounded-bl-none rounded-tl-none"
+                : "rounded sm:rounded-b-none",
+              // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
+              "flex w-fit flex-row items-center gap-2  transition-all "
+            )}
+          >
+            {opt.icon}
+            {opt.label}
+          </button>
         ))}
       </ul>
 
@@ -134,7 +132,7 @@ export const HawaTabs: FC<TabsTypes> = ({
         {props.options.map((tab, i) => (
           <div
             key={i}
-            className={clsx(selectedOption === tab.value ? "" : "hidden")}
+            className={cn(selectedOption === tab.value ? "" : "hidden")}
           >
             {tab.content}
           </div>

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

@@ -3,36 +3,80 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "../util"
 
-const Tabs = TabsPrimitive.Root
+const TabsContext = React.createContext<{
+  orientation?: "vertical" | "horizontal"
+}>({
+  orientation: "vertical", // default value
+})
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
+// const Tabs = TabsPrimitive.Root
+type TabsRootProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Root
+> & {
+  orientation?: "vertical" | "horizontal"
+}
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsRootProps
+>(({ className, orientation, ...props }, ref) => (
+  <TabsPrimitive.Root
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
+      "flex gap-2",
+      orientation === "horizontal" ? "flex-row" : "flex-col"
     )}
     {...props}
-  />
+  >
+    <TabsContext.Provider value={{ orientation }}>
+      {props.children}
+    </TabsContext.Provider>
+  </TabsPrimitive.Root>
 ))
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+// type TabsListProps = React.ComponentPropsWithoutRef<
+//   typeof TabsPrimitive.List
+// > & {
+//   //   orientation?: "vertical" | "horizontal"
+// }
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => {
+  const { orientation } = React.useContext(TabsContext)
+
+  return (
+    <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 ",
+        orientation === "horizontal" ? "flex-col" : "flex-row",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TabsList.displayName = TabsPrimitive.List.displayName
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex select-none items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "inline-flex w-full flex-1 select-none items-center justify-center whitespace-nowrap rounded border px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm ",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
 const TabsContent = React.forwardRef<
@@ -42,7 +86,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "w-full ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}

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

@@ -1235,6 +1235,9 @@ video {
 .w-\[190px\] {
   width: 190px;
 }
+.w-\[1px\] {
+  width: 1px;
+}
 .w-\[25px\] {
   width: 25px;
 }
@@ -1548,9 +1551,6 @@ video {
 .gap-8 {
   gap: 2rem;
 }
-.gap-9 {
-  gap: 2.25rem;
-}
 .gap-\[2px\] {
   gap: 2px;
 }
@@ -1859,6 +1859,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 +1893,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 +2117,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 +3159,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 +3169,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;
 }