@usace/groundwork 1.0.2 → 1.0.4

package/lib/catalyst/checkbox.jsx

@@ -1,160 +0,0 @@
-import { Checkbox as HeadlessCheckbox, Field as HeadlessField } from '@headlessui/react'
-import { clsx } from 'clsx'
-
-export function CheckboxGroup({ className, ...props }) {
-  return (
-    <div
-      data-slot="control"
-      {...props}
-      className={clsx(
-        className,
-
-        // Basic groups
-        'space-y-3',
-
-        // With descriptions
-        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
-      )}
-    />
-  )
-}
-
-export function CheckboxField({ className, ...props }) {
-  return (
-    <HeadlessField
-      data-slot="field"
-      {...props}
-      className={clsx(
-        className,
-
-        // Base layout
-        'grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
-
-        // Control layout
-        '[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center',
-
-        // Label layout
-        '[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
-
-        // Description layout
-        '[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2',
-
-        // With description
-        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
-      )}
-    />
-  )
-}
-
-const base = [
-  // Basic layout
-  'relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4',
-
-  // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-  'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow',
-
-  // Background color when checked
-  'before:group-data-[checked]:bg-[--checkbox-checked-bg]',
-
-  // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-  'dark:before:hidden',
-
-  // Background color applied to control in dark mode
-  'dark:bg-white/5 dark:group-data-[checked]:bg-[--checkbox-checked-bg]',
-
-  // Border
-  'border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--checkbox-checked-border]',
-  'dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30',
-
-  // Inner highlight shadow
-  'after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_theme(colors.white/15%)]',
-  'dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-[checked]:after:block',
-
-  // Focus ring
-  'group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500',
-
-  // Disabled state
-  'group-data-[disabled]:opacity-50',
-  'group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--checkbox-check:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent',
-  'dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--checkbox-check:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden',
-
-  // Forced colors mode
-  'forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]',
-  'dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]',
-]
-
-const colors = {
-  'dark/zinc': [
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
-    'dark:[--checkbox-checked-bg:theme(colors.zinc.600)]',
-  ],
-  'dark/white': [
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
-    'dark:[--checkbox-check:theme(colors.zinc.900)] dark:[--checkbox-checked-bg:theme(colors.white)] dark:[--checkbox-checked-border:theme(colors.zinc.950/15%)]',
-  ],
-  white:
-    '[--checkbox-check:theme(colors.zinc.900)] [--checkbox-checked-bg:theme(colors.white)] [--checkbox-checked-border:theme(colors.zinc.950/15%)]',
-  dark: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
-  zinc: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.600)] [--checkbox-checked-border:theme(colors.zinc.700/90%)]',
-  red: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.red.600)] [--checkbox-checked-border:theme(colors.red.700/90%)]',
-  orange:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.orange.500)] [--checkbox-checked-border:theme(colors.orange.600/90%)]',
-  amber:
-    '[--checkbox-check:theme(colors.amber.950)] [--checkbox-checked-bg:theme(colors.amber.400)] [--checkbox-checked-border:theme(colors.amber.500/80%)]',
-  yellow:
-    '[--checkbox-check:theme(colors.yellow.950)] [--checkbox-checked-bg:theme(colors.yellow.300)] [--checkbox-checked-border:theme(colors.yellow.400/80%)]',
-  lime: '[--checkbox-check:theme(colors.lime.950)] [--checkbox-checked-bg:theme(colors.lime.300)] [--checkbox-checked-border:theme(colors.lime.400/80%)]',
-  green:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.green.600)] [--checkbox-checked-border:theme(colors.green.700/90%)]',
-  emerald:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.emerald.600)] [--checkbox-checked-border:theme(colors.emerald.700/90%)]',
-  teal: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.teal.600)] [--checkbox-checked-border:theme(colors.teal.700/90%)]',
-  cyan: '[--checkbox-check:theme(colors.cyan.950)] [--checkbox-checked-bg:theme(colors.cyan.300)] [--checkbox-checked-border:theme(colors.cyan.400/80%)]',
-  sky: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.sky.500)] [--checkbox-checked-border:theme(colors.sky.600/80%)]',
-  blue: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.blue.600)] [--checkbox-checked-border:theme(colors.blue.700/90%)]',
-  indigo:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.indigo.500)] [--checkbox-checked-border:theme(colors.indigo.600/90%)]',
-  violet:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.violet.500)] [--checkbox-checked-border:theme(colors.violet.600/90%)]',
-  purple:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.purple.500)] [--checkbox-checked-border:theme(colors.purple.600/90%)]',
-  fuchsia:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.fuchsia.500)] [--checkbox-checked-border:theme(colors.fuchsia.600/90%)]',
-  pink: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.pink.500)] [--checkbox-checked-border:theme(colors.pink.600/90%)]',
-  rose: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.rose.500)] [--checkbox-checked-border:theme(colors.rose.600/90%)]',
-}
-
-export function Checkbox({ color = 'dark/zinc', className, ...props }) {
-  return (
-    <HeadlessCheckbox
-      data-slot="control"
-      className={clsx(className, 'group inline-flex focus:outline-none')}
-      {...props}
-    >
-      <span className={clsx([base, colors[color]])}>
-        <svg
-          className="size-4 stroke-[--checkbox-check] opacity-0 group-data-[checked]:opacity-100 sm:h-3.5 sm:w-3.5"
-          viewBox="0 0 14 14"
-          fill="none"
-        >
-          {/* Checkmark icon */}
-          <path
-            className="opacity-100 group-data-[indeterminate]:opacity-0"
-            d="M3 8L6 11L11 3.5"
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          {/* Indeterminate icon */}
-          <path
-            className="opacity-0 group-data-[indeterminate]:opacity-100"
-            d="M3 7H11"
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </span>
-    </HeadlessCheckbox>
-  )
-}

package/lib/catalyst/dialog.jsx

@@ -1,101 +0,0 @@
-import {
-  Description as HeadlessDescription,
-  Dialog as HeadlessDialog,
-  DialogPanel as HeadlessDialogPanel,
-  DialogTitle as HeadlessDialogTitle,
-  Transition as HeadlessTransition,
-  TransitionChild as HeadlessTransitionChild,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import { Fragment } from 'react'
-import { Text } from './text'
-
-const sizes = {
-  xs: 'sm:max-w-xs',
-  sm: 'sm:max-w-sm',
-  md: 'sm:max-w-md',
-  lg: 'sm:max-w-lg',
-  xl: 'sm:max-w-xl',
-  '2xl': 'sm:max-w-2xl',
-  '3xl': 'sm:max-w-3xl',
-  '4xl': 'sm:max-w-4xl',
-  '5xl': 'sm:max-w-5xl',
-}
-
-export function Dialog({ open, onClose, size = 'lg', className, children, ...props }) {
-  return (
-    <HeadlessTransition appear as={Fragment} show={open} {...props}>
-      <HeadlessDialog onClose={onClose}>
-        <HeadlessTransitionChild
-          as={Fragment}
-          enter="ease-out duration-100"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 focus:outline-0 sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" />
-        </HeadlessTransitionChild>
-
-        <HeadlessTransitionChild
-          className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0"
-          enter="ease-out duration-100"
-          enterFrom="opacity-0 translate-y-12 sm:translate-y-0"
-          enterTo="opacity-100 translate-y-0"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-12 sm:translate-y-0"
-        >
-          <div className="grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4">
-            <HeadlessTransitionChild
-              as={HeadlessDialogPanel}
-              className={clsx(
-                className,
-                sizes[size],
-                'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-zinc-950/10 [--gutter:theme(spacing.8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
-              )}
-              enter="ease-out duration-100"
-              enterFrom="sm:scale-95"
-              enterTo="sm:scale-100"
-              leave="ease-in duration-100"
-              leaveFrom="sm:scale-100"
-              leaveTo="sm:scale-100"
-            >
-              {children}
-            </HeadlessTransitionChild>
-          </div>
-        </HeadlessTransitionChild>
-      </HeadlessDialog>
-    </HeadlessTransition>
-  )
-}
-
-export function DialogTitle({ className, ...props }) {
-  return (
-    <HeadlessDialogTitle
-      {...props}
-      className={clsx(className, 'text-balance text-lg/6 font-semibold text-zinc-950 sm:text-base/6 dark:text-white')}
-    />
-  )
-}
-
-export function DialogDescription({ className, ...props }) {
-  return <HeadlessDescription as={Text} {...props} className={clsx(className, 'mt-2 text-pretty')} />
-}
-
-export function DialogBody({ className, ...props }) {
-  return <div {...props} className={clsx(className, 'mt-6')} />
-}
-
-export function DialogActions({ className, ...props }) {
-  return (
-    <div
-      {...props}
-      className={clsx(
-        className,
-        'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto'
-      )}
-    />
-  )
-}

package/lib/catalyst/dropdown.jsx

@@ -1,202 +0,0 @@
-"use client";
-
-import {
-  Description as HeadlessDescription,
-  Label as HeadlessLabel,
-  Menu as HeadlessMenu,
-  MenuButton as HeadlessMenuButton,
-  MenuHeading as HeadlessMenuHeading,
-  MenuItem as HeadlessMenuItem,
-  MenuItems as HeadlessMenuItems,
-  MenuSection as HeadlessMenuSection,
-  MenuSeparator as HeadlessMenuSeparator,
-  Transition as HeadlessTransition,
-} from "@headlessui/react";
-import clsx from "clsx";
-import { Fragment } from "react";
-import { Button } from "../components/button";
-import { Link } from "./link";
-
-export function Dropdown(props) {
-  return <HeadlessMenu {...props} />;
-}
-
-export function DropdownButton(props) {
-  return <HeadlessMenuButton as={Button} {...props} />;
-}
-
-export function DropdownMenu({ anchor = "bottom", ...props }) {
-  return (
-    <HeadlessTransition
-      as={Fragment}
-      leave="duration-100 ease-in"
-      leaveTo="opacity-0"
-    >
-      <HeadlessMenuItems
-        {...props}
-        anchor={{
-          to: anchor,
-          gap: "var(--anchor-gap)",
-          offset: "var(--anchor-offset)",
-          padding: "var(--anchor-padding)",
-        }}
-        className={clsx(
-          props.className,
-
-          // Anchor positioning
-          "[--anchor-gap:theme(spacing.2)] [--anchor-padding:theme(spacing.3)] data-[anchor~=end]:[--anchor-offset:4px] data-[anchor~=start]:[--anchor-offset:-4px]",
-
-          // Base styles
-          "isolate w-max rounded-xl p-1",
-
-          // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
-          "outline outline-1 outline-transparent focus:outline-none",
-
-          // Handle scrolling when menu won't fit in viewport
-          "overflow-y-auto",
-
-          // Popover background
-          "bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75",
-
-          // Shadows
-          "shadow-lg ring-1 ring-zinc-950/10 dark:ring-inset dark:ring-white/10",
-
-          // Define grid at the menu level if subgrid is supported
-          "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
-        )}
-      />
-    </HeadlessTransition>
-  );
-}
-
-export function DropdownItem(props) {
-  return (
-    <HeadlessMenuItem
-      as={props.href ? Link : "button"}
-      type={props.href ? undefined : "button"}
-      {...props}
-      className={clsx(
-        props.className,
-
-        // Base styles
-        "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-none sm:px-3 sm:py-1.5",
-
-        // Text styles
-        "text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
-
-        // Focus
-        "data-[focus]:bg-blue-500 data-[focus]:text-white",
-
-        // Disabled state
-        "data-[disabled]:opacity-50",
-
-        // Forced colors mode
-        "forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText] forced-colors:[&>[data-slot=icon]]:data-[focus]:text-[HighlightText]",
-
-        // Use subgrid when available but fallback to an explicit grid layout if not
-        "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid",
-
-        // Icon
-        "[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4",
-        "[&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:dark:text-white"
-      )}
-    />
-  );
-}
-
-export function DropdownHeader({ className, ...props }) {
-  return (
-    <div
-      {...props}
-      className={clsx(className, "col-span-5 px-3.5 pb-1 pt-2.5 sm:px-3")}
-    />
-  );
-}
-
-export function DropdownSection({ className, ...props }) {
-  return (
-    <HeadlessMenuSection
-      {...props}
-      className={clsx(
-        className,
-        // Define grid at the section level instead of the item level if subgrid is supported
-        "col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
-      )}
-    />
-  );
-}
-
-export function DropdownHeading({ className, ...props }) {
-  return (
-    <HeadlessMenuHeading
-      {...props}
-      className={clsx(
-        className,
-        "col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400"
-      )}
-    />
-  );
-}
-
-export function DropdownSeparator({ className, ...props }) {
-  return (
-    <HeadlessMenuSeparator
-      {...props}
-      className={clsx(
-        className,
-        "col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]"
-      )}
-    />
-  );
-}
-
-export function DropdownLabel({ className, ...props }) {
-  return (
-    <HeadlessLabel
-      {...props}
-      data-slot="label"
-      className={clsx(className, "col-start-2 row-start-1")}
-      {...props}
-    />
-  );
-}
-
-export function DropdownDescription({ className, ...props }) {
-  return (
-    <HeadlessDescription
-      data-slot="description"
-      {...props}
-      className={clsx(
-        className,
-        "col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-[focus]:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-[focus]:text-[HighlightText]"
-      )}
-    />
-  );
-}
-
-export function DropdownShortcut({ className, keys, ...props }) {
-  return (
-    <HeadlessDescription
-      as="kbd"
-      {...props}
-      className={clsx(
-        className,
-        "col-start-5 row-start-1 flex justify-self-end"
-      )}
-    >
-      {(Array.isArray(keys) ? keys : keys.split("")).map((char, index) => (
-        <kbd
-          key={index}
-          className={clsx([
-            "min-w-[2ch] text-center font-sans capitalize text-zinc-400 group-data-[focus]:text-white forced-colors:group-data-[focus]:text-[HighlightText]",
-
-            // Make sure key names that are longer than one character (like "Tab") have extra space
-            index > 0 && char.length > 1 && "pl-1",
-          ])}
-        >
-          {char}
-        </kbd>
-      ))}
-    </HeadlessDescription>
-  );
-}

package/lib/catalyst/fieldset.jsx

@@ -1,87 +0,0 @@
-import {
-  Description as HeadlessDescription,
-  Field as HeadlessField,
-  Fieldset as HeadlessFieldset,
-  Label as HeadlessLabel,
-  Legend as HeadlessLegend,
-} from '@headlessui/react'
-import clsx from 'clsx'
-
-export function Fieldset({ className, ...props }) {
-  return (
-    <HeadlessFieldset
-      {...props}
-      className={clsx(className, '[&>*+[data-slot=control]]:mt-6 [&>[data-slot=text]]:mt-1')}
-    />
-  )
-}
-
-export function Legend({ ...props }) {
-  return (
-    <HeadlessLegend
-      {...props}
-      data-slot="legend"
-      className={clsx(
-        props.className,
-        'text-base/6 font-semibold text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
-      )}
-    />
-  )
-}
-
-export function FieldGroup({ className, ...props }) {
-  return <div {...props} data-slot="control" className={clsx(className, 'space-y-8')} />
-}
-
-export function Field({ className, ...props }) {
-  return (
-    <HeadlessField
-      className={clsx(
-        className,
-        '[&>[data-slot=label]+[data-slot=control]]:mt-3',
-        '[&>[data-slot=label]+[data-slot=description]]:mt-1',
-        '[&>[data-slot=description]+[data-slot=control]]:mt-3',
-        '[&>[data-slot=control]+[data-slot=description]]:mt-3',
-        '[&>[data-slot=control]+[data-slot=error]]:mt-3',
-        '[&>[data-slot=label]]:font-medium'
-      )}
-      {...props}
-    />
-  )
-}
-
-export function Label({ className, ...props }) {
-  return (
-    <HeadlessLabel
-      {...props}
-      data-slot="label"
-      className={clsx(
-        className,
-        'select-none text-base/6 text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
-      )}
-    />
-  )
-}
-
-export function Description({ className, disabled, ...props }) {
-  return (
-    <HeadlessDescription
-      {...props}
-      data-slot="description"
-      className={clsx(
-        className,
-        'text-base/6 text-zinc-500 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-zinc-400'
-      )}
-    />
-  )
-}
-
-export function ErrorMessage({ className, disabled, ...props }) {
-  return (
-    <HeadlessDescription
-      {...props}
-      data-slot="error"
-      className={clsx(className, 'text-base/6 text-red-600 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-red-500')}
-    />
-  )
-}

package/lib/catalyst/input.jsx

@@ -1,78 +0,0 @@
-import { Input as HeadlessInput } from '@headlessui/react'
-import { clsx } from 'clsx'
-import { forwardRef } from 'react'
-
-const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
-
-export const Input = forwardRef(function Input({ className, ...props }, ref) {
-  return (
-    <span
-      data-slot="control"
-      className={clsx([
-        className,
-
-        // Basic layout
-        'relative block w-full',
-
-        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-        'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
-
-        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-        'dark:before:hidden',
-
-        // Focus ring
-        'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
-
-        // Disabled state
-        'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
-
-        // Invalid state
-        'before:has-[[data-invalid]]:shadow-red-500/10',
-      ])}
-    >
-      <HeadlessInput
-        ref={ref}
-        className={clsx([
-          // Date classes
-          props.type &&
-            dateTypes.includes(props.type) && [
-              '[&::-webkit-datetime-edit-fields-wrapper]:p-0',
-              '[&::-webkit-date-and-time-value]:min-h-[1.5em]',
-              '[&::-webkit-datetime-edit]:inline-flex',
-              '[&::-webkit-datetime-edit]:p-0',
-              '[&::-webkit-datetime-edit-year-field]:p-0',
-              '[&::-webkit-datetime-edit-month-field]:p-0',
-              '[&::-webkit-datetime-edit-day-field]:p-0',
-              '[&::-webkit-datetime-edit-hour-field]:p-0',
-              '[&::-webkit-datetime-edit-minute-field]:p-0',
-              '[&::-webkit-datetime-edit-second-field]:p-0',
-              '[&::-webkit-datetime-edit-millisecond-field]:p-0',
-              '[&::-webkit-datetime-edit-meridiem-field]:p-0',
-            ],
-
-          // Basic layout
-          'relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
-
-          // Typography
-          'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
-
-          // Border
-          'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
-
-          // Background color
-          'bg-transparent dark:bg-white/5',
-
-          // Hide default focus styles
-          'focus:outline-none',
-
-          // Invalid state
-          'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500',
-
-          // Disabled state
-          'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
-        ])}
-        {...props}
-      />
-    </span>
-  )
-})