@licklist/design 0.78.5-dev.92 → 0.78.5-dev.94

package/src/v2/shadcn/components/ui/carousel.stories.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from './carousel'
+import { Card, CardContent } from './card'
+
+function CarouselDefault() {
+  return (
+    <div className="w-full max-w-xs mx-auto">
+      <Carousel>
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  )
+}
+
+function CarouselThreePerView() {
+  return (
+    <div className="w-full max-w-sm mx-auto">
+      <Carousel>
+        <CarouselContent className="-ml-2">
+          {Array.from({ length: 8 }).map((_, index) => (
+            <CarouselItem key={index} className="pl-2 basis-1/3">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-2">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  )
+}
+
+function CarouselVertical() {
+  return (
+    <div className="w-full max-w-xs mx-auto">
+      <Carousel orientation="vertical" className="w-full max-w-xs">
+        <CarouselContent className="-mt-1 h-[200px]">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="pt-1 basis-1/2">
+              <Card>
+                <CardContent className="flex items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  )
+}
+
+export default {
+  title: 'v2/Shadcn/Carousel',
+  component: Carousel,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Carousel>
+
+type Story = StoryObj<typeof Carousel>
+
+export const Default: Story = {
+  render: () => React.createElement(CarouselDefault),
+}
+
+export const ThreePerView: Story = {
+  render: () => React.createElement(CarouselThreePerView),
+}
+
+export const Vertical: Story = {
+  render: () => React.createElement(CarouselVertical),
+}

package/src/v2/shadcn/components/ui/carousel.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { IconArrowLeft, IconArrowRight } from "../../../icons";
+
+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 undefined;
+      }
+
+      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"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <IconArrowLeft className="h-4 w-4 fill-fill-primary" />
+        <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"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <IconArrowRight className="h-4 w-4 fill-fill-primary" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

package/src/v2/shadcn/components/ui/checkbox.scss

@@ -0,0 +1,38 @@
+.bkit-checkbox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 2px solid var(--border-primary, #E8E9EF);
+  background: var(--surface-primary, #ffffff);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+
+  &[data-state='checked'],
+  &[data-state='indeterminate'] {
+    background: var(--fill-primary, #14215A);
+    border-color: var(--fill-primary, #14215A);
+    color: #ffffff;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--border-selected, #6200EE);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.bkit-checkbox__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}

package/src/v2/shadcn/components/ui/checkbox.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Checkbox } from './checkbox'
+import { Label } from './label'
+
+export default {
+  title: 'v2/Shadcn/Checkbox',
+  component: Checkbox,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Checkbox>
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = { args: { id: 'cb1' } }
+export const Checked: Story = { args: { id: 'cb2', defaultChecked: true } }
+export const Disabled: Story = { args: { id: 'cb3', disabled: true } }
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="cb4" />
+      <Label htmlFor="cb4">Accept terms and conditions</Label>
+    </div>
+  ),
+}

package/src/v2/shadcn/components/ui/checkbox.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cn } from "../../lib/utils";
+import './checkbox.scss';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn("bkit-checkbox", className)}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="bkit-checkbox__indicator">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20 6L9 17L4 12" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/v2/shadcn/components/ui/collapsible.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible'
+import { Button } from './button'
+
+function CollapsibleDefault() {
+  const [isOpen, setIsOpen] = React.useState(false)
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">3 items tagged</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            {isOpen ? 'Hide' : 'Show'}
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border border-border-primary px-4 py-3 text-sm">Item 1</div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border border-border-primary px-4 py-3 text-sm">Item 2</div>
+        <div className="rounded-md border border-border-primary px-4 py-3 text-sm">Item 3</div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function CollapsibleDefaultOpen() {
+  return (
+    <Collapsible defaultOpen className="w-[350px] space-y-2">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">Settings</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">Toggle</Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border border-border-primary px-4 py-3 text-sm">Always visible</div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border border-border-primary px-4 py-3 text-sm">Hidden content A</div>
+        <div className="rounded-md border border-border-primary px-4 py-3 text-sm">Hidden content B</div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+export default {
+  title: 'v2/Shadcn/Collapsible',
+  component: Collapsible,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Collapsible>
+
+type Story = StoryObj<typeof Collapsible>
+
+export const Default: Story = {
+  render: () => React.createElement(CollapsibleDefault),
+}
+
+export const DefaultOpen: Story = {
+  render: () => React.createElement(CollapsibleDefaultOpen),
+}

package/src/v2/shadcn/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/v2/shadcn/components/ui/command.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+} from './command'
+
+function CommandDefault() {
+  return (
+    <Command className="rounded-lg border border-border-primary shadow-md w-[350px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search</CommandItem>
+          <CommandItem>Settings</CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            Profile
+            <CommandShortcut>Cmd+P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            Billing
+            <CommandShortcut>Cmd+B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            Settings
+            <CommandShortcut>Cmd+S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+function CommandEmptyState() {
+  return (
+    <Command className="rounded-lg border border-border-primary shadow-md w-[350px]">
+      <CommandInput placeholder="Search..." value="nonexistent" />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+      </CommandList>
+    </Command>
+  )
+}
+
+export default {
+  title: 'v2/Shadcn/Command',
+  component: Command,
+  parameters: { layout: 'padded' },
+} as Meta<typeof Command>
+
+type Story = StoryObj<typeof Command>
+
+export const Default: Story = {
+  render: () => React.createElement(CommandDefault),
+}
+
+export const Empty: Story = {
+  render: () => React.createElement(CommandEmptyState),
+}

package/src/v2/shadcn/components/ui/command.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { IconSearch } from "../../../icons";
+
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent } from "./dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface-primary text-label-primary",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-label-secondary [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b border-border-primary px-3" cmdk-input-wrapper="">
+    <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50 fill-fill-secondary" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-label-secondary disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-label-primary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-label-secondary",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border-primary", className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-surface-primary-hover data-[selected=true]:text-label-primary data-[disabled=true]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-label-secondary", className)} {...props} />;
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};