@jakubmazanec/ui 0.1.0-next.86bf251

package/source/components/MenuItem.tsx

@@ -0,0 +1,64 @@
+import {
+  MenuItem as HeadlessMenuItem,
+  type MenuItemProps as HeadlessMenuItemProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuItemTheme = createComponentTheme('MenuItem', {
+  variants: {
+    disabled: [true, false],
+  },
+});
+
+const MENU_ITEM_ELEMENT = 'div';
+
+export type MenuItemProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuItemTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const MenuItem = forwardRef(
+  <T extends ElementType = typeof MENU_ITEM_ELEMENT>(
+    {disabled = false, as = MENU_ITEM_ELEMENT as T, className, children, ...rest}: MenuItemProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuItemTheme({disabled});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessMenuItemProps<any> = filterProps({
+      as,
+      ref,
+      disabled,
+      className: theme(null, className),
+      'data-component': 'menu-item',
+      ...rest,
+    });
+
+    return <HeadlessMenuItem {...props}>{children}</HeadlessMenuItem>;
+  },
+);
+
+export const menuItemTheme: ComponentTheme<typeof useMenuItemTheme> = {
+  className:
+    'p-1 rounded-1 text-neutral-950 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors',
+  variants: {
+    disabled: {
+      true: 'text-neutral-200 hover:bg-transparent',
+      false: '',
+    },
+  },
+};

package/source/components/MenuItems.tsx

@@ -0,0 +1,62 @@
+import {
+  MenuItems as HeadlessMenuItems,
+  type MenuItemsProps as HeadlessMenuItemsProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuItemsTheme = createComponentTheme('MenuItems');
+
+const MENU_ITEMS_ELEMENT = 'div';
+
+export type MenuItemsProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuItemsTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      anchor?: HeadlessMenuItemsProps['anchor'] | undefined;
+      className?: string;
+    }
+>;
+
+export const MenuItems = forwardRef(
+  <T extends ElementType = typeof MENU_ITEMS_ELEMENT>(
+    {
+      as = MENU_ITEMS_ELEMENT as T,
+      anchor = 'bottom start',
+      className,
+      children,
+      ...rest
+    }: MenuItemsProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuItemsTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessMenuItemsProps<any> = filterProps({
+      as,
+      ref,
+      anchor,
+      className: theme(null, className),
+      transition: true,
+      'data-component': 'menu-items',
+      ...rest,
+    });
+
+    return <HeadlessMenuItems {...props}>{children}</HeadlessMenuItems>;
+  },
+);
+
+export const menuItemsTheme: ComponentTheme<typeof useMenuItemsTheme> = {
+  className:
+    'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',
+};

package/source/components/MenuSection.tsx

@@ -0,0 +1,52 @@
+import {
+  MenuSection as HeadlessMenuSection,
+  type MenuSectionProps as HeadlessMenuSectionProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuSectionTheme = createComponentTheme('MenuSection');
+
+const MENU_SECTION_ELEMENT = 'div';
+
+export type MenuSectionProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuSectionTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const MenuSection = forwardRef(
+  <T extends ElementType = typeof MENU_SECTION_ELEMENT>(
+    {as = MENU_SECTION_ELEMENT as T, className, children, ...rest}: MenuSectionProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuSectionTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessMenuSectionProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'menu-section',
+      ...rest,
+    });
+
+    return <HeadlessMenuSection {...props}>{children}</HeadlessMenuSection>;
+  },
+);
+
+export const menuSectionTheme: ComponentTheme<typeof useMenuSectionTheme> = {
+  className: 'flex flex-col gap-y-1',
+};

package/source/components/MenuSeparator.tsx

@@ -0,0 +1,52 @@
+import {
+  MenuSeparator as HeadlessMenuSeparator,
+  type MenuSeparatorProps as HeadlessMenuSeparatorProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const useMenuSeparatorTheme = createComponentTheme('MenuSeparator');
+
+const MENU_SEPARATOR_ELEMENT = 'div';
+
+export type MenuSeparatorProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useMenuSeparatorTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const MenuSeparator = forwardRef(
+  <T extends ElementType = typeof MENU_SEPARATOR_ELEMENT>(
+    {as = MENU_SEPARATOR_ELEMENT as T, className, children, ...rest}: MenuSeparatorProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useMenuSeparatorTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessMenuSeparatorProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'menu-separator',
+      ...rest,
+    });
+
+    return <HeadlessMenuSeparator {...props}>{children}</HeadlessMenuSeparator>;
+  },
+);
+
+export const menuSeparatorTheme: ComponentTheme<typeof useMenuSeparatorTheme> = {
+  className: 'h-0 border-b-2 border-neutral-50 bg-transparent',
+};

package/source/components/Popover.tsx

@@ -0,0 +1,52 @@
+import {
+  Popover as HeadlessPopover,
+  type PopoverProps as HeadlessPopoverProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const usePopoverTheme = createComponentTheme('Popover');
+
+const POPOVER_ELEMENT = 'div';
+
+export type PopoverProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof usePopoverTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const Popover = forwardRef(
+  <T extends ElementType = typeof POPOVER_ELEMENT>(
+    {as = POPOVER_ELEMENT as T, className, children, ...rest}: PopoverProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = usePopoverTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessPopoverProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'popover',
+      ...rest,
+    });
+
+    return <HeadlessPopover {...props}>{children}</HeadlessPopover>;
+  },
+);
+
+export const popoverTheme: ComponentTheme<typeof usePopoverTheme> = {
+  className: '',
+};

package/source/components/PopoverBackdrop.tsx

@@ -0,0 +1,52 @@
+import {
+  PopoverBackdrop as HeadlessPopoverBackdrop,
+  type PopoverBackdropProps as HeadlessPopoverBackdropProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const usePopoverBackdropTheme = createComponentTheme('PopoverBackdrop');
+
+const POPOVER_BACKDROP_ELEMENT = 'div';
+
+export type PopoverBackdropProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof usePopoverBackdropTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const PopoverBackdrop = forwardRef(
+  <T extends ElementType = typeof POPOVER_BACKDROP_ELEMENT>(
+    {as = POPOVER_BACKDROP_ELEMENT as T, className, children, ...rest}: PopoverBackdropProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = usePopoverBackdropTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessPopoverBackdropProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'popover-backdrop',
+      ...rest,
+    });
+
+    return <HeadlessPopoverBackdrop {...props}>{children}</HeadlessPopoverBackdrop>;
+  },
+);
+
+export const popoverBackdropTheme: ComponentTheme<typeof usePopoverBackdropTheme> = {
+  className: '',
+};

package/source/components/PopoverButton.tsx

@@ -0,0 +1,72 @@
+import {
+  PopoverButton as HeadlessPopoverButton,
+  type PopoverButtonProps as HeadlessPopoverButtonProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const usePopoverButtonTheme = createComponentTheme('PopoverButton', {
+  variants: {
+    disabled: [true, false],
+  },
+});
+
+const POPOVER_BUTTON_ELEMENT = 'div';
+
+export type PopoverButtonProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof usePopoverButtonTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      autoFocus?: boolean | undefined;
+      className?: string;
+    }
+>;
+
+export const PopoverButton = forwardRef(
+  <T extends ElementType = typeof POPOVER_BUTTON_ELEMENT>(
+    {
+      disabled = false,
+      as = POPOVER_BUTTON_ELEMENT as T,
+      autoFocus,
+      className,
+      children,
+      ...rest
+    }: PopoverButtonProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = usePopoverButtonTheme({disabled});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessPopoverButtonProps<any> = filterProps({
+      as,
+      ref,
+      disabled,
+      autoFocus,
+      className: theme(null, className),
+      'data-component': 'popover-button',
+      ...rest,
+    });
+
+    return <HeadlessPopoverButton {...props}>{children}</HeadlessPopoverButton>;
+  },
+);
+
+export const popoverButtonTheme: ComponentTheme<typeof usePopoverButtonTheme> = {
+  className: '',
+  variants: {
+    disabled: {
+      true: '',
+      false: '',
+    },
+  },
+};

package/source/components/PopoverGroup.tsx

@@ -0,0 +1,52 @@
+import {
+  PopoverGroup as HeadlessPopoverGroup,
+  type PopoverGroupProps as HeadlessPopoverGroupProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const usePopoverGroupTheme = createComponentTheme('PopoverGroup');
+
+const POPOVER_GROUP_ELEMENT = 'div';
+
+export type PopoverGroupProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof usePopoverGroupTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const PopoverGroup = forwardRef(
+  <T extends ElementType = typeof POPOVER_GROUP_ELEMENT>(
+    {as = POPOVER_GROUP_ELEMENT as T, className, children, ...rest}: PopoverGroupProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = usePopoverGroupTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessPopoverGroupProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'popover-group',
+      ...rest,
+    });
+
+    return <HeadlessPopoverGroup {...props}>{children}</HeadlessPopoverGroup>;
+  },
+);
+
+export const popoverGroupTheme: ComponentTheme<typeof usePopoverGroupTheme> = {
+  className: '',
+};

package/source/components/PopoverPanel.tsx

@@ -0,0 +1,65 @@
+import {
+  PopoverPanel as HeadlessPopoverPanel,
+  type PopoverPanelProps as HeadlessPopoverPanelProps,
+} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {filterProps, forwardRef} from './internals.js';
+
+export const usePopoverPanelTheme = createComponentTheme('PopoverPanel');
+
+const POPOVER_PANEL_ELEMENT = 'div';
+
+export type PopoverPanelProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof usePopoverPanelTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      static?: boolean | undefined;
+      anchor?: HeadlessPopoverPanelProps['anchor'] | undefined;
+      className?: string;
+    }
+>;
+
+export const PopoverPanel = forwardRef(
+  <T extends ElementType = typeof POPOVER_PANEL_ELEMENT>(
+    {
+      as = POPOVER_PANEL_ELEMENT as T,
+      static: isStatic,
+      anchor = 'bottom start',
+      className,
+      children,
+      ...rest
+    }: PopoverPanelProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = usePopoverPanelTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessPopoverPanelProps<any> = filterProps({
+      as,
+      ref,
+      static: isStatic,
+      anchor,
+      className: theme(null, className),
+      transition: true,
+      'data-component': 'popover-panel',
+      ...rest,
+    });
+
+    return <HeadlessPopoverPanel {...props}>{children}</HeadlessPopoverPanel>;
+  },
+);
+
+export const popoverPanelTheme: ComponentTheme<typeof usePopoverPanelTheme> = {
+  className:
+    'rounded-2 bg-white border-2 p-4 border-neutral-100 z-30 [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin]',
+};

package/source/components/Radio.tsx

@@ -0,0 +1,88 @@
+import {Radio as HeadlessRadio, type RadioProps as HeadlessRadioProps} from '@headlessui/react';
+import {type ComponentPropsWithoutRef, type ElementType, type Ref} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {forwardRef} from './internals.js';
+
+export const useRadioTheme = createComponentTheme('Radio', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'icon'],
+});
+
+const RADIO_ELEMENT = 'span';
+
+export type RadioProps<T extends ElementType, V extends boolean | number | string> = ComponentProps<
+  typeof useRadioTheme
+> &
+  ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    value: V;
+    autoFocus?: boolean | undefined;
+    className?: string;
+  };
+
+export const Radio = forwardRef(
+  <T extends ElementType = typeof RADIO_ELEMENT, V extends boolean | number | string = string>(
+    {
+      disabled = false,
+      as = RADIO_ELEMENT as T,
+      value,
+      autoFocus,
+      className,
+      ...rest
+    }: RadioProps<T, V>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useRadioTheme({disabled});
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessRadioProps<any, V> = {
+      as,
+      ref,
+      value,
+      disabled,
+      autoFocus,
+      className: theme.root('relative', className),
+      'data-component': 'radio',
+      ...rest,
+    };
+
+    return (
+      <HeadlessRadio {...props}>
+        <span className={theme.icon()}>
+          <Icon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xmlSpace="preserve">
+              <circle cx="10" cy="10" r="4" fill="currentColor" />
+            </svg>
+          </Icon>
+        </span>
+      </HeadlessRadio>
+    );
+  },
+);
+
+export const radioTheme: ComponentTheme<typeof useRadioTheme> = {
+  classNames: {
+    root: 'group/radio inline-block size-5',
+    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',
+        icon: 'opacity-0',
+      },
+      false: {
+        root: '',
+        icon: '',
+      },
+    },
+  },
+};

package/source/components/RadioField.tsx

@@ -0,0 +1,31 @@
+import {Field as HeadlessField} from '@headlessui/react';
+import {type PropsWithChildren} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+
+export const useRadioFieldTheme = createComponentTheme('RadioField');
+
+export type RadioFieldProps = PropsWithChildren<
+  ComponentProps<typeof useRadioFieldTheme> & {
+    className?: string;
+  }
+>;
+
+export function RadioField({className, children}: RadioFieldProps) {
+  let theme = useRadioFieldTheme();
+
+  return (
+    <HeadlessField className={theme(null, className)} data-component="radio-field">
+      {children}
+    </HeadlessField>
+  );
+}
+
+export const radioFieldTheme: ComponentTheme<typeof useRadioFieldTheme> = {
+  className:
+    'grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2',
+};