npm - @usace/groundwork - Versions diffs - 1.0.1 - Mend

@usace/groundwork 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/.eslintrc.cjs +18 -0
package/.github/workflows/deploy-docs.yml +59 -0
package/.github/workflows/publish.yml +19 -0
package/README.md +5 -0
package/index.html +13 -0
package/lib/catalyst/alert.jsx +110 -0
package/lib/catalyst/avatar.jsx +64 -0
package/lib/catalyst/badge.jsx +72 -0
package/lib/catalyst/checkbox.jsx +160 -0
package/lib/catalyst/dialog.jsx +101 -0
package/lib/catalyst/dropdown.jsx +202 -0
package/lib/catalyst/fieldset.jsx +87 -0
package/lib/catalyst/input.jsx +78 -0
package/lib/catalyst/listbox.jsx +195 -0
package/lib/catalyst/pagination.jsx +75 -0
package/lib/catalyst/radio.jsx +144 -0
package/lib/catalyst/select.jsx +78 -0
package/lib/catalyst/switch.jsx +203 -0
package/lib/catalyst/textarea.jsx +59 -0
package/lib/components/breadcrumbs.jsx +46 -0
package/lib/components/button.jsx +219 -0
package/lib/components/display/headings.jsx +39 -0
package/lib/components/display/text.jsx +48 -0
package/lib/components/hero.jsx +51 -0
package/lib/components/layout/container.jsx +13 -0
package/lib/components/layout/usace-box.jsx +26 -0
package/lib/components/link.jsx +18 -0
package/lib/components/table.jsx +146 -0
package/lib/composite/footer/essayons.jsx +12 -0
package/lib/composite/footer/footer-links.jsx +33 -0
package/lib/composite/footer/index.jsx +148 -0
package/lib/composite/footer/logo-banner.jsx +55 -0
package/lib/composite/footer/social-links.jsx +60 -0
package/lib/composite/header/index.jsx +83 -0
package/lib/composite/header/navbar-links.jsx +113 -0
package/lib/composite/header/usa-banner/USABanner.jsx +114 -0
package/lib/composite/header/usa-banner/usa-banner.css +220 -0
package/lib/composite/site-wrapper/index.jsx +52 -0
package/lib/index.jsx +19 -0
package/package.json +39 -0
package/postcss.config.js +6 -0
package/public/Magnifying_glass_icon.svg +5 -0
package/public/armystar-logo-rb.svg +4 -0
package/public/cwbi-logo.png +0 -0
package/public/essayonscrest.png +0 -0
package/public/icon-dot-gov.svg +1 -0
package/public/icon-https.svg +1 -0
package/public/nww-lucky-peak-dam.jpg +0 -0
package/public/rsgis-logo.png +0 -0
package/public/us_flag_small.png +0 -0
package/public/usace-logo-color.svg +1 -0
package/src/App.jsx +38 -0
package/src/app-bundles/index.js +4 -0
package/src/app-bundles/route-bundle.js +36 -0
package/src/app-components/code-example.jsx +17 -0
package/src/app-components/copy-button.jsx +32 -0
package/src/app-components/props-table.jsx +43 -0
package/src/app-components/sub-site-banner.jsx +15 -0
package/src/app-pages/documentation/_docs-page.jsx +31 -0
package/src/app-pages/documentation/_docs-sidebar.jsx +111 -0
package/src/app-pages/documentation/_template.jsx +55 -0
package/src/app-pages/documentation/app-shell/index.jsx +39 -0
package/src/app-pages/documentation/app-shell/site-wrapper.jsx +190 -0
package/src/app-pages/documentation/buttons/index.jsx +170 -0
package/src/app-pages/documentation/index.jsx +57 -0
package/src/app-pages/documentation/layout/container.jsx +68 -0
package/src/app-pages/documentation/layout/index.jsx +52 -0
package/src/app-pages/documentation/layout/usace-box.jsx +76 -0
package/src/app-pages/documentation/navigation/breadcrumbs.jsx +119 -0
package/src/app-pages/documentation/navigation/index.jsx +31 -0
package/src/app-pages/documentation/types/index.jsx +31 -0
package/src/app-pages/documentation/types/link.jsx +72 -0
package/src/app-pages/home.jsx +71 -0
package/src/index.css +3 -0
package/src/main.jsx +18 -0
package/tailwind.config.js +31 -0
package/vite.config.js +46 -0

package/.eslintrc.cjs ADDED Viewed

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/.github/workflows/deploy-docs.yml ADDED Viewed

@@ -0,0 +1,59 @@
+name: Deploy to GH Pages
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Get Package Version
+        id: get_version
+        uses: stevenbenitez/get-package-version-action@v1
+      - name: Install dependencies
+        run: npm ci
+      - name: Build project
+        env:
+          VITE_HOMEPAGE: "https://usace.github.io/groundwork"
+        run: npm run build-docs
+      - name: Upload production-ready build files
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./docs
+  # Deploy job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4 # or the latest "vX.X.X" version tag for this action

package/.github/workflows/publish.yml ADDED Viewed

@@ -0,0 +1,19 @@
+name: Publish
+on:
+  release:
+    types: [published]
+jobs:
+  publish-to-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+      - run: npm ci
+      - run: npm run pub
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/README.md ADDED Viewed

@@ -0,0 +1,5 @@
+# Groundwork React Components
+Groundwork provides a basic set of React components designed for use by USACE. We're working on making all of the components as accessible as possible to provide a consistent foundation for public-facing or internal applications.
+See the documentation at https://usace.github.io/groundwork.

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/usace-logo-color.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Groundwork</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/lib/catalyst/alert.jsx ADDED Viewed

@@ -0,0 +1,110 @@
+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 Alert({ open, onClose, size = 'md', 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/15 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"
+          enterTo="opacity-100"
+          leave="ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4">
+            <HeadlessTransitionChild
+              as={HeadlessDialogPanel}
+              className={clsx(
+                className,
+                sizes[size],
+                'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+              )}
+              enter="ease-out duration-100"
+              enterFrom="scale-95"
+              enterTo="scale-100"
+              leave="ease-in duration-100"
+              leaveFrom="scale-100"
+              leaveTo="scale-100"
+            >
+              {children}
+            </HeadlessTransitionChild>
+          </div>
+        </HeadlessTransitionChild>
+      </HeadlessDialog>
+    </HeadlessTransition>
+  )
+}
+export function AlertTitle({ className, ...props }) {
+  return (
+    <HeadlessDialogTitle
+      {...props}
+      className={clsx(
+        className,
+        'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white'
+      )}
+    />
+  )
+}
+export function AlertDescription({ className, ...props }) {
+  return (
+    <HeadlessDescription
+      as={Text}
+      {...props}
+      className={clsx(className, 'mt-2 text-pretty text-center sm:text-left')}
+    />
+  )
+}
+export function AlertBody({ className, ...props }) {
+  return <div {...props} className={clsx(className, 'mt-4')} />
+}
+export function AlertActions({ className, ...props }) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        className,
+        'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto'
+      )}
+    />
+  )
+}

package/lib/catalyst/avatar.jsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { Button as HeadlessButton } from '@headlessui/react'
+import clsx from 'clsx'
+import React from 'react'
+import { TouchTarget } from './button'
+import { Link } from './link'
+export function Avatar({ src = null, square = false, initials, alt = '', className, ...props }) {
+  return (
+    <span
+      data-slot="avatar"
+      className={clsx(
+        className,
+        // Basic layout
+        'inline-grid align-middle *:col-start-1 *:row-start-1',
+        // Add the correct border radius
+        square ? 'rounded-[20%] *:rounded-[20%]' : 'rounded-full *:rounded-full'
+      )}
+      {...props}
+    >
+      {initials && (
+        <svg
+          className="select-none fill-current text-[48px] font-medium uppercase"
+          viewBox="0 0 100 100"
+          aria-hidden={alt ? undefined : 'true'}
+        >
+          {alt && <title>{alt}</title>}
+          <text x="50%" y="50%" alignmentBaseline="middle" dominantBaseline="middle" textAnchor="middle" dy=".125em">
+            {initials}
+          </text>
+        </svg>
+      )}
+      {src && <img src={src} alt={alt} />}
+      {/* Add an inset border that sits on top of the image */}
+      <span className="ring-1 ring-inset ring-black/5 dark:ring-white/5 forced-colors:outline" aria-hidden="true" />
+    </span>
+  )
+}
+export const AvatarButton = React.forwardRef(function AvatarButton(
+  { src, square = false, initials, alt, className, ...props },
+  ref
+) {
+  let classes = clsx(
+    className,
+    square ? 'rounded-lg' : 'rounded-full',
+    'relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
+  )
+  return 'href' in props ? (
+    <Link {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt} />
+      </TouchTarget>
+    </Link>
+  ) : (
+    <HeadlessButton {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt} />
+      </TouchTarget>
+    </HeadlessButton>
+  )
+})

package/lib/catalyst/badge.jsx ADDED Viewed

@@ -0,0 +1,72 @@
+import { Button as HeadlessButton } from '@headlessui/react'
+import clsx from 'clsx'
+import React from 'react'
+import { TouchTarget } from './button'
+import { Link } from './link'
+const colors = {
+  red: 'bg-red-500/15 text-red-700 group-data-[hover]:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-[hover]:bg-red-500/20',
+  orange:
+    'bg-orange-500/15 text-orange-700 group-data-[hover]:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-[hover]:bg-orange-500/20',
+  amber:
+    'bg-amber-400/20 text-amber-700 group-data-[hover]:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-[hover]:bg-amber-400/15',
+  yellow:
+    'bg-yellow-400/20 text-yellow-700 group-data-[hover]:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-[hover]:bg-yellow-400/15',
+  lime: 'bg-lime-400/20 text-lime-700 group-data-[hover]:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-[hover]:bg-lime-400/15',
+  green:
+    'bg-green-500/15 text-green-700 group-data-[hover]:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-[hover]:bg-green-500/20',
+  emerald:
+    'bg-emerald-500/15 text-emerald-700 group-data-[hover]:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-[hover]:bg-emerald-500/20',
+  teal: 'bg-teal-500/15 text-teal-700 group-data-[hover]:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-[hover]:bg-teal-500/20',
+  cyan: 'bg-cyan-400/20 text-cyan-700 group-data-[hover]:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-[hover]:bg-cyan-400/15',
+  sky: 'bg-sky-500/15 text-sky-700 group-data-[hover]:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-[hover]:bg-sky-500/20',
+  blue: 'bg-blue-500/15 text-blue-700 group-data-[hover]:bg-blue-500/25 dark:text-blue-400 dark:group-data-[hover]:bg-blue-500/25',
+  indigo:
+    'bg-indigo-500/15 text-indigo-700 group-data-[hover]:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-[hover]:bg-indigo-500/20',
+  violet:
+    'bg-violet-500/15 text-violet-700 group-data-[hover]:bg-violet-500/25 dark:text-violet-400 dark:group-data-[hover]:bg-violet-500/20',
+  purple:
+    'bg-purple-500/15 text-purple-700 group-data-[hover]:bg-purple-500/25 dark:text-purple-400 dark:group-data-[hover]:bg-purple-500/20',
+  fuchsia:
+    'bg-fuchsia-400/15 text-fuchsia-700 group-data-[hover]:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-[hover]:bg-fuchsia-400/20',
+  pink: 'bg-pink-400/15 text-pink-700 group-data-[hover]:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-[hover]:bg-pink-400/20',
+  rose: 'bg-rose-400/15 text-rose-700 group-data-[hover]:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-[hover]:bg-rose-400/20',
+  zinc: 'bg-zinc-600/10 text-zinc-700 group-data-[hover]:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-[hover]:bg-white/10',
+}
+export function Badge({ color = 'zinc', className, ...props }) {
+  return (
+    <span
+      {...props}
+      className={clsx(
+        className,
+        'inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline',
+        colors[color]
+      )}
+    />
+  )
+}
+export const BadgeButton = React.forwardRef(function BadgeButton(
+  { color = 'zinc', className, children, ...props },
+  ref
+) {
+  let classes = clsx(
+    className,
+    'group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
+  )
+  return 'href' in props ? (
+    <Link {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Link>
+  ) : (
+    <HeadlessButton {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </HeadlessButton>
+  )
+})

package/lib/catalyst/checkbox.jsx ADDED Viewed

@@ -0,0 +1,160 @@
+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 ADDED Viewed

@@ -0,0 +1,101 @@
+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'
+      )}
+    />
+  )
+}