@rovula/ui 0.0.17 → 0.0.18

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/utils/cn";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popup-background p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

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

@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import TextInput from "./TextInput";
+import { CalendarIcon } from "@heroicons/react/16/solid";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -87,3 +88,38 @@ export const CustomLabel = {
     );
   },
 } satisfies StoryObj;
+
+export const FuctionInput = {
+  args: {
+    label: "Placeholder Text",
+    disabled: false,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextInput
+          id="1"
+          size="lg"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+        <TextInput
+          id="2"
+          size="md"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+        <TextInput
+          id="3"
+          size="sm"
+          {...args}
+          endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

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

@@ -37,6 +37,9 @@ export const inputVariant = cva(
       hasClearIcon: {
         true: "",
       },
+      rightSectionIcon: {
+        false: "",
+      },
     },
     compoundVariants: [
       {
@@ -58,6 +61,21 @@ export const inputVariant = cva(
         size: "lg",
         class: "focus:pe-10",
       },
+      {
+        rightSectionIcon: true,
+        size: "sm",
+        class: "pe-[38px]",
+      },
+      {
+        rightSectionIcon: true,
+        size: "md",
+        class: "pe-[46px]",
+      },
+      {
+        rightSectionIcon: true,
+        size: "lg",
+        class: "pe-[72px]",
+      },
     ],
     defaultVariants: {
       size: "md",
@@ -67,6 +85,7 @@ export const inputVariant = cva(
       disabled: false,
       error: false,
       hasClearIcon: false,
+      rightSectionIcon: false,
     },
   }
 );
@@ -167,3 +186,29 @@ export const iconVariant = cva(
     },
   }
 );
+
+export const sectionIconWrapperVariant = cva(
+  [
+    "absolute inset-y-0 right-0 items-center justify-center flex",
+    "border-l border-l-input-stroke peer-hover:border-l-input-active peer-focus:border-l-input-stroke-active peer-disabled:border-l-input-stroke-disabled",
+    "fill-input-text peer-hover:fill-input-text-active peer-focus:fill-input-text-active",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-1 size-[30px]",
+        md: "p-2 size-[38px]",
+        lg: "p-3 size-14",
+      },
+      rounded: {
+        none: "rounded-r-none",
+        normal: "rounded-r-xl",
+        full: "rounded-r-full",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      rounded: "normal",
+    },
+  }
+);

package/src/components/TextInput/TextInput.tsx

@@ -11,6 +11,7 @@ import {
   iconWrapperVariant,
   inputVariant,
   labelVariant,
+  sectionIconWrapperVariant,
 } from "./TextInput.styles";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -58,6 +59,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
+    const hasRightSectionIcon = !!endIcon;
     const inputClassname = inputVariant({
       size,
       rounded,
@@ -65,7 +67,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       fullwidth,
       disabled,
       error,
-      hasClearIcon,
+      hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
+      rightSectionIcon: hasRightSectionIcon,
     });
     const labelClassname = labelVariant({
       size,
@@ -75,6 +78,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
+    const sectionIconWrapperClassname = sectionIconWrapperVariant({
+      size,
+      rounded,
+    });
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
@@ -96,7 +103,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             disabled={disabled}
             className={cn(inputClassname, props.className)}
           />
-          {hasClearIcon && (
+          {hasClearIcon && !hasRightSectionIcon && (
             <div className={iconWrapperClassname}>
               <XCircleIcon
                 type="button"
@@ -105,7 +112,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
           )}
-          {endIcon}
+          {hasRightSectionIcon && (
+            <div className={sectionIconWrapperClassname}>{endIcon}</div>
+          )}
+
           <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
             {label} {required && <span className="text-error">*</span>}
           </label>

package/src/index.ts

@@ -13,6 +13,13 @@ export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
+export { Calendar } from "./components/Calendar";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "./components/Popover/Popover";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";