@licklist/design 0.78.5-dev.106 → 0.78.5-dev.107

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

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

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

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

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

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

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

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

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

@@ -1,132 +0,0 @@
-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,
-};