@taicode/common-web 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taicode/common-web",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": "Alain",
   "license": "ISC",
   "description": "",
@@ -9,12 +9,24 @@
     "dev": "tsc -p tsconfig.json --watch"
   },
   "peerDependencies": {
+    "@types/react": ">=18",
     "mobx": ">=6",
-    "react": ">=18",
-    "@types/react": ">=18"
+    "react": ">=18"
   },
   "exports": {
-    "./utils/*": ["./output/utils/*"],
-    "./hooks/*": ["./output/hooks/*"]
+    "./utils/*": [
+      "./output/utils/*"
+    ],
+    "./hooks/*": [
+      "./output/hooks/*"
+    ],
+    "./catalyst/*": [
+      "./output/catalyst/*"
+    ]
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.4",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.19.2"
   }
 }

package/source/catalyst/CHANGELOG.md

@@ -0,0 +1,136 @@
+# Changelog
+
+## 2025-06-05
+
+- Update `DropdownLabel` to extend a plain `<div>` instead of the `Headless.Label` ([#1699](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1699))
+
+## 2025-04-28
+
+- Update template to Tailwind CSS v4.1.4
+
+## 2025-04-22
+
+- Fix focus styles in the `Avatar`, `Badge`, `Button`, `Checkbox`, and `Switch` components ([#1693](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1693))
+
+## 2025-04-17
+
+- Update `@headlessui/react` dependency to `v2.2.2` to fix listbox performance issues ([#1667](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1667))
+
+## 2025-04-04
+
+- Add new `Combobox` component
+- Add new `AuthLayout` component, with example login page, registration page, and forgot password page
+- Fix centering of checkboxes, radios, and switches in fields with multi-line labels
+- Update template to Tailwind CSS v4.1.3
+- Update template to Headless UI v2.2.1 (required for new `Combobox` component)
+
+## 2025-03-24
+
+- Adjust avatar ring opacity from 20% to 10%
+
+## 2025-03-22
+
+- Update template to Tailwind CSS v4.0.15
+
+## 2025-02-22
+
+- Fix border radius of avatars in navbar items
+
+## 2025-02-12
+
+- Fix baseline alignment for buttons with icons ([#1668](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1668))
+
+## 2025-02-10
+
+- Update template to Tailwind CSS v4.0.6
+
+## 2025-01-29
+
+- Fix conflicting outline utilities ([#1661](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1661))
+
+## 2025-01-23
+
+- Update template to Tailwind CSS v4.0
+
+## 2024-10-31
+
+- Fix `disabled` prop in `DropdownItem` component ([#1640](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1640))
+- Update types in `SidebarItem` component
+
+## 2024-06-09
+
+- Omit `as` prop from types for Headless UI-based components
+
+## 2024-06-26
+
+- Update `@headlessui/react` dependency to `v2.1.1`
+- Update `Dialog`, `Alert`, and `Listbox` to new data-attribute-based transition API
+
+## 2024-06-21
+
+- Update `@headlessui/react` dependency to `v2.1.0`
+- Use `DialogBackdrop` in `Alert` and `Dialog` components
+- Update to new data-attribute-based transition API
+
+## 2024-06-19
+
+- Prevent content from overflowing the mobile sidebar
+
+## 2024-06-18
+
+- Use consistent `let` and `const` declarations
+- Use consistent `clsx` import
+- Use consistent `forwardRef` instead of `React.forwardRef` import
+- Update `tailwindcss`, `prettier` and `prettier-plugin-tailwindcss` dependencies in Next.js demo app
+- Fix class order in `Dropdown` component
+
+## 2024-06-10
+
+- Add `dark:[color-scheme:dark]` class to `Input` component ([#1596](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1596))
+
+## 2024-05-31
+
+- Add Next.js demo app ([#1580](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1580))
+- Fix `Avatar` sizing and padding ([#1588](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1588))
+
+## 2024-05-27
+
+- Add `pointer-events-none` to `InputGroup` icon ([#1594](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1594))
+- Add default text color to `Table` component ([#1581](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1581))
+- Fix TypeScript issues when using `as={Link}` ([#1582](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1582))
+- Fix `SidebarItem` import ([#1582](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1582))
+- Add `isolate` class to `InputGroup`, `SidebarLayout`, and `StackedLayout` components
+- Fix comment indentation and use proper DocBlocks
+
+## 2024-05-24
+
+- Add new `SidebarLayout` component
+- Add new `StackedLayout` component
+- Add new `Navbar` component
+- Add new `Sidebar` component
+- Add new `DescriptionList` component
+- Add new `Heading` component
+- Add new `Divider` component
+- Add new `framer-motion` dependency
+- Update `@headlessui/react` dependency to `v2.0`
+- Remove `as={Fragment}` from the transition components
+- Improve and fix a number of types
+- Made formatting of `className` and `{...prop}` more consistent across all components
+- Made formatting of `forwardRef` consistent across all components
+- Update `PaginationGap` component to use a `span` instead of a `div`
+- Update the `SidebarHeading` to render use an `h3` instead of a `d`iv
+- Remove `children` prop from `Switch` component
+
+## 2024-01-08
+
+- Add `resizable` prop to `Textarea` component ([#1543](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1543))
+
+## 2024-01-03
+
+- Change top-level `let` declarations to `const`
+- Fix `--btn-hover-overlay` color for dark/white button ([#1538](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1538))
+- Add `forwardRef` to `Input`, `Select`, and `Textarea` components ([#1540](https://github.com/tailwindlabs/tailwind-plus-issues/issues/1540))
+
+## 2023-12-20
+
+- Initial release

package/source/catalyst/README.md

@@ -0,0 +1,65 @@
+# Catalyst UI Kit
+
+Catalyst is a modern application UI kit built with [Tailwind CSS](https://tailwindcss.com) and [React](https://react.dev/), designed and built by the Tailwind CSS team and included as part of [Tailwind Plus](https://tailwindcss.com/plus).
+
+## Getting started
+
+To get started, first copy the component files included in the downloaded ZIP file into wherever you keep components in your own project. The components are provided in both TypeScript and plain JavaScript, pick whichever set you prefer.
+
+Next, install the dependencies used by the components in Catalyst:
+
+```sh
+npm install @headlessui/react framer-motion clsx
+```
+
+Catalyst is also designed for the latest version of Tailwind CSS, which is currently Tailwind CSS v4.0. To make sure that you are on the latest version of Tailwind, update it via npm:
+
+```sh
+npm install tailwindcss@latest
+```
+
+Now you're ready to start using the components in your project — just import them from wherever you're keeping your components and start using them like any of your other React components:
+
+```jsx
+import { Input } from './components/input'
+import { Field, FieldGroup, Label } from './components/fieldset'
+import { Button } from './components/button'
+
+export default function SettingsForm() {
+  return (
+    <form>
+      <FieldGroup>
+        <Field>
+          <Label>Name</Label>
+          <Input name="name" />
+        </Field>
+        <Field>
+          <Label>Email</Label>
+          <Input type="email" name="email" />
+        </Field>
+        <Button type="submit">Save changes</Button>
+      </FieldGroup>
+    </form>
+  )
+}
+```
+
+Additional installation instructions can be found in the Catalyst documentation.
+
+## Documentation
+
+You can find the Catalyst documentation at https://catalyst.tailwindui.com/docs.
+
+## License
+
+This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
+
+## Learn more
+
+To learn more about the technologies used in this site template, see the following resources:
+
+- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
+- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
+- [React](https://react.dev) - the official React documentation
+- [Framer Motion](https://www.framer.com/docs/) - the official Framer Motion documentation
+- [clsx](https://github.com/lukeed/clsx) - the GitHub repo for the `clsx` helper

package/source/catalyst/alert.tsx

@@ -0,0 +1,95 @@
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import type React 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({
+  size = 'md',
+  className,
+  children,
+  ...props
+}: { size?: keyof typeof sizes; className?: string; children: React.ReactNode } & Omit<
+  Headless.DialogProps,
+  'as' | 'className'
+>) {
+  return (
+    <Headless.Dialog {...props}>
+      <Headless.DialogBackdrop
+        transition
+        className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50"
+      />
+
+      <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-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">
+          <Headless.DialogPanel
+            transition
+            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',
+              'transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in'
+            )}
+          >
+            {children}
+          </Headless.DialogPanel>
+        </div>
+      </div>
+    </Headless.Dialog>
+  )
+}
+
+export function AlertTitle({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.DialogTitleProps, 'as' | 'className'>) {
+  return (
+    <Headless.DialogTitle
+      {...props}
+      className={clsx(
+        className,
+        'text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white'
+      )}
+    />
+  )
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: { className?: string } & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>) {
+  return (
+    <Headless.Description
+      as={Text}
+      {...props}
+      className={clsx(className, 'mt-2 text-center text-pretty sm:text-left')}
+    />
+  )
+}
+
+export function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return <div {...props} className={clsx(className, 'mt-4')} />
+}
+
+export function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  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/source/catalyst/auth-layout.tsx

@@ -0,0 +1,11 @@
+import type React from 'react'
+
+export function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="flex min-h-dvh flex-col p-2">
+      <div className="flex grow items-center justify-center p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10">
+        {children}
+      </div>
+    </main>
+  )
+}

package/source/catalyst/avatar.tsx

@@ -0,0 +1,84 @@
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import React, { forwardRef } from 'react'
+import { TouchTarget } from './button'
+import { Link } from './link'
+
+type AvatarProps = {
+  src?: string | null
+  square?: boolean
+  initials?: string
+  alt?: string
+  className?: string
+}
+
+export function Avatar({
+  src = null,
+  square = false,
+  initials,
+  alt = '',
+  className,
+  ...props
+}: AvatarProps & React.ComponentPropsWithoutRef<'span'>) {
+  return (
+    <span
+      data-slot="avatar"
+      {...props}
+      className={clsx(
+        className,
+        // Basic layout
+        'inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1',
+        'outline -outline-offset-1 outline-black/10 dark:outline-white/10',
+        // Border radius
+        square ? 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)' : 'rounded-full *:rounded-full'
+      )}
+    >
+      {initials && (
+        <svg
+          className="size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none"
+          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 className="size-full" src={src} alt={alt} />}
+    </span>
+  )
+}
+
+export const AvatarButton = forwardRef(function AvatarButton(
+  {
+    src,
+    square = false,
+    initials,
+    alt,
+    className,
+    ...props
+  }: AvatarProps &
+    (Omit<Headless.ButtonProps, 'as' | 'className'> | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>),
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  let classes = clsx(
+    className,
+    square ? 'rounded-[20%]' : 'rounded-full',
+    'relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500'
+  )
+
+  return 'href' in props ? (
+    <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt} />
+      </TouchTarget>
+    </Link>
+  ) : (
+    <Headless.Button {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt} />
+      </TouchTarget>
+    </Headless.Button>
+  )
+})

package/source/catalyst/badge.tsx

@@ -0,0 +1,82 @@
+import * as Headless from '@headlessui/react'
+import clsx from 'clsx'
+import React, { forwardRef } 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',
+}
+
+type BadgeProps = { color?: keyof typeof colors }
+
+export function Badge({ color = 'zinc', className, ...props }: BadgeProps & React.ComponentPropsWithoutRef<'span'>) {
+  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 = forwardRef(function BadgeButton(
+  {
+    color = 'zinc',
+    className,
+    children,
+    ...props
+  }: BadgeProps & { className?: string; children: React.ReactNode } & (
+      | Omit<Headless.ButtonProps, 'as' | 'className'>
+      | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'className'>
+    ),
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  let classes = clsx(
+    className,
+    'group relative inline-flex rounded-md focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500'
+  )
+
+  return 'href' in props ? (
+    <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Link>
+  ) : (
+    <Headless.Button {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Headless.Button>
+  )
+})