@jakubmazanec/ui 0.1.0-next.070f0f6

package/source/components/RadioGroup.tsx

@@ -0,0 +1,147 @@
+import {type FieldMetadata, type FieldName} from '@conform-to/react';
+import {RadioGroup as HeadlessRadioGroup} from '@headlessui/react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type PropsWithChildren,
+  type Ref,
+  useCallback,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {fieldContext, fieldNameContext, forwardRef, useFormId} from './internals.js';
+
+export const useRadioGroupTheme = createComponentTheme('RadioGroup', {
+  variants: {
+    disabled: [true, false],
+  },
+});
+
+const RADIO_GROUP_ELEMENT = 'div';
+
+export type RadioGroupProps<
+  T extends ElementType,
+  V extends boolean | number | string,
+> = PropsWithChildren<
+  ComponentProps<typeof useRadioGroupTheme> &
+    ComponentPropsWithoutRef<T> &
+    (
+      | {
+          as?: T | undefined;
+          value?: V | undefined;
+          defaultValue?: V | undefined;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+          field?: FieldMetadata<any, any> | undefined;
+          name?: undefined;
+          className?: string | undefined;
+          onChange?: ((value: V) => void) | undefined;
+        }
+      | {
+          as?: T | undefined;
+          value?: V | undefined;
+          defaultValue?: V | undefined;
+          field?: undefined;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+          name?: FieldName<any, any> | string | undefined;
+          className?: string;
+          onChange?: ((value: V) => void) | undefined;
+        }
+    )
+>;
+
+export const RadioGroup = forwardRef(
+  <
+    T extends ElementType = typeof RADIO_GROUP_ELEMENT,
+    V extends boolean | number | string = string,
+  >(
+    {
+      disabled = false,
+      as = RADIO_GROUP_ELEMENT as T,
+      value,
+      defaultValue,
+      field,
+      name,
+      className,
+      onChange,
+      children,
+      ...rest
+    }: RadioGroupProps<T, V>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useRadioGroupTheme({disabled});
+    let formId = useFormId();
+
+    let handleChange = useCallback(
+      (newValue: V) => {
+        onChange?.(newValue);
+      },
+      [onChange],
+    );
+
+    if (field) {
+      let props = {
+        ref,
+        disabled,
+        defaultValue,
+        name: field.name,
+        form: formId,
+        className: theme(null, className),
+        onChange: handleChange,
+        ...rest,
+      };
+
+      return (
+        <fieldContext.Provider value={field}>
+          <HeadlessRadioGroup {...props}>{children}</HeadlessRadioGroup>
+        </fieldContext.Provider>
+      );
+    }
+
+    if (name) {
+      let props = {
+        ref,
+        disabled,
+        defaultValue,
+        name,
+        form: formId,
+        className: theme(null, className),
+        onChange: handleChange,
+        'data-component': 'radio-group',
+        ...rest,
+      };
+
+      return (
+        <fieldNameContext.Provider value={name}>
+          <HeadlessRadioGroup {...props}>{children}</HeadlessRadioGroup>
+        </fieldNameContext.Provider>
+      );
+    }
+
+    let props = {
+      ref,
+      disabled,
+      value,
+      defaultValue,
+      className: theme(null, className),
+      onChange: handleChange,
+      'data-component': 'radio-group',
+      ...rest,
+    };
+
+    return <HeadlessRadioGroup {...props}>{children}</HeadlessRadioGroup>;
+  },
+);
+
+export const radioGroupTheme: ComponentTheme<typeof useRadioGroupTheme> = {
+  className: 'flex flex-col gap-y-2',
+  variants: {
+    disabled: {
+      true: '',
+      false: '',
+    },
+  },
+};

package/source/components/Spinner.tsx

@@ -0,0 +1,70 @@
+import {memo} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+
+export const useSpinnerTheme = createComponentTheme('Spinner', {
+  variants: {
+    size: ['small', 'medium', 'large', 'surface'],
+  },
+  elements: ['root', 'icon'],
+});
+
+export type SpinnerProps = ComponentProps<typeof useSpinnerTheme> & {
+  className?: string;
+};
+
+export const Spinner = memo(({size = 'medium', className, ...rest}: SpinnerProps) => {
+  let theme = useSpinnerTheme({size});
+
+  return (
+    <output className={theme.root(null, className)} data-component="spinner" {...rest}>
+      <svg
+        aria-hidden="true"
+        className={theme.icon()}
+        viewBox="0 0 101 101"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </output>
+  );
+});
+
+export const spinnerTheme: ComponentTheme<typeof useSpinnerTheme> = {
+  classNames: {
+    root: 'inline-flex items-center justify-center fill-neutral-900 text-neutral-200 data-[icon]:-mx-1',
+    icon: 'animate-spin',
+  },
+  variants: {
+    size: {
+      small: {
+        root: '',
+        icon: 'w-4 h-4',
+      },
+      medium: {
+        root: '',
+        icon: 'w-5 h-5',
+      },
+      large: {
+        root: '',
+        icon: 'w-6 h-6',
+      },
+      surface: {
+        root: 'flex',
+        icon: 'w-12 h-12',
+      },
+    },
+  },
+};

package/source/components/Table.ts

@@ -0,0 +1,47 @@
+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';
+
+export const useTableTheme = createComponentTheme('Table');
+
+const TABLE_ELEMENT = 'table';
+
+export type TableProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string | undefined;
+    }
+>;
+
+export const Table = forwardRef(
+  <T extends ElementType = typeof TABLE_ELEMENT>(
+    {as: Component = TABLE_ELEMENT as T, className, children, ...rest}: TableProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableTheme: ComponentTheme<typeof useTableTheme> = {
+  className: '',
+};

package/source/components/TableBody.ts

@@ -0,0 +1,47 @@
+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';
+
+export const useTableBodyTheme = createComponentTheme('TableBody');
+
+const TABLE_BODY_ELEMENT = 'tbody';
+
+export type TableBodyProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableBodyTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableBody = forwardRef(
+  <T extends ElementType = typeof TABLE_BODY_ELEMENT>(
+    {as: Component = TABLE_BODY_ELEMENT as T, className, children, ...rest}: TableBodyProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableBodyTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-body',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableBodyTheme: ComponentTheme<typeof useTableBodyTheme> = {
+  className: 'font-sans',
+};

package/source/components/TableCaption.ts

@@ -0,0 +1,52 @@
+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';
+
+export const useTableCaptionTheme = createComponentTheme('TableCaption');
+
+const TABLE_CAPTION_ELEMENT = 'caption';
+
+export type TableCaptionProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableCaptionTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableCaption = forwardRef(
+  <T extends ElementType = typeof TABLE_CAPTION_ELEMENT>(
+    {
+      as: Component = TABLE_CAPTION_ELEMENT as T,
+      className,
+      children,
+      ...rest
+    }: TableCaptionProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableCaptionTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-caption',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableCaptionTheme: ComponentTheme<typeof useTableCaptionTheme> = {
+  className: 'font-sans text-sm font-medium mb-2',
+};

package/source/components/TableCell.ts

@@ -0,0 +1,47 @@
+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';
+
+export const useTableCellTheme = createComponentTheme('TableCell');
+
+const TABLE_CELL_ELEMENT = 'td';
+
+export type TableCellProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableCellTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableCell = forwardRef(
+  <T extends ElementType = typeof TABLE_CELL_ELEMENT>(
+    {as: Component = TABLE_CELL_ELEMENT as T, className, children, ...rest}: TableCellProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableCellTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-cell',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableCellTheme: ComponentTheme<typeof useTableCellTheme> = {
+  className: 'p-2 text-sm font-sans tabular-nums text-right truncate',
+};

package/source/components/TableFoot.ts

@@ -0,0 +1,47 @@
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  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 useTableFootTheme = createComponentTheme('TableFoot');
+
+const TABLE_FOOT_ELEMENT = 'tfoot';
+
+export type TableFootProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableFootTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableFoot = forwardRef(
+  <T extends ElementType = typeof TABLE_FOOT_ELEMENT>(
+    {as: Component = TABLE_FOOT_ELEMENT as T, className, children, ...rest}: TableFootProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableFootTheme();
+    let props = filterProps({
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-foot',
+      ...rest,
+    });
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableFootTheme: ComponentTheme<typeof useTableFootTheme> = {
+  className: 'font-sans text-sm',
+};

package/source/components/TableHead.ts

@@ -0,0 +1,47 @@
+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';
+
+export const useTableHeadTheme = createComponentTheme('TableHead');
+
+const TABLE_HEAD_ELEMENT = 'thead';
+
+export type TableHeadProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableHeadTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableHead = forwardRef(
+  <T extends ElementType = typeof TABLE_HEAD_ELEMENT>(
+    {as: Component = TABLE_HEAD_ELEMENT as T, className, children, ...rest}: TableHeadProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableHeadTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-head',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableHeadTheme: ComponentTheme<typeof useTableHeadTheme> = {
+  className: 'font-sans border-b-2 border-neutral-100',
+};

package/source/components/TableHeader.ts

@@ -0,0 +1,47 @@
+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';
+
+export const useTableHeaderTheme = createComponentTheme('TableHeader');
+
+const TABLE_HEADER_ELEMENT = 'th';
+
+export type TableHeaderProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableHeaderTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableHeader = forwardRef(
+  <T extends ElementType = typeof TABLE_HEADER_ELEMENT>(
+    {as: Component = TABLE_HEADER_ELEMENT as T, className, children, ...rest}: TableHeaderProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableHeaderTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-header',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableHeaderTheme: ComponentTheme<typeof useTableHeaderTheme> = {
+  className: 'relative p-1 text-sm font-medium z-20 font-sans tabular-nums whitespace-nowrap',
+};

package/source/components/TableRow.ts

@@ -0,0 +1,47 @@
+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';
+
+export const useTableRowTheme = createComponentTheme('TableRow');
+
+const TABLE_ROW_ELEMENT = 'tr';
+
+export type TableRowProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTableRowTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const TableRow = forwardRef(
+  <T extends ElementType = typeof TABLE_ROW_ELEMENT>(
+    {as: Component = TABLE_ROW_ELEMENT as T, className, children, ...rest}: TableRowProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTableRowTheme();
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'table-row',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const tableRowTheme: ComponentTheme<typeof useTableRowTheme> = {
+  className: 'font-sans odd:bg-white even:bg-neutral-25',
+};

package/source/components/Text.ts

@@ -0,0 +1,64 @@
+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';
+
+export const useTextTheme = createComponentTheme('Text', {
+  variants: {
+    size: ['small', 'medium', 'large'],
+  },
+});
+
+const TEXT_ELEMENT = 'p';
+
+export type TextProps<T extends ElementType> = PropsWithChildren<
+  ComponentProps<typeof useTextTheme> &
+    ComponentPropsWithoutRef<T> & {
+      as?: T | undefined;
+      className?: string;
+    }
+>;
+
+export const Text = forwardRef(
+  <T extends ElementType = typeof TEXT_ELEMENT>(
+    {
+      size = 'medium',
+      as: Component = TEXT_ELEMENT as T,
+      className,
+      children,
+      ...rest
+    }: TextProps<T>,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let theme = useTextTheme({size});
+    let props = {
+      ref,
+      className: theme(null, className),
+      'data-component': 'text',
+      ...rest,
+    };
+
+    return createElement(Component, props, children);
+  },
+);
+
+export const textTheme: ComponentTheme<typeof useTextTheme> = {
+  className: 'm-0',
+  variants: {
+    size: {
+      small: 'text-xs',
+      medium: 'text-sm',
+      large: '',
+    },
+  },
+};