@clicktap/ui 0.14.12 → 0.14.13

package/components/Switch/Switch.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Switch as AriaSwitch } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+import type { SwitchProps, SwitchRenderProps } from './Switch.types';
+
+export function Switch({
+  children,
+  className,
+  classNames,
+  ...props
+}: SwitchProps & {
+  classNames?: SlotsToClasses<'indicator'>;
+}) {
+  return (
+    <AriaSwitch
+      className={cn(
+        'flex items-center gap-2 text-sm text-slate-500 forced-color-adjust-none group',
+        '',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {(renderProps: SwitchRenderProps) => {
+        const { isSelected, isHovered, isFocused, isPressed, isDisabled } =
+          renderProps;
+        return (
+          <>
+            <div
+              className={cn(
+                'w-12 h-7 bg-transparent border-solid border border-slate-300 rounded-3xl transition-all duration-200 ease-in-out',
+                'before:block before:w-5 before:h-5 before:m-[3px] before:bg-slate-300 before:rounded-full',
+                'before:transition-all before:duration-200 before:ease-in-out',
+                [
+                  isHovered && 'border-slate-400',
+                  isSelected && [
+                    ' bg-slate-300 before:translate-x-full before:bg-white',
+                    (isHovered || isFocused) && 'border-slate-400',
+                  ],
+                  isFocused && ['outline outline-2 outline-slate-200'],
+                  isPressed && 'before:bg-slate-400',
+                  isDisabled && 'bg-slate-100',
+                  classNames?.indicator,
+                ]
+              )}
+            />
+
+            {typeof children === 'function'
+              ? children({
+                  defaultChildren: undefined,
+                  ...renderProps,
+                })
+              : children}
+          </>
+        );
+      }}
+    </AriaSwitch>
+  );
+}
+
+export default Switch;

package/components/Switch/Switch.types.ts

@@ -0,0 +1,8 @@
+import type {
+  SwitchProps as UISwitchProps,
+  SwitchRenderProps as UISwitchRenderProps,
+} from 'react-aria-components';
+
+export type SwitchProps = UISwitchProps;
+
+export type SwitchRenderProps = UISwitchRenderProps;

package/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchRenderProps } from './Switch.types';

package/components/Table/Table.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { TableProps } from './Table.types';
+
+export function Table<T>({
+  columns,
+  rows,
+  onRowClick = () => {},
+  classNames,
+}: TableProps<T>) {
+  return (
+    <table className={cn(classNames?.table)}>
+      <thead className={cn(classNames?.thead)}>
+        <tr className={cn(classNames?.theadTr)}>
+          {columns.map((column) => (
+            <th
+              key={String(column.id)}
+              className={cn(classNames?.th)}
+              data-th-header={column.label.toLowerCase()}
+            >
+              {column.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody className={cn(classNames?.tbody)}>
+        {Object.entries(rows).map(([key, row]) => (
+          <tr
+            key={key}
+            onClick={() => onRowClick(row)}
+            className={cn(classNames?.tbodyTr)}
+          >
+            {columns.map((column) => (
+              <td
+                key={`${String(column.id)}_${key}`}
+                data-th={column.label.toLowerCase()}
+                className={cn(classNames?.td)}
+              >
+                {column.renderer
+                  ? column.renderer(row)
+                  : String(row[column.id as keyof T])}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default Table;

package/components/Table/Table.types.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export type TableProps<T> = {
+  columns: (
+    | {
+        id: keyof T;
+        label: string;
+        renderer?: (props: T) => ReactNode;
+      }
+    | {
+        id: string;
+        label: string;
+        renderer: (props: T) => ReactNode;
+      }
+  )[];
+  rows: T[];
+  onRowClick?: (row: T) => void;
+  classNames?: SlotsToClasses<
+    'table' | 'thead' | 'tbody' | 'theadTr' | 'tbodyTr' | 'th' | 'td'
+  >;
+};

package/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps } from './Table.types';

package/components/Tabs/Tab.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useContext } from 'react';
+import { Tab as AriaTab } from 'react-aria-components';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+import type { TabProps, TabRenderProps } from './Tab.types';
+import type { TabsProps } from './Tabs.types';
+import { TabsOrientationContext } from './Tabs.context';
+
+export function BaseTab({
+  orientation,
+  variant = 'base',
+  className,
+  children,
+  ...props
+}: TabProps & { orientation: TabsProps['orientation'] }) {
+  return (
+    <AriaTab
+      className={cn(
+        'flex items-center relative z-10',
+        'text-sm cursor-pointer forced-color-adjust-none',
+        'transition-all duration-300 ease-in-out',
+        'justify-center',
+        'disabled:opacity-50',
+        'selected:outline-0 hover:outline-0 hover:text-slate-500',
+        variant === 'underline' &&
+          orientation === 'vertical' &&
+          'justify-start',
+        'py-2 px-3',
+        variant === 'underline' && orientation === 'horizontal' && 'p-3',
+        variant === 'underline' &&
+          orientation === 'vertical' &&
+          'py-3 pr-3 pl-0',
+        (variant === 'underline' ||
+          variant === 'outline' ||
+          variant === 'enclosed') &&
+          'text-slate-800',
+        variant === 'solid' && 'text-slate-400',
+        (variant === 'underline' || variant === 'outline') &&
+          'selected:text-slate-800',
+        (variant === 'solid' || variant === 'enclosed') &&
+          'selected:text-slate-100',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </AriaTab>
+  );
+}
+
+export function Tab({
+  variant = 'base',
+  children,
+  className,
+  classNames,
+  ...props
+}: TabProps & {
+  classNames?: SlotsToClasses<'overflow'>;
+}) {
+  const orientation = useContext(TabsOrientationContext);
+
+  return (
+    <BaseTab
+      orientation={orientation}
+      variant={variant}
+      className={className}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {(renderProps: TabRenderProps) => (
+        <>
+          {typeof children === 'function'
+            ? children({
+                defaultChildren: undefined,
+                ...renderProps,
+              })
+            : children}
+
+          {(renderProps.isFocusVisible || renderProps.isSelected) && (
+            <motion.span
+              className={cn(
+                'absolute z-0',
+                variant === 'solid' &&
+                  'inset-0 rounded-lg bg-slate-600 mix-blend-color',
+                variant === 'outline' &&
+                  'inset-0 rounded-lg border-solid border-2 border-slate-800',
+                variant === 'underline' &&
+                  'rounded-lg bg-slate-800 mix-blend-color bottom-0',
+                variant === 'underline' &&
+                  orientation === 'horizontal' &&
+                  'left-0 w-full h-px',
+                variant === 'underline' &&
+                  orientation === 'vertical' &&
+                  'right-0 w-px h-full',
+                variant === 'enclosed' &&
+                  'inset-0 border-solid border-1 border-slate-800 -mb-px border-b-0 rounded-t-lg rounded-b-none bg-white mix-blend-difference',
+                variant === 'base' && 'hidden',
+                classNames?.overflow
+              )}
+              layoutId={variant}
+              transition={{
+                type: 'spring',
+                bounce: 0.2,
+                duration: 0.75,
+              }}
+            />
+          )}
+        </>
+      )}
+    </BaseTab>
+  );
+}
+
+export default Tab;

package/components/Tabs/Tab.types.ts

@@ -0,0 +1,10 @@
+import type {
+  TabProps as AriaTabProps,
+  TabRenderProps as AriaTabRenderProps,
+} from 'react-aria-components';
+
+export interface TabProps extends AriaTabProps {
+  variant?: 'solid' | 'outline' | 'underline' | 'enclosed' | 'base';
+}
+
+export type TabRenderProps = AriaTabRenderProps;

package/components/Tabs/TabList.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useContext } from 'react';
+import { TabList as AriaTabList } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import { BaseTab } from './Tab';
+import type { TabListProps } from './TabList.types';
+import { TabsOrientationContext } from './Tabs.context';
+
+export function TabList({
+  items,
+  children,
+  variant = 'base',
+  className,
+  ...props
+}: TabListProps) {
+  const orientation = useContext(TabsOrientationContext);
+
+  return (
+    <AriaTabList
+      className={cn(
+        'flex flex-row w-full flex-wrap gap-2 relative',
+        orientation === 'vertical' &&
+          'orientation-vertical:max-w-max orientation-vertical:flex-col orientation-vertical:justify-start',
+        [
+          variant === 'solid' && ['bg-slate-200 rounded-xl p-1'],
+          variant === 'outline' && [
+            'border-solid border-2 border-slate-200 rounded-xl p-1',
+          ],
+          variant === 'underline' &&
+            orientation === 'vertical' && [
+              'before:block before:absolute before:inset-y-0 before:right-0 before:w-px before:bg-slate-200',
+            ],
+          variant === 'underline' &&
+            orientation === 'horizontal' && [
+              'before:block before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-slate-200',
+            ],
+        ],
+        className
+      )}
+      items={items}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children ||
+        ((item) => <BaseTab orientation={orientation}>{item.title}</BaseTab>)}
+    </AriaTabList>
+  );
+}
+
+export default TabList;

package/components/Tabs/TabList.types.ts

@@ -0,0 +1,12 @@
+import type { TabListProps as AriaTabListProps } from 'react-aria-components';
+import type { ReactNode } from 'react';
+
+export type TabItemType = {
+  id: number | string;
+  title: ReactNode;
+  content: ReactNode;
+};
+
+export interface TabListProps extends AriaTabListProps<TabItemType> {
+  variant?: 'solid' | 'outline' | 'underline' | 'base';
+}

package/components/Tabs/TabPanel.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { TabPanel as AriaTabPanel } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { TabPanelProps } from './TabPanel.types';
+
+export function TabPanel({ children, className, ...props }: TabPanelProps) {
+  return (
+    <AriaTabPanel
+      className={cn('flex grow py-4 px-0', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </AriaTabPanel>
+  );
+}
+
+export default TabPanel;

package/components/Tabs/TabPanel.types.ts

@@ -0,0 +1,3 @@
+import { TabPanelProps as AriaTabPanelProps } from 'react-aria-components';
+
+export type TabPanelProps = AriaTabPanelProps;

package/components/Tabs/Tabs.context.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { createContext } from 'react';
+import type { TabsProps } from './Tabs.types';
+
+export const TabsOrientationContext =
+  createContext<TabsProps['orientation']>('horizontal');
+
+export default TabsOrientationContext;

package/components/Tabs/Tabs.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Tabs as AriaTabs } from 'react-aria-components';
+import { LayoutGroup } from 'framer-motion';
+import { useId } from 'react';
+import { cn } from '../../utils/cn';
+import type { TabsProps } from './Tabs.types';
+import { TabList } from './TabList';
+import { Tab } from './Tab';
+import { TabPanel } from './TabPanel';
+import { TabsOrientationContext } from './Tabs.context';
+
+export function Tabs({ children, className, ...props }: TabsProps) {
+  const id = useId();
+
+  return (
+    <TabsOrientationContext.Provider value={props.orientation ?? 'horizontal'}>
+      <LayoutGroup id={id}>
+        <AriaTabs
+          className={cn(
+            'flex flex-col w-full px-0 py-2',
+            props.orientation === 'vertical' && 'orientation-vertical:flex-row',
+            className
+          )}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...props}
+        >
+          {children}
+        </AriaTabs>
+      </LayoutGroup>
+    </TabsOrientationContext.Provider>
+  );
+}
+
+Tabs.List = TabList;
+Tabs.Tab = Tab;
+Tabs.Panel = TabPanel;
+
+export default Tabs;

package/components/Tabs/Tabs.types.ts

@@ -0,0 +1,3 @@
+import type { TabsProps as AriaTabsProps } from 'react-aria-components';
+
+export type TabsProps = AriaTabsProps;

package/components/Tabs/index.ts

@@ -0,0 +1,9 @@
+export { BaseTab, Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';
+export { Tabs } from './Tabs';
+export { TabsOrientationContext } from './Tabs.context';
+export type { TabProps, TabRenderProps } from './Tab.types';
+export type { TabItemType, TabListProps } from './TabList.types';
+export type { TabPanelProps } from './TabPanel.types';
+export type { TabsProps } from './Tabs.types';

package/components/TimeInput/TimeInput.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Form } from 'react-aria-components';
+import { action } from '@storybook/addon-actions';
+import { TimeInput } from './TimeInput';
+import { TimeInputProps } from './TimeInput.types';
+import { Button } from '../Button/Button';
+
+type Story = StoryObj<typeof TimeInput>;
+
+function Component({ children, ...props }: TimeInputProps) {
+  return (
+    <Form
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+        width: '20rem',
+      }}
+      onSubmit={(e) => {
+        e.preventDefault();
+        action('onPress');
+      }}
+    >
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <TimeInput {...props}>{children}</TimeInput>
+      <Button size="sm" type="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+const meta: Meta<typeof TimeInput> = {
+  component: Component,
+};
+
+export default meta;
+
+export const Base: Story = {
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'The content to display as label',
+    },
+    description: {
+      control: 'text',
+      description: 'The content to display as description',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled.',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the input value is invalid.',
+    },
+    isRequired: {
+      control: 'boolean',
+      description:
+        'Whether user input is required on the input before form submission.',
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description:
+        'Whether the input can be selected but not changed by the user.',
+    },
+    hideTimeZone: {
+      control: 'boolean',
+      description: 'Whether to hide the time zone abbreviation.',
+    },
+    shouldForceLeadingZeros: {
+      control: 'boolean',
+      description:
+        'Whether to always show leading zeros in the hour field. By default, this is determined by the user&aposs locale.',
+    },
+    hourCycle: {
+      options: [12, 24],
+      control: { type: 'inline-radio' },
+      description:
+        'Whether to display the time in 12 or 24 hour format. By default, this is determined by the user&apos;s locale.',
+    },
+    granularity: {
+      options: ['hour', 'minute', 'second'],
+      control: { type: 'inline-radio' },
+      description:
+        'Determines the smallest unit that is displayed in the time picker',
+      table: {
+        defaultValue: { summary: 'minute' },
+      },
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'The current error messages for the input if it is invalid.',
+    },
+    style: {
+      control: 'object',
+      description:
+        'The inline style for the element. A function may be provided to compute the style based on component state',
+    },
+    className: {
+      control: 'text',
+      description: 'The CSS className for the element.',
+    },
+    autoFocus: {
+      control: 'boolean',
+      description: 'Whether the element should receive focus on render.',
+    },
+  },
+  args: {
+    label: '',
+    description: '',
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    isReadOnly: false,
+    errorMessage: 'Please fill out this field.',
+    shouldForceLeadingZeros: false,
+    hideTimeZone: false,
+    hourCycle: 24,
+    granularity: 'minute',
+    autoFocus: false,
+    style: {},
+    className: '',
+  },
+};

package/components/TimeInput/TimeInput.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import {
+  DateInput,
+  DateSegment,
+  FieldError,
+  Label,
+  Text,
+  TimeField,
+} from 'react-aria-components';
+import { TimeInputProps } from './TimeInput.types';
+import { cn } from '../../utils/cn';
+
+export function TimeInput({
+  label,
+  description,
+  errorMessage,
+  className,
+  classNames,
+  ...props
+}: TimeInputProps) {
+  return (
+    <TimeField
+      className={cn('text-slate-900', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label className={cn('flex text-slate-500 text-sm', classNames?.label)}>
+        {label}
+      </Label>
+      <DateInput
+        className={cn(
+          'flex items-center',
+          'border-solid border border-slate-300 rounded-md',
+          'text-sm text-slate-900',
+          'h-10 px-1 py-0 m-0 w-full',
+          'bg-white',
+          'transition-all duration-200 ease-in-out',
+          'hover:border-slate-400',
+          'focus-within:outline-2 focus-within:outline focus-within:outline-slate-200 focus-within:border-slate-400',
+          'disabled:border-slate-200 disabled:bg-slate-100',
+          'invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600',
+          'invalid:hover:border-red-600 invalid:focus-within:border-red-600 invalid:focus-within:outline-red-200',
+          classNames?.input
+        )}
+      >
+        {(segment) => (
+          <DateSegment
+            segment={segment}
+            className={cn(
+              'p-1 tabular-nums text-end text-slate-900',
+              'invalid:text-red-500',
+              'disabled:cursor-default disabled:select-none disabled:text-slate-400',
+              'focus:text-slate-900 focus:bg-slate-200 focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-red-500 focus:invalid:text-white',
+              'type-literal:p-0.5',
+              'data-[placeholder]:text-slate-400 data-[placeholder]:invalid:text-red-500 data-[placeholder]:invalid:focus:text-white',
+              'aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-slate-500 aria-[readonly]:focus-visible:outline-1',
+              'aria-[readonly]:focus:outline aria-[readonly]:focus:outline-slate-500 aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2',
+              classNames?.segment
+            )}
+          />
+        )}
+      </DateInput>
+      {description && (
+        <Text
+          className={cn('flex text-slate-500 text-sm', classNames?.description)}
+          slot="description"
+        >
+          {description}
+        </Text>
+      )}
+      <FieldError
+        className={cn('flex text-red-500 text-sm', classNames?.error)}
+      >
+        {errorMessage}
+      </FieldError>
+    </TimeField>
+  );
+}
+
+export default TimeInput;

package/components/TimeInput/TimeInput.types.ts

@@ -0,0 +1,15 @@
+import type {
+  TimeFieldProps,
+  TimeValue,
+  ValidationResult,
+} from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface TimeInputProps extends TimeFieldProps<TimeValue> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  classNames?: SlotsToClasses<
+    'label' | 'input' | 'description' | 'error' | 'segment'
+  >;
+}

package/components/TimeInput/index.ts

@@ -0,0 +1,2 @@
+export { TimeInput } from './TimeInput';
+export type { TimeInputProps } from './TimeInput.types';