aural-ui 2.0.1 → 2.0.3

package/dist/components/button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { Button } from "."
@@ -79,3 +80,45 @@ export const Disabled: Story = {
     variant: "primary",
   },
 }
+
+export const WithToolTip: Story = {
+  render: () => (
+    <div className="flex gap-6 rounded p-8">
+      <Button
+        tooltip="Primary Variant"
+        tooltipContentProps={{
+          align: "center",
+          side: "top",
+          sideOffset: 10,
+        }}
+      >
+        Primary
+      </Button>
+      <Button
+        variant="secondary"
+        tooltip="Secondary Variant"
+        tooltipContentProps={{
+          align: "center",
+          side: "bottom",
+          sideOffset: 10,
+        }}
+      >
+        Secondary
+      </Button>
+      <Button
+        variant="outline"
+        tooltip="Outline Variant"
+        tooltipContentProps={{
+          align: "center",
+          side: "top",
+          sideOffset: 10,
+        }}
+      >
+        Outline
+      </Button>
+      <Button variant="text" tooltip="Text Variant">
+        Text
+      </Button>
+    </div>
+  ),
+}

package/dist/components/button/index.tsx

@@ -3,6 +3,8 @@ import { FeatureShineIcon } from "@icons/feature-shine-icon"
 import { cn } from "@lib/utils"
 import { cva } from "class-variance-authority"
 
+import { withTooltip } from "../tooltip"
+
 export const buttonVariants = cva(
   "group relative font-fm-brand focus-visible:ring-fm-primary focus-visible:ring-offset-fm-contrast outline-none focus-visible:ring-2 focus-visible:ring-offset-6",
   {
@@ -68,8 +70,8 @@ export const innerButtonVariants = cva(
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode
   className?: string
-  leftIcon?: React.ReactNode | boolean
-  rightIcon?: React.ReactNode | boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
   iconProps?: React.SVGProps<SVGSVGElement>
   innerClassName?: string
   isDisabled?: boolean
@@ -77,7 +79,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "outline" | "text"
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+export const RawButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       variant = "primary",
@@ -99,7 +101,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ? "var(--color-fm-secondary-800)"
         : "var(--color-fm-primary)"
 
-    const renderIcon = (icon: React.ReactNode | boolean) => {
+    const renderIcon = (icon: React.ReactNode) => {
       if (!icon) {
         return null
       }
@@ -156,3 +158,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     )
   }
 )
+
+RawButton.displayName = "RawButton"
+
+export const Button = withTooltip(RawButton)

package/dist/components/chip/index.tsx

@@ -9,9 +9,9 @@ export interface ChipProps
   /** Sets the chip to selected state */
   selected?: boolean
   /** Icon to display on the left side (overrides icon prop for left side) */
-  leftIcon?: ReactNode | boolean
+  leftIcon?: ReactNode
   /** Icon to display on the right side (overrides icon prop for right side) */
-  rightIcon?: ReactNode | boolean
+  rightIcon?: ReactNode
   /** Icon properties for the left and right icons */
   iconProps?: React.SVGProps<SVGSVGElement>
   /** Callback fired when the chip is selected */
@@ -43,7 +43,7 @@ export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
       }
     }
 
-    const renderIcon = (icon: React.ReactNode | boolean) => {
+    const renderIcon = (icon: React.ReactNode) => {
       if (!icon) {
         return null
       }

package/dist/components/dropdown/index.tsx

@@ -227,7 +227,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         // Base styles
-        "rounded-fm-s relative flex cursor-default items-center gap-2 px-4 py-3 pl-8",
+        "rounded-fm-s relative flex cursor-default items-center gap-2 px-4 py-3",
         "text-fm-primary font-fm-text leading-fm-lg [font-size:var(--text-fm-lg)] tracking-wide",
         "transition-colors duration-200 outline-none select-none",
         // Hover and focus states
@@ -245,12 +245,7 @@ function DropdownMenuRadioItem({
     >
       <span className="pointer-events-none absolute left-4 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <TickIcon
-            className={cn(
-              "text-fm-icon-active size-2 fill-current",
-              classes?.indicator
-            )}
-          />
+          <TickIcon className={cn("text-fm-icon-active", classes?.indicator)} />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}

package/dist/components/icon-button/IconButton.stories.tsx

@@ -4,6 +4,8 @@ import { FeatureShineIcon } from "@icons/feature-shine-icon"
 import { SearchIcon } from "@icons/search-icon"
 import { type Meta, type StoryObj } from "@storybook/react"
 
+import { NotepadIcon } from "src/ui/icons"
+
 import { IconButton } from "."
 
 const meta: Meta<typeof IconButton> = {
@@ -133,6 +135,52 @@ export const WithoutBackground: Story = {
   ),
 }
 
+export const WithToolTip: Story = {
+  render: () => (
+    <div className="bg-fm-neutral-0 flex flex-col space-y-6 rounded p-8">
+      <h2 className="text-fm-yellow-500 text-sm font-bold">
+        With ToolTip EXAMPLES
+      </h2>
+
+      <div className="flex space-x-4">
+        <IconButton
+          variant="background"
+          icon={<SearchIcon />}
+          label="Search"
+          onClick={() => alert("Search clicked")}
+          tooltip="Search Items"
+          tooltipContentProps={{
+            align: "center",
+            side: "bottom",
+          }}
+        />
+        <IconButton
+          variant="ghost"
+          icon={<CrossIcon />}
+          label="Close"
+          onClick={() => alert("Close clicked")}
+          tooltip="Cancel"
+          tooltipContentProps={{
+            align: "center",
+            side: "bottom",
+          }}
+        />
+        <IconButton
+          variant="outlined"
+          icon={<NotepadIcon />}
+          label="Add"
+          onClick={() => alert("Add clicked")}
+          tooltip="Notes"
+          tooltipContentProps={{
+            align: "center",
+            side: "bottom",
+          }}
+        />
+      </div>
+    </div>
+  ),
+}
+
 export const Outlined: Story = {
   args: {
     label: "Search",

package/dist/components/icon-button/index.tsx

@@ -3,6 +3,8 @@ import { cn } from "@lib/utils"
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
 import { cva, type VariantProps } from "class-variance-authority"
 
+import { withTooltip } from "../tooltip"
+
 // Define variants with class-variance-authority
 const iconButtonVariants = cva(
   // Base styles for all icon buttons
@@ -65,7 +67,7 @@ export interface IconButtonProps
   className?: string
 }
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+const IconButtonComp = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
     {
       className,
@@ -125,6 +127,8 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   }
 )
 
-IconButton.displayName = "IconButton"
+const IconButton = withTooltip(IconButtonComp)
+
+IconButtonComp.displayName = "IconButton"
 
 export { IconButton, iconButtonVariants }

package/dist/components/input/index.tsx

@@ -83,6 +83,7 @@ type InputProps = {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
   onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
   startIcon?: ReactNode
   endIcon?: ReactNode
   id?: string
@@ -223,6 +224,7 @@ const InputBase = forwardRef<
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
     id?: string
     name?: string
     required?: boolean
@@ -337,6 +339,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       onChange,
       onBlur,
       onFocus,
+      onKeyDown,
       startIcon,
       endIcon,
       id,
@@ -418,6 +421,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             onChange={handleChange}
             onFocus={onFocus}
             onBlur={onBlur}
+            onKeyDown={onKeyDown}
             required={required}
             maxLength={maxLength}
             startIcon={!!startIcon}

package/dist/components/overlay/index.tsx

@@ -35,19 +35,36 @@ const overlayVariants = cva(
 
 export interface OverlayProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof overlayVariants> {}
+    VariantProps<typeof overlayVariants> {
+  classes?: {
+    content?: string
+    root?: string
+    wrapper?: string
+  }
+}
 
 const Overlay = React.forwardRef<HTMLDivElement, OverlayProps>(
-  ({ opacity, glass, noise, className, children, ...props }, ref) => (
+  ({ opacity, glass, noise, className, children, classes, ...props }, ref) => (
     <>
       <div
         ref={ref}
-        className={cn(overlayVariants({ opacity, glass, noise }), className)}
+        className={cn(
+          overlayVariants({ opacity, glass, noise }),
+          className,
+          classes?.root
+        )}
         {...props}
       />
       {children && (
-        <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center">
-          <div className="pointer-events-auto">{children}</div>
+        <div
+          className={cn(
+            "pointer-events-none fixed inset-0 z-50 flex items-center justify-center",
+            classes?.wrapper
+          )}
+        >
+          <div className={cn("pointer-events-auto", classes?.content)}>
+            {children}
+          </div>
         </div>
       )}
     </>

package/dist/components/sheet/index.tsx

@@ -301,7 +301,9 @@ const closeIconVariants = cva(
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants>,
-    ISheetOverlay {}
+    ISheetOverlay {
+  container: HTMLElement | null
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -317,11 +319,12 @@ const SheetContent = React.forwardRef<
       noise,
       children,
       classes,
+      container,
       ...props
     },
     ref
   ) => (
-    <SheetPortal>
+    <SheetPortal container={container}>
       <SheetOverlay
         opacity={opacity}
         glass={glass}

package/dist/components/tag/index.tsx

@@ -20,8 +20,8 @@ interface TagProps {
   emphasis?: "primary" | "secondary" | "tertiary"
   className?: string
   size?: "xs" | "sm" | "md"
-  leftIcon?: React.ReactNode | boolean
-  rightIcon?: React.ReactNode | boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
   children: React.ReactNode
   iconProps?: React.SVGProps<SVGSVGElement>
   id?: string

package/dist/components/textarea/index.tsx

@@ -30,6 +30,8 @@ interface TextAreaBaseProps {
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+  onInput?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   id?: string
   name?: string
   required?: boolean

package/dist/components/tooltip/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from "react"
 import { cn } from "@lib/utils"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
@@ -301,4 +302,48 @@ function TooltipContent({
   )
 }
 
+export function withTooltip<
+  T extends
+    | keyof React.JSX.IntrinsicElements
+    | React.ForwardRefExoticComponent<any>,
+>(Component: T) {
+  return React.forwardRef<
+    React.ElementRef<T>,
+    {
+      tooltip?: React.ReactNode
+      tooltipContentProps?: Omit<
+        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+        "children"
+      >
+      tooltipProps?: Omit<
+        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+        "children"
+      >
+    } & React.ComponentPropsWithoutRef<T>
+  >(function ExtendComponent(
+    { tooltip, tooltipContentProps, tooltipProps, ...props },
+    ref
+  ) {
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+      setMounted(true)
+    }, [])
+
+    const component = <Component ref={ref} {...(props as any)} />
+
+    if (tooltip && mounted) {
+      return (
+        <Tooltip delayDuration={200} {...tooltipProps}>
+          <TooltipTrigger asChild>{component}</TooltipTrigger>
+
+          <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
+        </Tooltip>
+      )
+    }
+
+    return component
+  })
+}
+
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/dist/hooks/index.ts

@@ -1,3 +1,4 @@
 // Export all hooks from a single entry point
 export * from "./use-previous"
 export * from "./use-standalone-pagination"
+export * from "./use-change-state"