vinta-schedule-design-system 0.1.0

package/src/ui/carousel.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import * as React from 'react';
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role='region'
+          aria-roledescription='carousel'
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className='overflow-hidden'>
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role='group'
+      aria-roledescription='slide'
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -left-12 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className='h-4 w-4' />
+      <span className='sr-only'>Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? 'top-1/2 -right-12 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className='h-4 w-4' />
+      <span className='sr-only'>Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

package/src/ui/checkbox.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Checkbox } from './checkbox';
+import { Label } from './label';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  // Leaf control: the Radix `Checkbox.Root` renders its own Indicator, so it
+  // takes no composed content — NO slot. These are real Radix Root props
+  // (§6: className/style stay unexposed).
+  argTypes: {
+    defaultChecked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    name: { control: 'text', description: 'Name submitted with the form' },
+    value: { control: 'text', description: 'Value submitted when checked' },
+  },
+  args: { defaultChecked: true },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className='flex items-center gap-2'>
+      <Checkbox id='sync' {...args} />
+      <Label htmlFor='sync'>Sync to Google Calendar</Label>
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <div className='flex flex-col gap-3'>
+      <div className='flex items-center gap-2'>
+        <Checkbox id='a' />
+        <Label htmlFor='a'>Unchecked</Label>
+      </div>
+      <div className='flex items-center gap-2'>
+        <Checkbox id='b' defaultChecked />
+        <Label htmlFor='b'>Checked</Label>
+      </div>
+      <div className='flex items-center gap-2'>
+        <Checkbox id='c' disabled />
+        <Label htmlFor='c'>Disabled</Label>
+      </div>
+    </div>
+  ),
+};

package/src/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground grid h-4 w-4 shrink-0 place-content-center rounded-sm border shadow focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('grid place-content-center text-current')}
+    >
+      <Check className='h-4 w-4' />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/ui/combobox.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '../story-types';
+import * as React from 'react';
+import { Combobox } from './combobox';
+
+const FRAMEWORKS: Array<{
+  value: string;
+  label: string;
+  description?: string;
+}> = [
+  { value: 'next', label: 'Next.js', description: 'React framework' },
+  { value: 'sveltekit', label: 'SvelteKit', description: 'Svelte framework' },
+  { value: 'nuxt', label: 'Nuxt.js', description: 'Vue framework' },
+  { value: 'remix', label: 'Remix', description: 'React framework' },
+  { value: 'astro', label: 'Astro', description: 'Static site builder' },
+];
+
+const meta = {
+  title: 'Components/Combobox',
+  component: Combobox,
+  tags: ['autodocs'],
+  // Leaf: Combobox renders its own trigger/popover/list — it takes no composed
+  // ReactNode children, so NO slot. `options` is data (an array of
+  // {value,label,description}), edited with the `object` control. `className`
+  // is deliberately not exposed (§6).
+  argTypes: {
+    options: {
+      control: 'object',
+      description: 'Selectable options: { value, label, description? }[]',
+    },
+    placeholder: { control: 'text' },
+    searchPlaceholder: { control: 'text' },
+    emptyText: { control: 'text', description: 'Shown when nothing matches' },
+    multiple: {
+      control: 'boolean',
+      description: 'Allow selecting more than one option',
+    },
+    isLoading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    options: FRAMEWORKS,
+    placeholder: 'Select a framework…',
+    searchPlaceholder: 'Search frameworks…',
+  },
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Hooks must live in components, not in story `render` functions
+// (react-hooks/rules-of-hooks) — hence the named wrappers.
+function SingleSelectStory() {
+  const [value, setValue] = React.useState('');
+  return (
+    <div className='w-64'>
+      <Combobox
+        options={FRAMEWORKS}
+        value={value}
+        onValueChange={setValue}
+        placeholder='Select a framework…'
+        searchPlaceholder='Search frameworks…'
+      />
+    </div>
+  );
+}
+
+function MultiSelectStory() {
+  const [values, setValues] = React.useState<string[]>([]);
+  return (
+    <div className='w-64'>
+      <Combobox
+        multiple
+        options={FRAMEWORKS}
+        value={values}
+        onValueChange={setValues}
+        placeholder='Select frameworks…'
+        searchPlaceholder='Search frameworks…'
+      />
+    </div>
+  );
+}
+
+function WithDescriptionsStory() {
+  const [value, setValue] = React.useState('');
+  return (
+    <div className='w-64'>
+      <Combobox
+        options={FRAMEWORKS}
+        value={value}
+        onValueChange={setValue}
+        placeholder='Select a framework…'
+      />
+    </div>
+  );
+}
+
+export const SingleSelect: Story = {
+  render: () => <SingleSelectStory />,
+};
+
+export const MultiSelect: Story = {
+  render: () => <MultiSelectStory />,
+};
+
+export const WithDescriptions: Story = {
+  render: () => <WithDescriptionsStory />,
+};
+
+export const Loading: Story = {
+  render: () => (
+    <div className='w-64'>
+      <Combobox
+        options={[]}
+        value={[]}
+        onValueChange={() => {}}
+        multiple
+        isLoading
+        placeholder='Select members…'
+        searchPlaceholder='Search members…'
+      />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className='w-64'>
+      <Combobox
+        options={FRAMEWORKS}
+        value='next'
+        onValueChange={() => {}}
+        disabled
+        placeholder='Select a framework…'
+      />
+    </div>
+  ),
+};

package/src/ui/combobox.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Badge } from './badge';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  /** Optional secondary line shown below the label */
+  description?: string;
+}
+
+interface ComboboxBaseProps {
+  options: ComboboxOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  /** Called on every keystroke in the search input. Use for server-side search. */
+  onSearchChange?: (search: string) => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  /**
+   * Forwarded to the trigger button so `<label htmlFor>` and the shadcn
+   * FormControl (Slot) id/aria wiring give the combobox an accessible name.
+   */
+  id?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+}
+
+interface ComboboxSingleProps extends ComboboxBaseProps {
+  multiple?: false;
+  value?: string;
+  onValueChange: (value: string) => void;
+}
+
+interface ComboboxMultipleProps extends ComboboxBaseProps {
+  multiple: true;
+  value?: string[];
+  onValueChange: (value: string[]) => void;
+}
+
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+
+// ---------------------------------------------------------------------------
+// Combobox
+// ---------------------------------------------------------------------------
+
+export function Combobox(props: ComboboxProps) {
+  const {
+    options,
+    placeholder = 'Select…',
+    searchPlaceholder = 'Search…',
+    emptyText = 'No results found.',
+    onSearchChange,
+    isLoading = false,
+    disabled = false,
+    className,
+    id,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedby,
+    'aria-invalid': ariaInvalid,
+  } = props;
+
+  const [open, setOpen] = React.useState(false);
+
+  const isMultiple = props.multiple === true;
+  const selectedValues: string[] = isMultiple
+    ? (props.value ?? [])
+    : props.value
+      ? [props.value]
+      : [];
+
+  const handleSelect = (optionValue: string) => {
+    if (isMultiple) {
+      const current = props.value ?? [];
+      const next = current.includes(optionValue)
+        ? current.filter((v) => v !== optionValue)
+        : [...current, optionValue];
+      (props as ComboboxMultipleProps).onValueChange(next);
+    } else {
+      (props as ComboboxSingleProps).onValueChange(
+        optionValue === props.value ? '' : optionValue
+      );
+      setOpen(false);
+    }
+  };
+
+  const handleRemoveBadge = (optionValue: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isMultiple) {
+      const current = props.value ?? [];
+      (props as ComboboxMultipleProps).onValueChange(
+        current.filter((v) => v !== optionValue)
+      );
+    }
+  };
+
+  const selectedOptions = selectedValues
+    .map((v) => options.find((o) => o.value === v))
+    .filter((o): o is ComboboxOption => o !== undefined);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type='button'
+          variant='outline'
+          role='combobox'
+          id={id}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedby}
+          aria-invalid={ariaInvalid}
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            'h-auto min-h-9 w-full justify-between',
+            isMultiple && selectedValues.length > 0 ? 'px-2 py-1.5' : '',
+            className
+          )}
+        >
+          {isMultiple && selectedOptions.length > 0 ? (
+            <span className='flex flex-wrap gap-1'>
+              {selectedOptions.map((o) => (
+                <Badge
+                  key={o.value}
+                  variant='secondary'
+                  className='gap-0.5 pr-1'
+                >
+                  {o.label}
+                  <button
+                    aria-label={`Remove ${o.label}`}
+                    className='hover:bg-muted ml-0.5 rounded-full'
+                    onMouseDown={(e) => handleRemoveBadge(o.value, e)}
+                  >
+                    <X className='h-3 w-3' />
+                  </button>
+                </Badge>
+              ))}
+            </span>
+          ) : (
+            <span className='text-muted-foreground font-normal'>
+              {!isMultiple && selectedOptions[0]
+                ? selectedOptions[0].label
+                : placeholder}
+            </span>
+          )}
+          <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        className='w-[var(--radix-popover-trigger-width)] p-0'
+        align='start'
+      >
+        <Command shouldFilter={!onSearchChange}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            onValueChange={onSearchChange}
+          />
+          <CommandList>
+            {isLoading ? (
+              <CommandEmpty>Searching…</CommandEmpty>
+            ) : (
+              <CommandEmpty>{emptyText}</CommandEmpty>
+            )}
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.includes(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={handleSelect}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4 shrink-0',
+                        isSelected ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                    <span className='flex flex-col'>
+                      <span>{option.label}</span>
+                      {option.description && (
+                        <span className='text-muted-foreground text-xs'>
+                          {option.description}
+                        </span>
+                      )}
+                    </span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}