@bronzelabs/oakma-ui 0.0.1

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,243 @@
+import React from "react"
+
+// Components
+import TextArea from "./TextArea"
+
+// Types
+import type { Meta, StoryFn } from "@storybook/react-webpack5"
+import { TEXT_FIELD_SIZES, TEXT_FIELD_VARIANTS } from "../TextField"
+
+// Utils
+import { DummyPhoneIcon, DummyChevronDownIcon } from "../../../.storybook/components"
+
+/*
+
+
+
+
+*/
+
+type TextAreaStoryProps = React.ComponentProps<typeof TextArea>
+
+const meta: Meta<TextAreaStoryProps> = {
+  title: "Components/TextArea",
+  component: TextArea,
+  parameters: {
+    docs: {
+      description: {
+        component: "A labelled multi-line text field with optional error state.",
+      },
+    },
+    controls: {
+      exclude: ["className", "ref"],
+    },
+  },
+  argTypes: {
+    label: {
+      type: "string",
+      description: "Visible label rendered above the textarea.",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    size: {
+      type: "string",
+      description: "Determines the size of the textarea.",
+      table: {
+        type: { summary: TEXT_FIELD_SIZES.map(size => `"${size}"`).join(" | ") },
+        defaultValue: { summary: '"md"' },
+      },
+      options: TEXT_FIELD_SIZES,
+      control: { type: "select" },
+    },
+    variant: {
+      type: "string",
+      description: "Determines the color scheme of the textarea.",
+      table: {
+        type: { summary: TEXT_FIELD_VARIANTS.map(variant => `"${variant}"`).join(" | ") },
+        defaultValue: { summary: '"dark"' },
+      },
+      options: TEXT_FIELD_VARIANTS,
+      control: { type: "select" },
+    },
+    placeholder: {
+      type: "string",
+      description: "Placeholder text shown when the textarea is empty.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    showOptional: {
+      type: "boolean",
+      description: 'Shows an "Optional" tag next to the label when the field is not required.',
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    required: {
+      type: "boolean",
+      description: 'Marks the field as required and hides the "Optional" tag.',
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      type: "boolean",
+      description: "Disables the textarea.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    leadingIcon: {
+      description: "Renders an icon inside the field, aligned to the left.",
+      table: {
+        type: { summary: "{ icon: ReactNode }" },
+      },
+    },
+    trailingIcon: {
+      description:
+        "Renders an icon inside the field, aligned to the right. Pass `onClick` to make it a button.",
+      table: {
+        type: {
+          summary:
+            "{ icon: ReactNode, onClick?: function, type?: 'button' | 'submit' | 'reset', disabled?: boolean }",
+        },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    error: {
+      description: "Renders the field in an error state and displays the provided message.",
+      table: {
+        type: { summary: "{ message: string }" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+  },
+  args: {
+    id: "text-area",
+    label: "Label",
+    showOptional: true,
+    required: false,
+    disabled: false,
+    rows: 4,
+    placeholder: "Enter a description…",
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: 380 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+const Template: StoryFn<TextAreaStoryProps> = args => <TextArea {...args} />
+
+const TrailingIconTemplate: StoryFn<TextAreaStoryProps> = args => (
+  <div className="flex flex-col gap-6">
+    <TextArea {...args} trailingIcon={{ icon: <DummyChevronDownIcon className="size-5" /> }} />
+    <TextArea
+      {...args}
+      trailingIcon={{
+        icon: <DummyChevronDownIcon className="size-5" />,
+        onClick: () => alert("Trailing icon clicked!"),
+      }}
+    />
+  </div>
+)
+
+const VariantsTemplate: StoryFn<TextAreaStoryProps> = args => (
+  <div className="flex flex-col">
+    <div className="bg-[#fff] p-6">
+      <TextArea {...args} variant="dark" label="Dark Variant" />
+    </div>
+    <div className="bg-[#333] p-6">
+      <TextArea {...args} className="bg-inherit" variant="light" label="Light Variant" />
+    </div>
+  </div>
+)
+
+const Default = Template.bind({})
+const Variants = VariantsTemplate.bind({})
+const WithLeadingIcon = Template.bind({})
+const WithTrailingIcon = TrailingIconTemplate.bind({})
+const Required = Template.bind({})
+const WithError = Template.bind({})
+const Disabled = Template.bind({})
+
+// Args
+WithLeadingIcon.args = {
+  leadingIcon: { icon: <DummyPhoneIcon className="size-5" /> },
+}
+
+WithTrailingIcon.args = {}
+
+Required.args = {
+  required: true,
+}
+
+WithError.args = {
+  error: { message: "This field is required." },
+}
+
+Disabled.args = {
+  placeholder: "Disabled",
+  disabled: true,
+}
+
+// Parameters
+Variants.parameters = {
+  docs: {
+    description: {
+      story: "The `variant` prop changes the color scheme of the textarea.",
+    },
+  },
+}
+
+WithLeadingIcon.parameters = {
+  docs: {
+    description: {
+      story: "The `leadingIcon` prop renders an icon inside the field, aligned to the left.",
+    },
+  },
+}
+
+WithTrailingIcon.parameters = {
+  docs: {
+    description: {
+      story:
+        "The `trailingIcon` prop renders an icon inside the field, aligned to the right. Pass `onTrailingIconClick` to make it a button.",
+    },
+  },
+}
+
+Required.parameters = {
+  docs: {
+    description: {
+      story: 'Setting `required` hides the "Optional" tag and marks the textarea as required.',
+    },
+  },
+}
+
+WithError.parameters = {
+  docs: {
+    description: {
+      story: "Pass an `error` object with a `message` string to display an inline error.",
+    },
+  },
+}
+
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: "Setting `disabled` prevents interaction and visually dims the field.",
+    },
+  },
+}
+
+export { Default, Variants, WithLeadingIcon, WithTrailingIcon, Required, WithError, Disabled }
+export default meta

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import React from "react"
+
+// Components
+import { Container, ErrorMessage, Icon, Label, useInputKeyboardFocus } from "../TextField"
+
+// Types
+import type { TextAreaVariant, TextAreaSize } from "./types"
+
+// Utils
+import clsx from "clsx"
+
+// Params
+interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "id"> {
+  id: string
+  label?: string
+  size?: TextAreaSize
+  variant?: TextAreaVariant
+  leadingIcon?: { icon: React.ReactNode }
+  trailingIcon?: {
+    icon: React.ReactNode
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
+    type?: "button" | "submit" | "reset"
+    disabled?: boolean
+  }
+  showOptional?: boolean
+  error?: {
+    message: string
+  }
+}
+
+/*
+
+
+
+
+*/
+
+const TextArea: React.FC<TextAreaProps> = ({
+  id,
+  label,
+  size = "md",
+  variant = "dark",
+  error,
+  leadingIcon,
+  trailingIcon,
+  showOptional = true,
+  className,
+  required,
+  disabled,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const { keyboardFocused, handleMouseDown, handleMouseUp, handleFocus, handleBlur } =
+    useInputKeyboardFocus({ onFocus, onBlur })
+
+  return (
+    <div className={className}>
+      <Container
+        keyboardFocused={keyboardFocused}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        className="items-start!"
+        size={size}
+        hasButton={false}
+        label={label}
+        showOptional={showOptional}
+        required={required}
+        variant={variant}
+      >
+        {label && (
+          <Label
+            inputId={id}
+            label={label}
+            showOptional={showOptional}
+            required={required}
+            variant={variant}
+          />
+        )}
+
+        {!!leadingIcon?.icon && (
+          <Icon position="leading" disabled={disabled} fieldSize={size} variant={variant}>
+            {leadingIcon.icon}
+          </Icon>
+        )}
+
+        <textarea
+          id={id}
+          className={clsx(
+            "min-w-0 grow resize-none py-3.5 placeholder:text-neutral-30 focus:outline-hidden",
+            variant === "dark" && "text-neutral-100",
+            variant === "light" && "text-white",
+            size === "sm" && [
+              "min-h-6 text-sm",
+              !!leadingIcon?.icon ? "pl-10" : "pl-3",
+              !!trailingIcon?.icon ? "pr-10" : "pr-3",
+            ],
+            size === "md" && [
+              "min-h-12 text-base",
+              !!leadingIcon?.icon ? "pl-12" : "pl-5",
+              !!trailingIcon?.icon ? "pr-12" : "pr-5",
+            ],
+          )}
+          aria-describedby={error ? `${id}-error` : undefined}
+          aria-invalid={!!error}
+          required={required}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          {...rest}
+        />
+
+        {!!trailingIcon?.icon && (
+          <Icon
+            position="trailing"
+            onClick={trailingIcon?.onClick}
+            disabled={trailingIcon?.disabled || disabled}
+            fieldSize={size}
+            variant={variant}
+          >
+            {trailingIcon.icon}
+          </Icon>
+        )}
+      </Container>
+      {error && <ErrorMessage id={id} error={error} />}
+    </div>
+  )
+}
+
+export default TextArea
+export type { TextAreaProps }

package/src/components/TextArea/index.ts

@@ -0,0 +1,2 @@
+export { default, type TextAreaProps } from "./TextArea"
+export { type TextAreaSize, type TextAreaVariant } from "./types"

package/src/components/TextArea/types.ts

@@ -0,0 +1,4 @@
+export type {
+  TextFieldSize as TextAreaSize,
+  TextFieldVariant as TextAreaVariant,
+} from "../TextField"

package/src/components/TextField/Container.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+
+// Components
+import NotchBorder from "./NotchBorder"
+
+// Utils
+import { clsx } from "clsx"
+
+// Params
+interface ContainerProps {
+  keyboardFocused?: boolean
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>
+  size: "sm" | "md"
+  variant?: "dark" | "light"
+  hasButton: boolean
+  label?: string
+  showOptional?: boolean
+  required?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+/*
+
+
+
+
+*/
+
+const Container: React.FC<ContainerProps> = ({
+  keyboardFocused,
+  onMouseDown,
+  onMouseUp,
+  size = "md",
+  variant = "dark",
+  hasButton = false,
+  label,
+  showOptional,
+  required,
+  className,
+  children,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "group relative mt-2 flex items-center rounded-[1.75rem] transition-colors",
+        size === "sm" && "min-h-10",
+        size === "md" && "min-h-14",
+        hasButton && "pr-1",
+        keyboardFocused && "outline-browser",
+        className,
+      )}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+    >
+      <NotchBorder
+        label={label}
+        showOptional={showOptional}
+        required={required}
+        variant={variant}
+      />
+      {children}
+    </div>
+  )
+}
+
+export default Container

package/src/components/TextField/ErrorMessage.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+// Components
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid"
+
+// Utils
+import { clsx } from "clsx"
+
+// Params
+interface ErrorMessageProps {
+  id: string
+  error: {
+    message: string
+  }
+  className?: string
+}
+
+/*
+
+
+
+
+
+*/
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ id, className, error }) => {
+  return (
+    <div className={clsx("mt-1 flex items-center gap-0.5 text-error-100", className)}>
+      <ExclamationCircleIcon className="ml-1.5 size-3.5" />
+      <span id={`${id}-error`} className="text-xs">
+        {error.message}
+      </span>
+    </div>
+  )
+}
+
+export default ErrorMessage

package/src/components/TextField/Icon.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+
+// Utils
+import { clsx } from "clsx"
+
+// Types
+import type { TextFieldSize, TextFieldVariant } from "./types"
+
+// Params
+interface IconProps {
+  position: "leading" | "trailing"
+  fieldSize: TextFieldSize
+  variant: TextFieldVariant
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  disabled?: boolean
+  buttonType?: "button" | "submit" | "reset"
+  children: React.ReactNode
+  className?: string
+  name?: string
+}
+
+/*
+
+
+
+
+
+*/
+
+const Icon: React.FC<IconProps> = ({
+  position,
+  fieldSize = "md",
+  variant = "dark",
+  onClick,
+  buttonType,
+  disabled,
+  children,
+  className,
+  name,
+}) => {
+  const isButton = typeof onClick === "function"
+  const Component = (isButton ? "button" : "div") as React.ElementType
+
+  return (
+    <Component
+      className={clsx(
+        "absolute flex grow-0 items-center justify-center rounded-full transition-colors ease-out",
+        fieldSize === "sm" && [
+          "top-2.125 size-6.5",
+          // isButton && "w-6.5",
+          position === "leading" ? "left-3.75" : "right-3.75",
+        ],
+        fieldSize === "md" && [
+          "top-3.125 size-8.5",
+          // isButton && "w-8.5",
+          position === "leading" ? "left-3.5" : "right-3.5",
+        ],
+        variant === "dark" && "text-neutral-50",
+        variant === "light" && "text-neutral-30",
+        isButton && [
+          "group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:cursor-pointer",
+          variant === "dark" &&
+            "group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:hover:bg-neutral-50/10 group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:hover:text-neutral-100 focus-visible:bg-neutral-50/10 group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:focus-visible:text-neutral-100 group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:active:bg-neutral-50/20",
+          variant === "light" &&
+            "group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:hover:bg-white/10 group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:hover:text-white focus-visible:bg-white/10 group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:focus-visible:text-white group-has-[:is(input,textarea,select):not(:disabled,:user-invalid,[aria-invalid=true])]:active:bg-white/20",
+        ],
+        className,
+      )}
+      {...(!isButton && { "aria-hidden": true })}
+      {...(isButton && { name, onClick, disabled, type: buttonType || "button" })}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export default Icon

package/src/components/TextField/Label.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import React from "react"
+
+// Utils
+import { clsx } from "clsx"
+
+// Params
+interface LabelProps {
+  /** Unique identifier for the input element associated with this label */
+  inputId: string
+  label: string
+  variant?: "dark" | "light"
+  showOptional?: boolean
+  required?: boolean
+  className?: string
+}
+
+/*
+
+
+
+
+
+*/
+
+const Label: React.FC<LabelProps> = ({
+  inputId,
+  label,
+  variant = "dark",
+  showOptional,
+  required,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "absolute -top-2 left-4.25 z-10 flex flex-nowrap items-center justify-start gap-1 px-1 font-medium whitespace-nowrap group-has-user-invalid:text-error-100! group-has-aria-invalid:text-error-100!",
+        variant === "dark" &&
+          "text-neutral-50 group-focus-within:text-neutral-100 group-has-[:is(input,textarea,select):not(:disabled)]:group-hover:text-neutral-100",
+        variant === "light" &&
+          "text-neutral-20 group-focus-within:text-white group-has-[:is(input,textarea,select):not(:disabled)]:group-hover:text-white",
+        className,
+      )}
+    >
+      <label htmlFor={inputId} className="text-sm leading-none">
+        {label}
+      </label>
+      {showOptional && !required && (
+        <span className="inline-block text-xs leading-none">(Optional)</span>
+      )}
+    </div>
+  )
+}
+
+export default Label

package/src/components/TextField/NotchBorder.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import React from "react"
+
+// Utils
+import { clsx } from "clsx"
+
+// Params
+interface NotchBorderProps {
+  label?: string
+  showOptional?: boolean
+  required?: boolean
+  variant?: "dark" | "light"
+}
+
+const NotchBorder: React.FC<NotchBorderProps> = ({
+  label,
+  showOptional,
+  required,
+  variant = "dark",
+}) => {
+  return (
+    <div
+      className={clsx(
+        "pointer-events-none absolute inset-0 flex",
+        "group-has-user-invalid:[--border-color:var(--color-error-100)]! group-has-aria-invalid:[--border-color:var(--color-error-100)]!",
+        variant === "dark" &&
+          "[--border-color:var(--color-stroke-dark)] group-has-focus-visible:[--border-color:var(--color-neutral-100)] group-has-[:is(input,textarea,select):not(:disabled)]:group-hover:[--border-color:var(--color-neutral-100)]",
+        variant === "light" &&
+          "[--border-color:var(--color-stroke-light)] group-has-focus-visible:[--border-color:var(--color-white)] group-has-[:is(input,textarea,select):not(:disabled)]:group-hover:[--border-color:var(--color-white)]",
+      )}
+      aria-hidden="true"
+    >
+      {/* Left cap */}
+      <div
+        className="relative -mr-9.75 w-14 shrink-0 rounded-l-[1.75rem] border-y-[1.5px] border-l-[1.5px] border-(--border-color) transition-colors"
+        style={
+          label
+            ? { clipPath: "polygon(0% 0%, 0% 100%, 100% 100%, 100% 50%, 30% 50%, 30% 0%)" }
+            : undefined
+        }
+      />
+
+      {/* Notch — no top border; invisible clone auto-sizes the gap to match the label */}
+      {label && (
+        <div className="relative shrink-0 px-1 transition-colors before:absolute before:right-0 before:bottom-0 before:left-9.75 before:h-[1.5px] before:bg-(--border-color) before:transition-colors">
+          <div className="invisible flex items-center gap-1 font-medium whitespace-nowrap">
+            <span className="text-sm leading-none">{label}</span>
+            {showOptional && !required && (
+              <span className="inline-block text-xs leading-none">(Optional)</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Right cap */}
+      <div
+        className={clsx(
+          "flex-1 rounded-r-[1.75rem] border-y-[1.5px] border-r-[1.5px] border-(--border-color) transition-colors",
+          !label && "ml-9.75",
+        )}
+      />
+    </div>
+  )
+}
+
+export default NotchBorder