@bronzelabs/oakma-ui 0.0.1 → 0.0.3

package/src/components/TextInput/TextInput.tsx

@@ -1,255 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-
-// Components
-import Button, { ButtonProps } from "../Button"
-import { Container, ErrorMessage, Icon, Label, useInputKeyboardFocus } from "../TextField"
-import {
-  EyeSlashIcon,
-  EyeIcon,
-  CalendarIcon,
-  CalendarDaysIcon,
-  CalendarDateRangeIcon,
-  ClockIcon,
-} from "@heroicons/react/24/solid"
-
-// Types
-import type { TextInputSize, TextInputVariant } from "./types"
-
-// Utils
-import { clsx } from "clsx"
-
-// Params
-const INPUT_TYPES = {
-  calendar: ["date", "datetime-local", "week", "month", "time"],
-  text: ["text", "email", "number", "password", "search", "tel", "url"],
-}
-
-interface TextInputProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "id" | "type" | "size"
-> {
-  id: string
-  label?: string
-  size?: TextInputSize
-  variant?: TextInputVariant
-  type?: React.HTMLInputTypeAttribute
-  leadingIcon?: {
-    icon: React.ReactNode
-    onClick?: React.MouseEventHandler<HTMLButtonElement>
-    type?: "button" | "submit" | "reset"
-    disabled?: boolean
-    name?: string
-  }
-  trailingIcon?: {
-    icon: React.ReactNode
-    onClick?: React.MouseEventHandler<HTMLButtonElement>
-    type?: "button" | "submit" | "reset"
-    disabled?: boolean
-    name?: string
-  }
-  showOptional?: boolean
-  error?: {
-    message: string
-  }
-  button?: Omit<ButtonProps, "children"> & { label: string }
-}
-
-/*
-
-
-
-
-
-*/
-
-const TextInput: React.FC<TextInputProps> = ({
-  id,
-  label,
-  size = "md",
-  variant = "dark",
-  type = "text",
-  button,
-  error,
-  leadingIcon,
-  trailingIcon,
-  showOptional = true,
-  className,
-  required,
-  disabled,
-  onFocus,
-  onBlur,
-  ...rest
-}) => {
-  const { keyboardFocused, handleMouseDown, handleMouseUp, handleFocus, handleBlur } =
-    useInputKeyboardFocus({ onFocus, onBlur })
-
-  // State
-  const [dynamicType, setDynamicType] = useState<React.HTMLInputTypeAttribute>(type)
-
-  // Functions
-  function handleTrailingIconClick(e: React.MouseEvent<HTMLButtonElement>) {
-    if (type === "password") {
-      setDynamicType(dynamicType === "password" ? "text" : "password")
-    }
-    return trailingIcon?.onClick?.(e)
-  }
-
-  function handleLeadingIconClick(e: React.MouseEvent<HTMLButtonElement>) {
-    if (INPUT_TYPES.calendar.includes(dynamicType)) {
-      return e.currentTarget?.closest("div")?.querySelector("input")?.showPicker()
-    }
-    return leadingIcon?.onClick?.(e)
-  }
-
-  return (
-    <div className={className}>
-      <Container
-        keyboardFocused={keyboardFocused}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        size={size}
-        hasButton={!!button?.label}
-        variant={variant}
-        label={label}
-        showOptional={showOptional}
-        required={required}
-      >
-        {label && (
-          <Label
-            inputId={id}
-            label={label}
-            showOptional={showOptional}
-            required={required}
-            variant={variant}
-          />
-        )}
-        {INPUT_TYPES.calendar.includes(dynamicType) && (
-          <Icon
-            position="leading"
-            fieldSize={size}
-            variant={variant}
-            disabled={disabled}
-            onClick={handleLeadingIconClick}
-            name={leadingIcon?.name}
-            buttonType={leadingIcon?.type}
-          >
-            {dynamicType === "time" && (
-              <ClockIcon className={clsx(size === "md" && "size-6", size === "sm" && "size-5")} />
-            )}
-            {dynamicType === "date" && (
-              <CalendarIcon
-                className={clsx(size === "md" && "size-6", size === "sm" && "size-5")}
-              />
-            )}
-            {dynamicType === "datetime-local" && (
-              <CalendarIcon
-                className={clsx(size === "md" && "size-6", size === "sm" && "size-5")}
-              />
-            )}
-            {dynamicType === "week" && (
-              <CalendarDateRangeIcon
-                className={clsx(size === "md" && "size-6", size === "sm" && "size-5")}
-              />
-            )}
-            {dynamicType === "month" && (
-              <CalendarDaysIcon
-                className={clsx(size === "md" && "size-6", size === "sm" && "size-5")}
-              />
-            )}
-          </Icon>
-        )}
-        {leadingIcon?.icon && !INPUT_TYPES.calendar.includes(dynamicType) && (
-          <Icon
-            position="leading"
-            fieldSize={size}
-            variant={variant}
-            disabled={leadingIcon?.disabled || disabled}
-            onClick={leadingIcon?.onClick}
-            name={leadingIcon?.name}
-            buttonType={leadingIcon?.type}
-          >
-            {leadingIcon.icon}
-          </Icon>
-        )}
-
-        <input
-          id={id}
-          className={clsx(
-            "size-full min-w-0 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 || INPUT_TYPES.calendar.includes(dynamicType))
-                ? "pl-11.5"
-                : "pl-3",
-              !!(trailingIcon?.icon || type === "password") ? "pr-10" : "pr-3",
-            ],
-            size === "md" && [
-              "min-h-12 text-base",
-              !!(leadingIcon?.icon || INPUT_TYPES.calendar.includes(dynamicType))
-                ? "pl-12.75"
-                : "pl-5",
-              !!(trailingIcon?.icon || type === "password") ? "pr-12" : "pr-5",
-            ],
-          )}
-          aria-describedby={error ? `${id}-error` : undefined}
-          aria-invalid={!!error}
-          required={required}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          type={dynamicType}
-          {...rest}
-        />
-
-        {type === "password" && (
-          <Icon
-            position="trailing"
-            onClick={handleTrailingIconClick}
-            disabled={disabled}
-            fieldSize={size}
-            variant={variant}
-            name="Toggle password visibility"
-          >
-            {dynamicType === "password" ? (
-              <EyeSlashIcon className="size-5" />
-            ) : (
-              <EyeIcon className="size-5" />
-            )}
-          </Icon>
-        )}
-
-        {trailingIcon?.icon && dynamicType !== "password" && (
-          <Icon
-            position="trailing"
-            onClick={trailingIcon?.onClick}
-            disabled={trailingIcon?.disabled || disabled}
-            fieldSize={size}
-            variant={variant}
-            name={trailingIcon?.name}
-          >
-            {trailingIcon.icon}
-          </Icon>
-        )}
-
-        {button?.label && (
-          <Button
-            size={size}
-            {...button}
-            disabled={disabled || button.disabled}
-            className={clsx("shrink-0", size === "sm" && "min-h-7.5!", button.className)}
-          >
-            {button.label}
-          </Button>
-        )}
-      </Container>
-      {error && <ErrorMessage id={id} error={error} />}
-    </div>
-  )
-}
-
-export default TextInput
-export type { TextInputProps }

package/src/components/TextInput/index.ts

@@ -1,2 +0,0 @@
-export { default, type TextInputProps } from "./TextInput"
-export type { TextInputSize, TextInputVariant } from "./types"

package/src/components/TextInput/types.ts

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

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,142 +0,0 @@
-import React from "react"
-
-// Components
-import Toggle from "./Toggle"
-
-// Types
-import type { Meta, StoryFn } from "@storybook/react-webpack5"
-import type { ToggleProps } from "./Toggle"
-
-/*
-
-
-
-
-*/
-
-const meta: Meta<ToggleProps> = {
-  title: "Components/Toggle",
-  component: Toggle,
-  parameters: {
-    docs: {
-      description: {
-        component: "A switch control for toggling a boolean setting on or off.",
-      },
-    },
-    controls: {
-      exclude: ["className", "ref"],
-    },
-  },
-  argTypes: {
-    label: {
-      type: "string",
-      description: "Label text displayed next to the Toggle.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    meta: {
-      type: "string",
-      description: "Secondary text displayed below the label.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    activeText: {
-      type: "string",
-      description: "Alternate label shown when the toggle is on. Falls back to label if not set.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    disabled: {
-      description: "Disables the toggle.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-  args: {},
-}
-
-const Template: StoryFn<ToggleProps> = args => <Toggle {...args} />
-
-const Default = Template.bind({})
-const Checked = Template.bind({})
-const WithLabel = Template.bind({})
-const WithLabelAndMeta = Template.bind({})
-const WithActiveText = Template.bind({})
-const Disabled = Template.bind({})
-const DisabledChecked = Template.bind({})
-
-// Args
-Checked.args = { defaultChecked: true }
-WithLabel.args = { label: "Enable notifications" }
-WithLabelAndMeta.args = {
-  label: "Enable notifications",
-  meta: "Receive alerts for important account activity.",
-}
-WithActiveText.args = {
-  label: "Notifications off",
-  activeText: "Notifications on",
-  defaultChecked: true,
-}
-Disabled.args = { disabled: true, label: "Disabled option" }
-DisabledChecked.args = { disabled: true, defaultChecked: true, label: "Disabled on" }
-
-// Parameters
-WithLabel.parameters = {
-  docs: {
-    description: {
-      story: "Pass a `label` prop to display text alongside the toggle.",
-    },
-  },
-}
-
-WithLabelAndMeta.parameters = {
-  docs: {
-    description: {
-      story: "The `meta` prop renders secondary descriptive text below the label.",
-    },
-  },
-}
-
-WithActiveText.parameters = {
-  docs: {
-    description: {
-      story:
-        "The `activeText` prop swaps the label when the toggle is on. Useful for showing context-sensitive state.",
-    },
-  },
-}
-
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: "Setting `disabled` reduces opacity and prevents interaction.",
-    },
-  },
-}
-
-// Decorators
-Default.decorators = [
-  Story => (
-    <div className="flex flex-wrap items-center gap-4">
-      <Story />
-    </div>
-  ),
-]
-
-Checked.decorators = [...Default.decorators]
-WithLabel.decorators = [...Default.decorators]
-WithLabelAndMeta.decorators = [...Default.decorators]
-WithActiveText.decorators = [...Default.decorators]
-Disabled.decorators = [...Default.decorators]
-DisabledChecked.decorators = [...Default.decorators]
-
-export { Default, Checked, WithLabel, WithLabelAndMeta, WithActiveText, Disabled, DisabledChecked }
-export default meta

package/src/components/Toggle/Toggle.tsx

@@ -1,69 +0,0 @@
-import React from "react"
-
-// Utils
-import { clsx } from "clsx"
-
-// Params
-interface ToggleProps extends Omit<React.ComponentPropsWithRef<"input">, "size" | "children"> {
-  /** Label text displayed next to the Toggle. */
-  label?: string
-  /** Secondary text displayed below the label. */
-  meta?: string
-  /** Alternate label shown when the toggle is on. Falls back to label if not set. */
-  activeText?: string
-}
-
-/*
-
-
-
-
-*/
-
-const Toggle: React.FC<ToggleProps> = ({
-  className,
-  label,
-  meta,
-  activeText,
-  disabled,
-  ref,
-  ...rest
-}) => {
-  return (
-    <label
-      className={clsx(
-        "group/toggle flex cursor-pointer items-start gap-3",
-        disabled && "pointer-events-none opacity-40",
-        className,
-      )}
-    >
-      <input
-        ref={ref}
-        type="checkbox"
-        role="switch"
-        className="peer absolute opacity-0"
-        aria-label={label ?? "Toggle"}
-        disabled={disabled}
-        {...rest}
-      />
-      <div className="relative h-6 w-12 shrink-0 rounded-full bg-neutral-100/20 p-1 transition-colors group-hover/toggle:bg-neutral-100/30 group-has-checked/toggle:bg-lime-180/20 group-has-checked/toggle:group-hover/toggle:bg-lime-180/30 peer-focus-visible:ring-2 peer-focus-visible:ring-teal-100 peer-focus-visible:ring-offset-1">
-        <div className="absolute left-1 size-4 rounded-full bg-white transition-all group-active/toggle:w-5 group-has-checked/toggle:left-7 group-has-checked/toggle:bg-lime-180 group-has-checked/toggle:group-active/toggle:left-6!" />
-      </div>
-      {(activeText || label || meta) && (
-        <div className="flex flex-1 flex-col gap-0.5 select-none">
-          {(activeText || label) && (
-            <span className="text-sm/snug font-medium text-neutral-100">
-              <span className="hidden group-has-checked/toggle:inline">{activeText || label}</span>
-              <span className="inline group-has-checked/toggle:hidden">{label}</span>
-            </span>
-          )}
-          {meta && <span className="text-xs/snug text-neutral-50">{meta}</span>}
-        </div>
-      )}
-    </label>
-  )
-}
-
-Toggle.displayName = "Toggle"
-export default Toggle
-export type { ToggleProps }

package/src/components/Toggle/index.ts

@@ -1 +0,0 @@
-export { default, type ToggleProps } from "./Toggle"

package/src/hooks/index.ts

@@ -1,6 +0,0 @@
-export { useCombinedRefs } from "./useCombinedRefs"
-export { useEventListener } from "./useEventListener"
-export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"
-export { useLockBodyScroll } from "./useLockBodyScroll"
-export { useOnClickOutside } from "./useOnClickOutside"
-export { useFocusTrap } from "./useFocusTrap"

package/src/hooks/useCombinedRefs.ts

@@ -1,37 +0,0 @@
-"use client"
-
-import { useRef, useEffect } from "react"
-
-/**
- * useCombinedRefs
- *
- * @template T
- *
- * @param {any[]} refs
- * @returns {React.RefObject<T>}
- */
-
-/*
- */
-
-const useCombinedRefs = <T>(...refs: any[]): React.RefObject<T | null> => {
-  // Refs
-  const targetRef = useRef<T | null>(null)
-
-  // Effects
-  useEffect(() => {
-    refs.forEach(ref => {
-      if (!ref) return
-
-      if (typeof ref === "function") {
-        ref(targetRef.current)
-      } else {
-        ref.current = targetRef.current
-      }
-    })
-  }, [refs])
-
-  return targetRef
-}
-
-export { useCombinedRefs }

package/src/hooks/useEventListener.ts

@@ -1,87 +0,0 @@
-"use client"
-
-import { RefObject, useEffect, useRef } from "react"
-
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"
-
-// MediaQueryList Event based useEventListener interface
-function useEventListener<K extends keyof MediaQueryListEventMap>(
-  eventName: K,
-  handler: (event: MediaQueryListEventMap[K]) => void,
-  element: RefObject<MediaQueryList>,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-// Window Event based useEventListener interface
-function useEventListener<K extends keyof WindowEventMap>(
-  eventName: K,
-  handler: (event: WindowEventMap[K]) => void,
-  element?: undefined,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-// Element Event based useEventListener interface
-function useEventListener<
-  K extends keyof HTMLElementEventMap,
-  T extends HTMLElement = HTMLDivElement,
->(
-  eventName: K,
-  handler: (event: HTMLElementEventMap[K]) => void,
-  element: RefObject<T>,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-// Document Event based useEventListener interface
-function useEventListener<K extends keyof DocumentEventMap>(
-  eventName: K,
-  handler: (event: DocumentEventMap[K]) => void,
-  element: RefObject<Document>,
-  options?: boolean | AddEventListenerOptions,
-): void
-
-/*
-
-
-
-
-*/
-
-function useEventListener<
-  KW extends keyof WindowEventMap,
-  KH extends keyof HTMLElementEventMap,
-  KM extends keyof MediaQueryListEventMap,
-  T extends HTMLElement | MediaQueryList | void = void,
->(
-  eventName: KW | KH | KM,
-  handler: (
-    event: WindowEventMap[KW] | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | Event,
-  ) => void,
-  element?: RefObject<T>,
-  options?: boolean | AddEventListenerOptions,
-): void {
-  // Create a ref that stores handler
-  const savedHandler = useRef(handler)
-
-  useIsomorphicLayoutEffect(() => {
-    savedHandler.current = handler
-  }, [handler])
-
-  useEffect(() => {
-    // Define the listening target
-    const targetElement: T | Window = element?.current ?? window
-
-    if (!(targetElement && targetElement.addEventListener)) return
-
-    // Create event listener that calls handler function stored in ref
-    const listener: typeof handler = event => savedHandler.current(event)
-
-    targetElement.addEventListener(eventName, listener, options)
-
-    // Remove event listener on cleanup
-    return () => {
-      targetElement.removeEventListener(eventName, listener, options)
-    }
-  }, [eventName, element, options])
-}
-
-export { useEventListener }

package/src/hooks/useFocusTrap/createAriaHider.ts

@@ -1,62 +0,0 @@
-interface Value {
-  node: HTMLElement
-  ariaHidden: string | null
-}
-
-/*
-
-
-
-
-*/
-
-const createAriaHider = (
-  containerNode: HTMLElement,
-  selector: string = "body > :not(script)",
-): (() => void) => {
-  const id = `tribe-${Math.random().toString(36).slice(2, 11)}`
-
-  const rootNodes: (Value | undefined)[] = Array.from<HTMLElement>(
-    document?.querySelectorAll(selector),
-  ).map(node => {
-    if (node?.shadowRoot?.contains(containerNode) || node.contains(containerNode)) {
-      return undefined
-    }
-
-    const ariaHidden = node.getAttribute("aria-hidden")
-    const prevAriaHidden = node.getAttribute("data-hidden")
-    const prevFocusId = node.getAttribute("data-focus-id")
-
-    node.setAttribute("data-focus-id", id)
-
-    if (ariaHidden === null || ariaHidden === "false") {
-      node.setAttribute("aria-hidden", "true")
-    } else if (!prevAriaHidden && !prevFocusId) {
-      node.setAttribute("data-hidden", ariaHidden)
-    }
-
-    return {
-      node,
-      ariaHidden: prevAriaHidden || null,
-    }
-  })
-
-  return () => {
-    rootNodes.forEach(item => {
-      if (!item || id !== item.node.getAttribute("data-focus-id")) {
-        return
-      }
-
-      if (item.ariaHidden === null) {
-        item.node.removeAttribute("aria-hidden")
-      } else {
-        item.node.setAttribute("aria-hidden", item.ariaHidden)
-      }
-
-      item.node.removeAttribute("data-focus-id")
-      item.node.removeAttribute("data-hidden")
-    })
-  }
-}
-
-export { createAriaHider }

package/src/hooks/useFocusTrap/index.ts

@@ -1 +0,0 @@
-export { useFocusTrap } from "./useFocusTrap"