aural-ui 2.0.0

package/dist/components/input/index.tsx

@@ -0,0 +1,487 @@
+import React, {
+  forwardRef,
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+  useState,
+} from "react"
+import CharCount from "@components/char-count"
+import HelperText from "@components/helper-text"
+import { Else, If, IfElse } from "@components/if-else"
+import { Label } from "@components/label"
+import { EyeCloseIcon } from "@icons/eye-close-icon"
+import { EyeOpenIcon } from "@icons/eye-open-icon"
+import { cn } from "@lib/utils"
+import { cva } from "class-variance-authority"
+
+interface InputComponent
+  extends ForwardRefExoticComponent<
+    InputProps & RefAttributes<HTMLInputElement>
+  > {
+  Root: typeof InputRoot
+  Label: typeof InputLabel
+  Wrapper: typeof InputWrapper
+  StartIcon: typeof StartIcon
+  EndIcon: typeof EndIcon
+  PasswordToggle: typeof PasswordToggle
+  Base: typeof InputBase
+  HelperText: typeof HelperText
+  CharCount: typeof CharCount
+}
+
+// CVA for input variants
+export const inputVariants = cva(
+  // Base styles
+  "block w-full focus:outline-none transition-all duration-200 border-solid tracking-wide placeholder:text-fm-placeholder font-fm-text text-fm-primary",
+  {
+    variants: {
+      variant: {
+        default: "border-fm-divider-primary focus:border-fm-divider-contrast ",
+        error: "border-fm-divider-negative focus:border-fm-divider-negative",
+        warning: "border-fm-divider-warning focus:border-fm-divider-warning",
+        success: "border-fm-divider-positive focus:border-fm-divider-positive",
+      },
+      decoration: {
+        underline: "border-b h-11 leading-fm-xl [font-size:var(--text-fm-xl)]",
+        outline:
+          "border rounded-fm-s h-12 leading-fm-md [font-size:var(--text-fm-md)] px-3 py-4",
+        filled:
+          "h-10 rounded-fm-s bg-fm-surface-frosted/20 border leading-fm-md [font-size:var(--text-fm-md)] px-4",
+      },
+      state: {
+        default: "",
+        focused: "",
+        disabled:
+          "border-fm-divider-tertiary !text-fm-inactive cursor-not-allowed",
+      },
+    },
+
+    defaultVariants: {
+      variant: "default",
+      state: "default",
+      decoration: "underline",
+    },
+  }
+)
+
+// Types
+type InputVariant = "default" | "error" | "warning" | "success"
+type InputDecoration = "underline" | "outline" | "filled"
+type InputProps = {
+  label?: ReactNode
+  helperText?: ReactNode
+  placeholder?: string
+  variant?: InputVariant
+  disabled?: boolean
+  decoration?: InputDecoration
+  type?: string
+  required?: boolean
+  fullWidth?: boolean
+  className?: string
+  value?: string | number
+  defaultValue?: string | number
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  startIcon?: ReactNode
+  endIcon?: ReactNode
+  id?: string
+  name?: string
+  maxLength?: number
+  min?: number
+  max?: number
+  unstyled?: boolean
+  classes?: {
+    root?: string
+    label?: string
+    wrapper?: string
+    startIcon?: string
+    endIcon?: string
+    passwordToggle?: string
+    helperText?: string
+    characterCounter?: string
+    input?: string
+  }
+}
+
+// Sub-components for atomic design pattern
+const InputRoot = forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<{ className?: string; fullWidth?: boolean }>
+>(({ children, className = "", fullWidth = false }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      {
+        "w-full": fullWidth,
+      },
+      className
+    )}
+  >
+    {children}
+  </div>
+))
+InputRoot.displayName = "InputRoot"
+
+const InputLabel = forwardRef<
+  HTMLLabelElement,
+  {
+    htmlFor?: string
+    className?: string
+    children: ReactNode
+    disabled?: boolean
+    required?: boolean
+  }
+>((props, ref) => {
+  return <Label ref={ref} {...props} />
+})
+InputLabel.displayName = "InputLabel"
+
+const InputWrapper = forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<{ className?: string }>
+>(({ children, className = "" }, ref) => (
+  <div ref={ref} className={cn("relative mt-1", className)}>
+    {children}
+  </div>
+))
+InputWrapper.displayName = "InputWrapper"
+
+const StartIcon = forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<{ className?: string }>
+>(({ children, className = "" }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
+      className
+    )}
+  >
+    {children}
+  </div>
+))
+StartIcon.displayName = "StartIcon"
+
+const EndIcon = forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<{ className?: string }>
+>(({ children, className = "" }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "absolute inset-y-0 right-0 flex items-center pr-3",
+      className
+    )}
+  >
+    {children}
+  </div>
+))
+EndIcon.displayName = "EndIcon"
+
+const PasswordToggle = forwardRef<
+  HTMLButtonElement,
+  {
+    isVisible: boolean
+    onToggle: () => void
+    className?: string
+  }
+>(({ isVisible, onToggle, className = "" }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    onClick={onToggle}
+    className={cn(
+      "text-fm-primary hover:text-fm-primary/90 h-full focus:outline-none",
+      className
+    )}
+  >
+    <IfElse condition={isVisible}>
+      <If>
+        <EyeCloseIcon />
+      </If>
+      <Else>
+        <EyeOpenIcon />
+      </Else>
+    </IfElse>
+  </button>
+))
+
+// InputBase component - Core input functionality without any wrapper elements
+const InputBase = forwardRef<
+  HTMLInputElement,
+  {
+    variant?: InputVariant
+    decoration?: InputDecoration
+    disabled?: boolean
+    className?: string
+    unstyled?: boolean
+    type?: string
+    placeholder?: string
+    value?: string | number
+    defaultValue?: string | number
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+    id?: string
+    name?: string
+    required?: boolean
+    maxLength?: number
+    startIcon?: boolean // Indicates if start icon spacing should be applied
+    endIcon?: boolean // Indicates if end icon spacing should be applied
+  } & Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "onBlur" | "onFocus" | "defaultValue"
+  >
+>(
+  (
+    {
+      variant = "default",
+      decoration = "underline",
+      disabled = false,
+      className = "",
+      unstyled = false,
+      type = "text",
+      placeholder = "",
+      value,
+      defaultValue,
+      onChange,
+      onBlur,
+      onFocus,
+      id,
+      name,
+      required = false,
+      maxLength,
+      startIcon = false,
+      endIcon = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = useState(false)
+
+    // Handle focus state
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true)
+      if (onFocus) onFocus(e)
+    }
+
+    // Handle blur state
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false)
+      if (onBlur) onBlur(e)
+    }
+
+    // Handle input change
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) onChange(e)
+    }
+
+    // Determine focus state
+    const state = disabled ? "disabled" : isFocused ? "focused" : "default"
+
+    // Apply styles only if not unstyled
+    const inputClassName = unstyled
+      ? className
+      : inputVariants({
+          variant,
+          state,
+          decoration,
+          className: cn(
+            {
+              "pl-10": startIcon,
+              "pr-10": endIcon,
+            },
+            className
+          ),
+        })
+
+    return (
+      <input
+        ref={ref}
+        type={type}
+        id={id}
+        name={name}
+        className={inputClassName}
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        required={required}
+        maxLength={maxLength}
+        {...props}
+      />
+    )
+  }
+)
+InputBase.displayName = "InputBase"
+
+// Main Input component
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      helperText,
+      placeholder = "",
+      variant = "default",
+      disabled = false,
+      type = "text",
+      required = false,
+      fullWidth = false,
+      className = "",
+      value,
+      defaultValue,
+      onChange,
+      onBlur,
+      onFocus,
+      startIcon,
+      endIcon,
+      id,
+      name,
+      maxLength,
+      decoration,
+      unstyled = false,
+      classes = {},
+      ...props
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = useState(value || defaultValue || "")
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+
+    // Handle input change
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      // Only update internal state if component is uncontrolled (no value prop)
+      if (value === undefined) {
+        setInputValue(e.target.value)
+      }
+      if (onChange) onChange(e)
+    }
+
+    // Toggle password visibility
+    const togglePasswordVisibility = () => {
+      setIsPasswordVisible(!isPasswordVisible)
+    }
+
+    // Determine input type for password fields
+    const inputType = type === "password" && isPasswordVisible ? "text" : type
+
+    // Determine which value to use for character count
+    const currentValue = value !== undefined ? value : inputValue
+    const currentLength = String(currentValue).length || 0
+
+    return (
+      <InputRoot fullWidth={fullWidth} className={cn(className, classes.root)}>
+        <div className="flex items-center justify-between gap-2">
+          {/* Label */}
+          <If condition={!!label}>
+            <InputLabel
+              htmlFor={id || name}
+              disabled={disabled}
+              required={required}
+              className={cn("flex-1", classes.label)}
+            >
+              {label}
+            </InputLabel>
+          </If>
+          <If condition={!!maxLength}>
+            <CharCount
+              currentLength={currentLength}
+              maxLength={maxLength || 0}
+              className={cn(classes.characterCounter)}
+            />
+          </If>
+        </div>
+
+        {/* Input wrapper for icons */}
+        <InputWrapper className={cn(classes.wrapper)}>
+          {/* Start icon */}
+          <If condition={!!startIcon}>
+            <StartIcon className={classes.startIcon}>{startIcon}</StartIcon>
+          </If>
+
+          {/* Input element using InputBase */}
+          <InputBase
+            ref={ref}
+            type={inputType}
+            id={id || name}
+            name={name}
+            variant={variant}
+            decoration={decoration}
+            disabled={disabled}
+            placeholder={placeholder}
+            value={value !== undefined ? value : inputValue}
+            defaultValue={value === undefined ? defaultValue : undefined}
+            onChange={handleChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            required={required}
+            maxLength={maxLength}
+            startIcon={!!startIcon}
+            endIcon={!!(endIcon || type === "password")}
+            unstyled={unstyled}
+            className={unstyled ? className : classes.input}
+            {...props}
+          />
+
+          {/* End icon or password toggle */}
+          <If condition={!!endIcon || type === "password"}>
+            <EndIcon className={cn(classes.endIcon)}>
+              <IfElse condition={type === "password"}>
+                <If>
+                  <PasswordToggle
+                    isVisible={isPasswordVisible}
+                    onToggle={togglePasswordVisibility}
+                    className={cn(
+                      { "pointer-events-none": disabled },
+                      classes.passwordToggle
+                    )}
+                  />
+                </If>
+                <Else>{endIcon}</Else>
+              </IfElse>
+            </EndIcon>
+          </If>
+        </InputWrapper>
+
+        {/* Helper text */}
+        <If condition={!!helperText}>
+          <HelperText
+            variant={variant}
+            disabled={disabled}
+            className={cn(classes.helperText)}
+          >
+            {helperText}
+          </HelperText>
+        </If>
+      </InputRoot>
+    )
+  }
+) as InputComponent
+Input.displayName = "Input"
+
+// Compose Input with its sub-components
+Input.Root = InputRoot
+Input.Label = InputLabel
+Input.Wrapper = InputWrapper
+Input.StartIcon = StartIcon
+Input.EndIcon = EndIcon
+Input.PasswordToggle = PasswordToggle
+Input.Base = InputBase
+Input.HelperText = HelperText
+Input.CharCount = CharCount
+
+export default Input
+export {
+  InputRoot,
+  InputLabel,
+  InputWrapper,
+  StartIcon,
+  EndIcon,
+  PasswordToggle,
+  InputBase,
+}
+export type { InputProps, InputVariant, InputComponent }

package/dist/components/input/meta.ts

@@ -0,0 +1,28 @@
+export const meta = {
+  dependencies: {},
+  devDependencies: {},
+  internalDependencies: [
+    "char-count",
+    "helper-text",
+    "if-else",
+    "label",
+    "eye-close-icon",
+    "eye-open-icon",
+  ],
+  tokens: [
+    "--color-fm-divider-contrast",
+    "--color-fm-divider-negative",
+    "--color-fm-divider-positive",
+    "--color-fm-divider-primary",
+    "--color-fm-divider-tertiary",
+    "--color-fm-divider-warning",
+    "--color-fm-inactive",
+    "--color-fm-placeholder",
+    "--color-fm-primary",
+    "--color-fm-surface-frosted",
+    "--leading-fm-md",
+    "--leading-fm-xl",
+    "--radius-fm-s",
+    "--text-fm-md",
+  ],
+}

package/dist/components/label/Label.stories.tsx

@@ -0,0 +1,200 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import Label from "."
+
+const meta: Meta<typeof Label> = {
+  title: "Components/UI/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: "text",
+      description: "The content of the label",
+    },
+    htmlFor: {
+      control: "text",
+      description: "The ID of the form control this label is associated with",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the label is disabled",
+    },
+    required: {
+      control: "boolean",
+      description: "Whether to show the required indicator (*)",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: "Label Text",
+    htmlFor: "example-input",
+    disabled: false,
+    required: false,
+  },
+}
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true,
+    children: "Required Label",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    children: "Disabled Label",
+  },
+}
+
+export const WithCustomClass: Story = {
+  args: {
+    ...Default.args,
+    className: "text-blue-500 font-bold",
+    children: "Styled Label",
+  },
+}
+
+// Example showing label with an input
+export const WithInput: Story = {
+  render: (args) => (
+    <div className="space-y-2">
+      <Label htmlFor="example-input" {...args}>
+        {args.children}
+      </Label>
+      <input
+        id="example-input"
+        type="text"
+        className="w-full rounded-md border border-gray-300 p-2"
+        placeholder="Enter text here"
+        disabled={args.disabled}
+        required={args.required}
+      />
+    </div>
+  ),
+  args: {
+    ...Default.args,
+    children: "Email Address",
+  },
+}
+
+// Example showing multiple labels with different states
+export const LabelExamples: Story = {
+  render: () => (
+    <div className="w-64 space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="username">Username</Label>
+        <input
+          id="username"
+          type="text"
+          className="w-full rounded-md border border-gray-300 p-2"
+          placeholder="Enter username"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="email" required>
+          Email
+        </Label>
+        <input
+          id="email"
+          type="email"
+          className="w-full rounded-md border border-gray-300 p-2"
+          placeholder="Enter email"
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="disabled-field" disabled>
+          Disabled Field
+        </Label>
+        <input
+          id="disabled-field"
+          type="text"
+          className="w-full rounded-md border border-gray-200 bg-gray-100 p-2 text-gray-400"
+          placeholder="Disabled"
+          disabled
+        />
+      </div>
+    </div>
+  ),
+}
+
+// Example showing form layout
+export const FormLayout: Story = {
+  render: () => (
+    <div className="mx-auto max-w-md rounded-xl bg-white p-4 shadow-md">
+      <form className="space-y-4">
+        <h2 className="mb-4 text-xl font-semibold">Contact Information</h2>
+
+        <div className="space-y-2">
+          <Label htmlFor="form-name" required>
+            Full Name
+          </Label>
+          <input
+            id="form-name"
+            type="text"
+            className="w-full rounded-md border border-gray-300 p-2"
+            placeholder="John Doe"
+            required
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="form-email" required>
+            Email Address
+          </Label>
+          <input
+            id="form-email"
+            type="email"
+            className="w-full rounded-md border border-gray-300 p-2"
+            placeholder="john@example.com"
+            required
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="form-phone">Phone Number</Label>
+          <input
+            id="form-phone"
+            type="tel"
+            className="w-full rounded-md border border-gray-300 p-2"
+            placeholder="+1 (555) 123-4567"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="form-message">Message</Label>
+          <textarea
+            id="form-message"
+            className="h-32 w-full rounded-md border border-gray-300 p-2"
+            placeholder="Your message here..."
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  ),
+}