@clicktap/ui 0.14.18 → 0.14.25

package/components/Slider/Slider.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import {
-  Label,
-  Slider as AriaSlider,
-  SliderOutput,
-  SliderTrack,
-  SliderThumb,
-} from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { SliderProps } from './Slider.types';
-
-export function Slider({
-  label,
-  showOutput = true,
-  thumbLabels,
-  classNames,
-  orientation,
-  isDisabled,
-  children,
-  ...props
-}: SliderProps) {
-  return (
-    <AriaSlider
-      orientation={orientation}
-      isDisabled={isDisabled}
-      className={cn(
-        'data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:flex data-[orientation="horizontal"]:flex-wrap',
-        'data-[orientation="vertical"]:w-8 data-[orientation="vertical"]:block data-[orientation="vertical"]:h-full',
-        classNames?.base
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {children || (
-        <>
-          {(label || showOutput) && (
-            <div
-              className={cn(
-                'w-full flex justify-between items-center',
-                orientation === 'vertical' && 'gap-2 w-max mb-2',
-                classNames?.outputWrapper
-              )}
-            >
-              <Label
-                className={cn(
-                  'flex-1 text-sm',
-                  isDisabled && 'opacity-50',
-                  classNames?.label
-                )}
-              >
-                {label}
-              </Label>
-
-              {showOutput && (
-                <SliderOutput
-                  className={cn(
-                    'flex flex-initial ml-auto justify-end text-sm',
-                    isDisabled && 'opacity-50',
-                    classNames?.output
-                  )}
-                >
-                  {({ state }) =>
-                    state.values
-                      .map((_, i) => state.getThumbValueLabel(i))
-                      .join(' – ')
-                  }
-                </SliderOutput>
-              )}
-            </div>
-          )}
-
-          <SliderTrack
-            className={cn(
-              'data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:h-8',
-              'data-[orientation="vertical"]:w-8 data-[orientation="vertical"]:h-full',
-              'transition-all duration-200 ease',
-              'before:bg-slate-300 before:block before:absolute cursor-pointer',
-              'data-[orientation="horizontal"]:before:w-full data-[orientation="horizontal"]:before:h-0.5',
-              'data-[orientation="horizontal"]:before:top-1/2 data-[orientation="horizontal"]:before:-translate-y-1/2',
-              'data-[orientation="vertical"]:before:w-0.5 data-[orientation="vertical"]:before:h-full data-[orientation="vertical"]:before:left-1/2 data-[orientation="vertical"]:before:-translate-y-1/2 data-[orientation="vertical"]:before:-translate-x-1/2',
-              isDisabled && 'opacity-50 before:cursor-default',
-              classNames?.track
-            )}
-          >
-            {({ state }) =>
-              state.values.map((_, i) => (
-                <SliderThumb
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={i}
-                  index={i}
-                  aria-label={thumbLabels?.[i]}
-                  className={cn(
-                    'w-6 h-6 bg-slate-300 forced-color-adjust-none cursor-pointer top-1/2',
-                    'border-2 border-slate-400 rounded-full',
-                    isDisabled && 'cursor-default',
-                    orientation === 'vertical' && 'left-1/2',
-                    classNames?.thumb
-                  )}
-                />
-              ))
-            }
-          </SliderTrack>
-        </>
-      )}
-    </AriaSlider>
-  );
-}
-
-export default Slider;

package/components/Slider/Slider.types.ts

@@ -1,11 +0,0 @@
-import type { SliderProps as AriaSliderProps } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export type SliderProps = AriaSliderProps & {
-  label?: string;
-  showOutput?: boolean;
-  thumbLabels?: string[];
-  classNames?: SlotsToClasses<
-    'base' | 'label' | 'output' | 'outputWrapper' | 'track' | 'thumb'
-  >;
-};

package/components/Slider/index.ts

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

package/components/Switch/Switch.tsx

@@ -1,63 +0,0 @@
-'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

@@ -1,8 +0,0 @@
-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

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

package/components/Table/Table.tsx

@@ -1,52 +0,0 @@
-'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

@@ -1,22 +0,0 @@
-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

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

package/components/Tabs/Tab.tsx

@@ -1,118 +0,0 @@
-'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

@@ -1,10 +0,0 @@
-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

@@ -1,51 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-'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

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

package/components/Tabs/Tabs.context.tsx

@@ -1,9 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-'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

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

package/components/Tabs/index.ts

@@ -1,9 +0,0 @@
-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';