@usace/groundwork 1.0.2 → 1.0.4

package/lib/catalyst/switch.jsx

@@ -1,203 +0,0 @@
-import { Field as HeadlessField, Switch as HeadlessSwitch } from '@headlessui/react'
-import { clsx } from 'clsx'
-
-export function SwitchGroup({ className, ...props }) {
-  return (
-    <div
-      data-slot="control"
-      {...props}
-      className={clsx(
-        className,
-
-        // Basic groups
-        'space-y-3 [&_[data-slot=label]]:font-normal',
-
-        // With descriptions
-        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
-      )}
-    />
-  )
-}
-
-export function SwitchField({ className, ...props }) {
-  return (
-    <HeadlessField
-      data-slot="field"
-      {...props}
-      className={clsx(
-        className,
-
-        // Base layout
-        'grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]',
-
-        // Control layout
-        '[&>[data-slot=control]]:col-start-2 [&>[data-slot=control]]:self-center',
-
-        // Label layout
-        '[&>[data-slot=label]]:col-start-1 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
-
-        // Description layout
-        '[&>[data-slot=description]]:col-start-1 [&>[data-slot=description]]:row-start-2',
-
-        // With description
-        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
-      )}
-    />
-  )
-}
-
-const colors = {
-  'dark/zinc': [
-    '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white/25%)]',
-    '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:theme(colors.zinc.700/90%)]',
-  ],
-  'dark/white': [
-    '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white)]',
-    '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:theme(colors.zinc.900)]',
-  ],
-  dark: [
-    '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:theme(colors.white/15%)]',
-    '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white]',
-  ],
-  zinc: [
-    '[--switch-bg-ring:theme(colors.zinc.700/90%)] [--switch-bg:theme(colors.zinc.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.zinc.700/90%)]',
-  ],
-  white: [
-    '[--switch-bg-ring:theme(colors.black/15%)] [--switch-bg:white] dark:[--switch-bg-ring:transparent]',
-    '[--switch-shadow:theme(colors.black/10%)] [--switch-ring:transparent] [--switch:theme(colors.zinc.950)]',
-  ],
-  red: [
-    '[--switch-bg-ring:theme(colors.red.700/90%)] [--switch-bg:theme(colors.red.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.red.700/90%)] [--switch-shadow:theme(colors.red.900/20%)]',
-  ],
-  orange: [
-    '[--switch-bg-ring:theme(colors.orange.600/90%)] [--switch-bg:theme(colors.orange.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.orange.600/90%)] [--switch-shadow:theme(colors.orange.900/20%)]',
-  ],
-  amber: [
-    '[--switch-bg-ring:theme(colors.amber.500/80%)] [--switch-bg:theme(colors.amber.400)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.amber.950)]',
-  ],
-  yellow: [
-    '[--switch-bg-ring:theme(colors.yellow.400/80%)] [--switch-bg:theme(colors.yellow.300)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.yellow.950)]',
-  ],
-  lime: [
-    '[--switch-bg-ring:theme(colors.lime.400/80%)] [--switch-bg:theme(colors.lime.300)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.lime.950)]',
-  ],
-  green: [
-    '[--switch-bg-ring:theme(colors.green.700/90%)] [--switch-bg:theme(colors.green.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.green.700/90%)] [--switch-shadow:theme(colors.green.900/20%)]',
-  ],
-  emerald: [
-    '[--switch-bg-ring:theme(colors.emerald.600/90%)] [--switch-bg:theme(colors.emerald.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.emerald.600/90%)] [--switch-shadow:theme(colors.emerald.900/20%)]',
-  ],
-  teal: [
-    '[--switch-bg-ring:theme(colors.teal.700/90%)] [--switch-bg:theme(colors.teal.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.teal.700/90%)] [--switch-shadow:theme(colors.teal.900/20%)]',
-  ],
-  cyan: [
-    '[--switch-bg-ring:theme(colors.cyan.400/80%)] [--switch-bg:theme(colors.cyan.300)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.cyan.950)]',
-  ],
-  sky: [
-    '[--switch-bg-ring:theme(colors.sky.600/80%)] [--switch-bg:theme(colors.sky.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.sky.600/80%)] [--switch-shadow:theme(colors.sky.900/20%)]',
-  ],
-  blue: [
-    '[--switch-bg-ring:theme(colors.blue.700/90%)] [--switch-bg:theme(colors.blue.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.blue.700/90%)] [--switch-shadow:theme(colors.blue.900/20%)]',
-  ],
-  indigo: [
-    '[--switch-bg-ring:theme(colors.indigo.600/90%)] [--switch-bg:theme(colors.indigo.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.indigo.600/90%)] [--switch-shadow:theme(colors.indigo.900/20%)]',
-  ],
-  violet: [
-    '[--switch-bg-ring:theme(colors.violet.600/90%)] [--switch-bg:theme(colors.violet.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.violet.600/90%)] [--switch-shadow:theme(colors.violet.900/20%)]',
-  ],
-  purple: [
-    '[--switch-bg-ring:theme(colors.purple.600/90%)] [--switch-bg:theme(colors.purple.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.purple.600/90%)] [--switch-shadow:theme(colors.purple.900/20%)]',
-  ],
-  fuchsia: [
-    '[--switch-bg-ring:theme(colors.fuchsia.600/90%)] [--switch-bg:theme(colors.fuchsia.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.fuchsia.600/90%)] [--switch-shadow:theme(colors.fuchsia.900/20%)]',
-  ],
-  pink: [
-    '[--switch-bg-ring:theme(colors.pink.600/90%)] [--switch-bg:theme(colors.pink.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.pink.600/90%)] [--switch-shadow:theme(colors.pink.900/20%)]',
-  ],
-  rose: [
-    '[--switch-bg-ring:theme(colors.rose.600/90%)] [--switch-bg:theme(colors.rose.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.rose.600/90%)] [--switch-shadow:theme(colors.rose.900/20%)]',
-  ],
-}
-
-export function Switch({ color = 'dark/zinc', className, children, ...props }) {
-  return (
-    <HeadlessSwitch
-      data-slot="control"
-      className={clsx(
-        className,
-
-        // Base styles
-        'group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8',
-
-        // Transitions
-        'transition duration-0 ease-in-out data-[changing]:duration-200',
-
-        // Outline and background color in forced-colors mode so switch is still visible
-        'forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]',
-
-        // Unchecked
-        'bg-zinc-200 ring-1 ring-inset ring-black/5 dark:bg-white/5 dark:ring-white/15',
-
-        // Checked
-        'data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] dark:data-[checked]:bg-[--switch-bg] dark:data-[checked]:ring-[--switch-bg-ring]',
-
-        // Focus
-        'focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
-
-        // Hover
-        'data-[hover]:data-[checked]:ring-[--switch-bg-ring] data-[hover]:ring-black/15',
-        'dark:data-[hover]:data-[checked]:ring-[--switch-bg-ring] dark:data-[hover]:ring-white/25',
-
-        // Disabled
-        'data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:data-[checked]:ring-black/5',
-        'dark:data-[disabled]:bg-white/15 dark:data-[disabled]:data-[checked]:bg-white/15 dark:data-[disabled]:data-[checked]:ring-white/15',
-
-        // Color specific styles
-        colors[color]
-      )}
-      {...props}
-    >
-      <span
-        aria-hidden="true"
-        className={clsx(
-          // Basic layout
-          'pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5',
-
-          // Transition
-          'translate-x-0 transition duration-200 ease-in-out',
-
-          // Invisible border so the switch is still visible in forced-colors mode
-          'border border-transparent',
-
-          // Unchecked
-          'bg-white shadow ring-1 ring-black/5',
-
-          // Checked
-          'group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring]',
-          'group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3',
-
-          // Disabled
-          'group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5'
-        )}
-      />
-    </HeadlessSwitch>
-  )
-}

package/lib/catalyst/textarea.jsx

@@ -1,59 +0,0 @@
-import { Textarea as HeadlessTextarea } from '@headlessui/react'
-import { clsx } from 'clsx'
-import { forwardRef } from 'react'
-
-export const Textarea = forwardRef(function Textarea({ className, resizable = true, ...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',
-      ])}
-    >
-      <HeadlessTextarea
-        ref={ref}
-        className={clsx([
-          // Basic layout
-          'relative block h-full 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-600 data-[invalid]:data-[hover]:dark:border-red-600',
-
-          // Disabled state
-          'disabled:border-zinc-950/20 disabled:dark:border-white/15 disabled:dark:bg-white/[2.5%] dark:data-[hover]:disabled:border-white/15',
-
-          // Resizable
-          resizable ? 'resize-y' : 'resize-none',
-        ])}
-        {...props}
-      />
-    </span>
-  )
-})

package/lib/components/breadcrumbs.jsx

@@ -1,46 +0,0 @@
-import clsx from "clsx";
-import { MdHome } from "react-icons/md";
-import { VscChevronRight } from "react-icons/vsc";
-
-function BreadcrumbItem({ className, href, text }) {
-  const cls = clsx(
-    "text-gray-300 hover:text-gray-500 last:text-gray-900",
-    className
-  );
-  return (
-    <li className={cls}>
-      <div className="flex items-center">
-        <VscChevronRight
-          size={18}
-          aria-hidden="true"
-          color="rgb(156 163 175)"
-        />
-        <a href={href} className="ml-2  hover:underline">
-          {text}
-        </a>
-      </div>
-    </li>
-  );
-}
-
-function Breadcrumbs({ className, children }) {
-  const cls = clsx("flex items-center justify-between py-4", className);
-  return (
-    <nav className={cls}>
-      <ol className="flex items-center space-x-2">
-        <li>
-          <div>
-            <a href="/" className="text-gray-300 hover:text-gray-500">
-              <MdHome size={22} />
-              <span className="sr-only">Home</span>
-            </a>
-          </div>
-        </li>
-        {children}
-      </ol>
-    </nav>
-  );
-}
-
-export default Breadcrumbs;
-export { Breadcrumbs, BreadcrumbItem };

package/lib/components/button.jsx

@@ -1,219 +0,0 @@
-import { Button as HeadlessButton } from "@headlessui/react";
-import { clsx } from "clsx";
-import React from "react";
-import { Link } from "./link";
-
-const styles = {
-  base: [
-    // Base
-    "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
-
-    // Sizing
-    "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)] sm:text-sm/6",
-
-    // Focus
-    "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
-
-    // Disabled
-    "data-[disabled]:opacity-50",
-
-    // Icon
-    "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
-  ],
-  solid: [
-    // Optical border, implemented as the button background to avoid corner artifacts
-    "border-transparent bg-[--btn-border]",
-
-    // Dark mode: border is rendered on `after` so background is set to button background
-    "dark:bg-[--btn-bg]",
-
-    // Button background, implemented as foreground layer to stack on top of pseudo-border layer
-    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]",
-
-    // Drop shadow, applied to the inset `before` layer so it blends with the border
-    "before:shadow",
-
-    // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-    "dark:before:hidden",
-
-    // Dark mode: Subtle white outline is applied using a border
-    "dark:border-white/5",
-
-    // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
-    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]",
-
-    // Inner highlight shadow
-    "after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]",
-
-    // White overlay on hover
-    "after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]",
-
-    // Dark mode: `after` layer expands to cover entire button
-    "dark:after:-inset-px dark:after:rounded-lg",
-
-    // Disabled
-    "before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
-  ],
-  outline: [
-    // Base
-    "border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]",
-
-    // Dark mode
-    "dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5",
-
-    // Icon
-    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-  ],
-  plain: [
-    // Base
-    "border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5",
-
-    // Dark mode
-    "dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10",
-
-    // Icon
-    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-  ],
-  colors: {
-    "dark/zinc": [
-      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
-      "dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
-    ],
-    light: [
-      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
-      "dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
-      "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-    ],
-    "dark/white": [
-      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
-      "dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
-    ],
-    dark: [
-      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
-      "dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
-    ],
-    white: [
-      "text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
-      "dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]",
-    ],
-    zinc: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]",
-      "dark:[--btn-hover-overlay:theme(colors.white/5%)]",
-      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
-    ],
-    indigo: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]",
-      "[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]",
-    ],
-    cyan: [
-      "text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]",
-      "[--btn-icon:theme(colors.cyan.500)]",
-    ],
-    red: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]",
-      "[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]",
-    ],
-    orange: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]",
-      "[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]",
-    ],
-    amber: [
-      "text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]",
-      "[--btn-icon:theme(colors.amber.600)]",
-    ],
-    yellow: [
-      "text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]",
-      "[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]",
-    ],
-    lime: [
-      "text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]",
-      "[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]",
-    ],
-    green: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    emerald: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    teal: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    sky: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]",
-      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
-    ],
-    blue: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]",
-      "[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]",
-    ],
-    violet: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]",
-      "[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]",
-    ],
-    purple: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]",
-      "[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]",
-    ],
-    fuchsia: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]",
-      "[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]",
-    ],
-    pink: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]",
-      "[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]",
-    ],
-    rose: [
-      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]",
-      "[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]",
-    ],
-  },
-};
-
-export const Button = React.forwardRef(function Button(
-  { color, outline, plain, className, children, ...props },
-  ref
-) {
-  let classes = clsx(
-    styles.base,
-    outline
-      ? styles.outline
-      : plain
-      ? styles.plain
-      : clsx(styles.solid, styles.colors[color ?? "dark/zinc"]),
-    className
-  );
-
-  return "href" in props ? (
-    <Link {...props} className={classes} ref={ref}>
-      <TouchTarget>{children}</TouchTarget>
-    </Link>
-  ) : (
-    <HeadlessButton
-      {...props}
-      className={clsx(classes, "cursor-default")}
-      ref={ref}
-    >
-      <TouchTarget>{children}</TouchTarget>
-    </HeadlessButton>
-  );
-});
-
-/* Expand the hit area to at least 44×44px on touch devices */
-export function TouchTarget({ children }) {
-  return (
-    <>
-      {children}
-      <span
-        className="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
-        aria-hidden="true"
-      />
-    </>
-  );
-}

package/lib/components/display/headings.jsx

@@ -1,39 +0,0 @@
-import clsx from "clsx";
-
-function H1({ className, children, ...props }) {
-  const cls = clsx("text-3xl font-bold", className);
-  return (
-    <h1 className={cls} {...props}>
-      {children}
-    </h1>
-  );
-}
-
-function H2({ className, children, ...props }) {
-  const cls = clsx("text-2xl font-bold", className);
-  return (
-    <h2 className={cls} {...props}>
-      {children}
-    </h2>
-  );
-}
-
-function H3({ className, children, ...props }) {
-  const cls = clsx("text-xl font-bold", className);
-  return (
-    <h3 className={cls} {...props}>
-      {children}
-    </h3>
-  );
-}
-
-function H4({ className, children, ...props }) {
-  const cls = clsx("text-lg font-bold", className);
-  return (
-    <h4 className={cls} {...props}>
-      {children}
-    </h4>
-  );
-}
-
-export { H1, H2, H3, H4 };

package/lib/components/display/text.jsx

@@ -1,48 +0,0 @@
-import { clsx } from "clsx";
-import { Link } from "../link";
-
-export function Text({ className, ...props }) {
-  return (
-    <p
-      {...props}
-      data-slot="text"
-      className={clsx(
-        className,
-        "text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400"
-      )}
-    />
-  );
-}
-
-export function TextLink({ className, ...props }) {
-  return (
-    <Link
-      {...props}
-      className={clsx(
-        className,
-        "text-zinc-950 underline decoration-zinc-950/50 data-[hover]:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-[hover]:decoration-white"
-      )}
-    />
-  );
-}
-
-export function Strong({ className, ...props }) {
-  return (
-    <strong
-      {...props}
-      className={clsx(className, "font-medium text-zinc-950 dark:text-white")}
-    />
-  );
-}
-
-export function Code({ className, ...props }) {
-  return (
-    <code
-      {...props}
-      className={clsx(
-        className,
-        "rounded border border-zinc-950/10 bg-zinc-950/[2.5%] px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white"
-      )}
-    />
-  );
-}

package/lib/components/hero.jsx

@@ -1,51 +0,0 @@
-import { Container } from "./layout/container";
-/**
- * @name Hero
- * @description A full width, full height hero component with a title, subtitle, and optional image.
- * @param {string} title - The title of the hero.
- * @param {string} subtitle - The subtitle of the hero.
- * @param {string} image - The image to display in the hero.
- * @param {string} alt - The alt text for the image.
- * @param {ReactNode} children - Custom children to display in the hero.
- * @example
- * <Hero
- *  title="Groundwork"
- *  subtitle="React Component Library"
- *  image="/nww-lucky-peak-dam.jpg"
- *  alt="Lucky Peak Dam"
- * >
- */
-function Hero({ title, subtitle, image, alt, children }) {
-  return (
-    <div className="relative">
-      <div className="h-56 w-full overflow-clip bg-zinc-950 md:h-1/5 md:max-h-[500px]">
-        <img
-          src={image}
-          alt={alt}
-          className="object-cover object-center w-full h-full"
-        />
-      </div>
-      <div className="absolute inset-0 bg-zinc-950/50" />
-      {children && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          {children}
-        </div>
-      )}
-      {title && (
-        <Container className="relative">
-          <div className="absolute bottom-0 left-0 max-w-7xl mx-auto px-4">
-            <div className="pb-8">
-              <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
-                {title}
-              </h1>
-              <p className="mt-1 text-xl text-zinc-200">{subtitle}</p>
-            </div>
-          </div>
-        </Container>
-      )}
-    </div>
-  );
-}
-
-export default Hero;
-export { Hero };