@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/source/components/Error.tsx

@@ -0,0 +1,58 @@
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {forwardRef} from './internals.js';
+import {Text} from './Text.js';
+import {useField} from './useField.js';
+
+export const useErrorTheme = createComponentTheme('Error');
+
+const ERROR_ELEMENT = 'p';
+
+export type ErrorProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useErrorTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const Error = forwardRef(
+  <T extends ElementType = typeof ERROR_ELEMENT>(
+    {as: Component = ERROR_ELEMENT as T, className, children, ...rest}: ErrorProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useErrorTheme();
+    let field = useField();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'error',
+      ...rest,
+    };
+
+    if (field) {
+      return createElement(
+        Component,
+        props,
+        field.errors ? field.errors.map((error) => <Text key={error}>{error}</Text>) : null,
+      );
+    }
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const errorTheme: ComponentTheme<typeof useErrorTheme> = {
+  className: 'flex text-red-500 empty:hidden',
+};

package/source/components/Field.tsx

@@ -0,0 +1,79 @@
+import {type FieldMetadata, type FieldName} from '@conform-to/react';
+import {Field as HeadlessField, type FieldProps as HeadlessFieldProps} 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 {fieldContext, fieldNameContext, filterProps, forwardRef} from './internals.js';
+
+export const useFieldTheme = createComponentTheme('Field');
+
+const FIELD_ELEMENT = 'div';
+
+export type FieldProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useFieldTheme> &
+    ComponentPropsWithoutRef<T> &
+    (
+      | {
+          as?: T | undefined;
+          className?: string | undefined;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+          name?: FieldName<any, any> | string | undefined;
+          field?: undefined;
+        }
+      | {
+          as?: T | undefined;
+          className?: string | undefined;
+          name?: undefined;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+          field?: FieldMetadata<any, any> | undefined;
+        }
+    )
+>;
+
+export const Field = forwardRef(
+  <T extends ElementType = typeof FIELD_ELEMENT>(
+    {as = FIELD_ELEMENT as T, name, field, className, children, ...rest}: FieldProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useFieldTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessFieldProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'field',
+      ...rest,
+    });
+
+    if (field) {
+      return (
+        <fieldContext.Provider value={field}>
+          <HeadlessField {...props}>{children}</HeadlessField>
+        </fieldContext.Provider>
+      );
+    }
+
+    if (name) {
+      return (
+        <fieldNameContext.Provider value={name}>
+          <HeadlessField {...props}>{children}</HeadlessField>
+        </fieldNameContext.Provider>
+      );
+    }
+
+    return <HeadlessField {...props}>{children}</HeadlessField>;
+  },
+);
+
+export const fieldTheme: ComponentTheme<typeof useFieldTheme> = {
+  className: 'flex flex-col gap-y-2 font-sans',
+};

package/source/components/Fieldset.tsx

@@ -0,0 +1,64 @@
+import {
+  Fieldset as HeadlessFieldset,
+  type FieldsetProps as HeadlessFieldsetProps,
+} 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 useFieldsetTheme = createComponentTheme('Fieldset', {
+  variants: {
+    disabled: [true, false],
+  },
+});
+
+const FIELDSET_ELEMENT = 'fieldset';
+
+export type FieldsetProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useFieldsetTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string | undefined;
+    }
+>;
+
+export const Fieldset = forwardRef(
+  <T extends ElementType = typeof FIELDSET_ELEMENT>(
+    {as = FIELDSET_ELEMENT as T, disabled = false, className, children, ...rest}: FieldsetProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useFieldsetTheme({disabled});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessFieldsetProps<any> = filterProps({
+      as,
+      ref,
+      disabled,
+      className: theme(null, className),
+      'data-component': 'fieldset',
+      ...rest,
+    });
+
+    return <HeadlessFieldset {...props}>{children}</HeadlessFieldset>;
+  },
+);
+
+export const fieldsetnTheme: ComponentTheme<typeof useFieldsetTheme> = {
+  className:
+    'flex flex-col gap-y-6 [&>[data-component=legend]+[data-component=text]]:text-sm [&>[data-component=legend]+[data-component=text]]:-mt-4',
+  variants: {
+    disabled: {
+      true: '',
+      false: '',
+    },
+  },
+};

package/source/components/Form.tsx

@@ -0,0 +1,72 @@
+import {type FormMetadata, FormProvider} from '@conform-to/react';
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {formIdContext, forwardRef} from './internals.js';
+
+export const useFormTheme = createComponentTheme('Form');
+
+const FORM_ELEMENT = 'form';
+
+export type FormProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useFormTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+      form?: FormMetadata<any, any> | undefined;
+    }
+>;
+
+export const Form = forwardRef(
+  <T extends ElementType = typeof FORM_ELEMENT>(
+    {as: Component = FORM_ELEMENT as T, className, form, children, ...rest}: FormProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useFormTheme();
+
+    if (form) {
+      let props = {
+        ref,
+        id: form.id,
+        method: 'post',
+        className: theme(null, className),
+        onSubmit: form.onSubmit,
+        'data-component': 'form',
+        ...rest,
+      };
+
+      return (
+        <formIdContext.Provider value={form.id}>
+          <FormProvider context={form.context}>
+            {createElement(Component, props, children)}
+          </FormProvider>
+        </formIdContext.Provider>
+      );
+    }
+
+    let props = {
+      ref,
+      method: 'post',
+      className: theme(null, className),
+      'data-component': 'form',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const formTheme: ComponentTheme<typeof useFormTheme> = {
+  className: 'flex flex-col gap-y-6',
+};

package/source/components/Icon.tsx

@@ -0,0 +1,96 @@
+import * as icons16 from '@heroicons/react/16/solid';
+import * as icons20 from '@heroicons/react/20/solid';
+import * as icons24 from '@heroicons/react/24/outline';
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  type PropsWithChildren,
+  type ReactNode,
+  type Ref,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {forwardRef} from './internals.js';
+
+export const useIconTheme = createComponentTheme('Icon', {
+  variants: {
+    size: ['small', 'medium', 'large'],
+  },
+});
+
+const ICON_ELEMENT = 'span';
+
+export type IconProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useIconTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      name?: string | undefined;
+      className?: string | undefined;
+    }
+>;
+
+export const Icon = forwardRef(
+  <T extends ElementType = typeof ICON_ELEMENT>(
+    {
+      size = 'medium',
+      as: Component = ICON_ELEMENT as T,
+      name,
+      className,
+      children,
+      ...rest
+    }: IconProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useIconTheme({size});
+    let props: Record<string, unknown> = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'icon',
+      ...rest,
+    };
+    let Child: ElementType | undefined;
+    let resolvedName = `${name}Icon`;
+
+    if (
+      size === 'medium' &&
+      resolvedName &&
+      (icons20[resolvedName as keyof typeof icons20] as unknown)
+    ) {
+      Child = icons20[resolvedName as keyof typeof icons20] as ElementType;
+    }
+
+    if (
+      size === 'small' &&
+      resolvedName &&
+      (icons16[resolvedName as keyof typeof icons16] as unknown)
+    ) {
+      Child = icons16[resolvedName as keyof typeof icons16] as ElementType;
+    }
+
+    if (
+      size === 'large' &&
+      resolvedName &&
+      (icons24[resolvedName as keyof typeof icons24] as unknown)
+    ) {
+      Child = icons24[resolvedName as keyof typeof icons24] as ElementType;
+    }
+
+    return createElement(Component, props, (Child ? <Child /> : children) as ReactNode);
+  },
+);
+
+export const iconTheme: ComponentTheme<typeof useIconTheme> = {
+  className: 'inline-block *:w-full *:h-full data-[icon]:-mx-1',
+  variants: {
+    size: {
+      small: 'size-4',
+      medium: 'size-5',
+      large: 'size-6',
+    },
+  },
+};

package/source/components/Input.tsx

@@ -0,0 +1,156 @@
+import {getInputProps} from '@conform-to/react';
+import {Input as HeadlessInput} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ElementType,
+  type Ref,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {Icon} from './Icon.js';
+import {forwardRef} from './internals.js';
+import {useField} from './useField.js';
+import {useFieldName} from './useFieldName.js';
+
+export const useInputTheme = createComponentTheme('Input', {
+  variants: {
+    disabled: [true, false],
+  },
+  elements: ['root', 'input', 'icon', 'clearButton'],
+});
+
+const INPUT_ELEMENT = 'input';
+
+export type InputProps<T extends ElementType> = ComponentProps<typeof useInputTheme> &
+  ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    icon?: ComponentType<object> | string | undefined;
+    showClearButton?: boolean | undefined;
+  };
+
+export const Input = forwardRef(
+  <T extends ElementType = typeof INPUT_ELEMENT>(
+    {
+      disabled = false,
+      as = INPUT_ELEMENT as T,
+      name,
+      className,
+      icon: IconComponent,
+      showClearButton = false,
+      ...rest
+    }: InputProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useInputTheme({disabled});
+    let fieldName = useFieldName();
+    let field = useField();
+    let inputRef = useRef<HTMLInputElement>();
+
+    useImperativeHandle(ref, () => {
+      if (inputRef.current) {
+        return inputRef.current;
+      }
+
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive
+      return {} as HTMLElement;
+    });
+
+    let handleClear = useCallback(() => {
+      if (inputRef.current) {
+        inputRef.current.value = '';
+        inputRef.current.dispatchEvent(new Event('input', {bubbles: true}));
+      }
+    }, []);
+
+    let rootProps: Record<string, unknown> = {
+      className: theme.root('relative', className),
+      'data-component': 'input',
+    };
+    let inputProps: Record<string, unknown> = {
+      as,
+      ref: inputRef,
+      disabled,
+      name: field?.name ?? fieldName ?? name,
+      className: theme.input(),
+      size: 1, // so the input default width without styling is small
+      ...rest,
+    };
+    let iconProps: Record<string, unknown> = {
+      className: theme.icon('absolute'),
+    };
+    let clearButtonProps: Record<string, unknown> = {
+      className: theme.clearButton('absolute'),
+    };
+
+    if (IconComponent) {
+      rootProps['data-icon'] = '';
+    }
+
+    if (showClearButton) {
+      rootProps['data-clear-button'] = '';
+    }
+
+    if (field) {
+      let {key, ...restProps} = getInputProps(field, {type: 'text'});
+
+      inputProps = {...restProps, ...inputProps};
+    }
+
+    return (
+      <span {...rootProps}>
+        <HeadlessInput {...inputProps} />
+        {IconComponent ?
+          <span {...iconProps}>
+            {typeof IconComponent === 'string' ?
+              <Icon name={IconComponent} />
+            : <Icon size="large">
+                <IconComponent />
+              </Icon>
+            }
+          </span>
+        : null}
+        {showClearButton ?
+          <span {...clearButtonProps} onClick={handleClear}>
+            <Icon name="XMark" />
+          </span>
+        : null}
+      </span>
+    );
+  },
+);
+
+export const inputTheme: ComponentTheme<typeof useInputTheme> = {
+  classNames: {
+    root: 'group flex w-full items-center rounded-2 border-2 border-gray-100 hover:border-gray-200 px-2.5 h-9 bg-white shadow-inner transition-colors',
+    input:
+      'p-0 focus-visible:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm',
+    icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-gray-300',
+    clearButton: 'text-gray-500 size-5 right-2 cursor-pointer',
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: 'border-gray-100 text-gray-200 cursor-not-allowed',
+        input: '',
+        icon: '',
+        clearButton: '',
+      },
+      false: {
+        root: '',
+        input: '',
+        icon: '',
+        clearButton: '',
+      },
+    },
+  },
+};

package/source/components/Label.tsx

@@ -0,0 +1,49 @@
+import {Label as HeadlessLabel, type LabelProps as HeadlessLabelProps} 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 useLabelTheme = createComponentTheme('Label');
+
+const LABEL_ELEMENT = 'label';
+
+export type LabelProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useLabelTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const Label = forwardRef(
+  <T extends ElementType = typeof LABEL_ELEMENT>(
+    {as = LABEL_ELEMENT as T, className, children, ...rest}: LabelProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useLabelTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessLabelProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'label',
+      ...rest,
+    });
+
+    return <HeadlessLabel {...props}>{children}</HeadlessLabel>;
+  },
+);
+
+export const labelTheme: ComponentTheme<typeof useLabelTheme> = {
+  className: 'block cursor-pointer font-sans text-sm font-medium',
+};

package/source/components/Legend.tsx

@@ -0,0 +1,49 @@
+import {Legend as HeadlessLegend, type LegendProps as HeadlessLegendProps} 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 useLegendTheme = createComponentTheme('Legend');
+
+const LEGEND_ELEMENT = 'div';
+
+export type LegendProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useLegendTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string | undefined;
+    }
+>;
+
+export const Legend = forwardRef(
+  <T extends ElementType = typeof LEGEND_ELEMENT>(
+    {as = LEGEND_ELEMENT as T, className, children, ...rest}: LegendProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useLegendTheme();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let props: HeadlessLegendProps<any> = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      'data-component': 'legend',
+      ...rest,
+    });
+
+    return <HeadlessLegend {...props}>{children}</HeadlessLegend>;
+  },
+);
+
+export const legendTheme: ComponentTheme<typeof useLegendTheme> = {
+  className: 'font-sans font-semibold text-sm',
+};