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

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

@@ -1,111 +0,0 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { IconCross } from "../../../icons";
-
-import { cn } from "../../lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border-primary p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "bg-surface-primary text-label-primary",
-        destructive: "destructive group border-fill-danger bg-fill-danger text-label-white",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border-primary bg-transparent px-3 text-sm font-medium ring-offset-surface-primary transition-colors hover:bg-surface-secondary group-[.destructive]:border-border-primary/40 group-[.destructive]:hover:border-fill-danger/30 group-[.destructive]:hover:bg-fill-danger group-[.destructive]:hover:text-label-white focus:outline-none focus:ring-2 focus:ring-actions-regular focus:ring-offset-2 group-[.destructive]:focus:ring-fill-danger disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-label-primary/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-label-white/50 hover:text-label-primary group-[.destructive]:hover:text-label-white focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-fill-danger group-[.destructive]:focus:ring-offset-fill-danger",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <IconCross className="h-4 w-4 fill-fill-primary" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};

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

@@ -1,46 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Toaster } from './toaster'
-import { Button } from './button'
-import { toast } from '../../hooks/use-toast'
-
-export default {
-  title: 'v2/Shadcn/Toaster',
-  component: Toaster,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Toaster>
-
-type Story = StoryObj<typeof Toaster>
-
-export const Default: Story = {
-  render: () => (
-    <div>
-      <div className="flex gap-2 flex-wrap">
-        <Button
-          variant="outline"
-          onClick={() => {
-            toast({
-              title: 'Event created',
-              description: 'Your event has been created successfully.',
-            })
-          }}
-        >
-          Show Toast
-        </Button>
-        <Button
-          variant="destructive"
-          onClick={() => {
-            toast({
-              variant: 'destructive',
-              title: 'Uh oh! Something went wrong.',
-              description: 'There was a problem with your request.',
-            })
-          }}
-        >
-          Show Destructive Toast
-        </Button>
-      </div>
-      <Toaster />
-    </div>
-  ),
-}

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

@@ -1,24 +0,0 @@
-import { useToast } from "../../hooks/use-toast";
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}

package/src/v2/shadcn/components/ui/toggle-group.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { ToggleGroup, ToggleGroupItem } from './toggle-group'
-
-function ToggleGroupSingle() {
-  return (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="left">Left</ToggleGroupItem>
-      <ToggleGroupItem value="center">Center</ToggleGroupItem>
-      <ToggleGroupItem value="right">Right</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-
-function ToggleGroupMultiple() {
-  return (
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
-      <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
-      <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-
-function ToggleGroupOutline() {
-  return (
-    <ToggleGroup type="single" variant="outline">
-      <ToggleGroupItem value="a">A</ToggleGroupItem>
-      <ToggleGroupItem value="b">B</ToggleGroupItem>
-      <ToggleGroupItem value="c">C</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-
-function ToggleGroupSmall() {
-  return (
-    <ToggleGroup type="single" size="sm">
-      <ToggleGroupItem value="1">1</ToggleGroupItem>
-      <ToggleGroupItem value="2">2</ToggleGroupItem>
-      <ToggleGroupItem value="3">3</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-
-function ToggleGroupLarge() {
-  return (
-    <ToggleGroup type="single" size="lg">
-      <ToggleGroupItem value="x">X</ToggleGroupItem>
-      <ToggleGroupItem value="y">Y</ToggleGroupItem>
-      <ToggleGroupItem value="z">Z</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-
-function ToggleGroupDisabled() {
-  return (
-    <ToggleGroup type="single" disabled>
-      <ToggleGroupItem value="a">A</ToggleGroupItem>
-      <ToggleGroupItem value="b">B</ToggleGroupItem>
-      <ToggleGroupItem value="c">C</ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
-
-export default {
-  title: 'v2/Shadcn/ToggleGroup',
-  component: ToggleGroup,
-  parameters: { layout: 'padded' },
-} as Meta<typeof ToggleGroup>
-
-type Story = StoryObj<typeof ToggleGroup>
-
-export const Single: Story = {
-  render: () => React.createElement(ToggleGroupSingle),
-}
-
-export const Multiple: Story = {
-  render: () => React.createElement(ToggleGroupMultiple),
-}
-
-export const Outline: Story = {
-  render: () => React.createElement(ToggleGroupOutline),
-}
-
-export const Small: Story = {
-  render: () => React.createElement(ToggleGroupSmall),
-}
-
-export const Large: Story = {
-  render: () => React.createElement(ToggleGroupLarge),
-}
-
-export const Disabled: Story = {
-  render: () => React.createElement(ToggleGroupDisabled),
-}

package/src/v2/shadcn/components/ui/toggle-group.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-import { toggleVariants } from "./toggle";
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: "default",
-  variant: "default",
-});
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
-    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };

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

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Toggle } from './toggle'
-
-export default {
-  title: 'v2/Shadcn/Toggle',
-  component: Toggle,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Toggle>
-
-type Story = StoryObj<typeof Toggle>
-
-export const Default: Story = { args: { children: 'Toggle' } }
-export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } }
-export const Small: Story = { args: { children: 'Small', size: 'sm' } }
-export const Large: Story = { args: { children: 'Large', size: 'lg' } }
-export const Disabled: Story = { args: { children: 'Disabled', disabled: true } }
-export const Pressed: Story = { args: { children: 'Pressed', defaultPressed: true } }
-export const OutlinePressed: Story = { args: { children: 'Outline Pressed', variant: 'outline', defaultPressed: true } }

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

@@ -1,37 +0,0 @@
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-surface-primary transition-colors hover:bg-surface-secondary hover:text-label-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-actions-regular focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-surface-primary-hover data-[state=on]:text-label-primary",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-border-primary bg-transparent hover:bg-surface-primary-hover hover:text-label-primary",
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };

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

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
-import { Button } from './button'
-
-export default {
-  title: 'v2/Shadcn/Tooltip',
-  component: Tooltip,
-  parameters: { layout: 'padded' },
-  decorators: [
-    (Story) => (
-      <TooltipProvider>
-        <Story />
-      </TooltipProvider>
-    ),
-  ],
-} as Meta<typeof Tooltip>
-
-type Story = StoryObj<typeof Tooltip>
-
-export const Default: Story = {
-  render: () => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Hover me</Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>This is a tooltip</p>
-      </TooltipContent>
-    </Tooltip>
-  ),
-}
-
-export const Top: Story = {
-  render: () => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Top tooltip</Button>
-      </TooltipTrigger>
-      <TooltipContent side="top">
-        <p>Shown on top</p>
-      </TooltipContent>
-    </Tooltip>
-  ),
-}
-
-export const Bottom: Story = {
-  render: () => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Bottom tooltip</Button>
-      </TooltipTrigger>
-      <TooltipContent side="bottom">
-        <p>Shown on bottom</p>
-      </TooltipContent>
-    </Tooltip>
-  ),
-}

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

@@ -1,28 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "../../lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border border-border-primary bg-surface-primary px-3 py-1.5 text-sm text-label-primary shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/v2/shadcn/components/ui/use-toast.ts

@@ -1,3 +0,0 @@
-import { useToast, toast } from '../../hooks/use-toast';
-
-export { useToast, toast };

package/src/v2/shadcn/hooks/use-mobile.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}

package/src/v2/shadcn/hooks/use-toast.ts

@@ -1,184 +0,0 @@
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "../components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-export { useToast, toast };