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

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

@@ -1,23 +0,0 @@
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-
-import { cn } from "../../lib/utils";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-surface-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-fill-action" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-fill-action bg-surface-primary ring-offset-surface-primary transition-colors 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" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

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

@@ -1,63 +0,0 @@
-.bkit-switch {
-  display: inline-flex;
-  align-items: center;
-  width: 52px;
-  height: 28px;
-  flex-shrink: 0;
-  cursor: pointer;
-  border-radius: 9999px;
-  border: none;
-  padding: 2px;
-  transition: background-color 0.2s ease;
-  position: relative;
-
-  &[data-state='unchecked'] {
-    background: var(--surface-tertiary, #D1D5E0);
-  }
-
-  &[data-state='checked'] {
-    background: var(--fill-primary, #14215A);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--border-selected, #6200EE);
-    outline-offset: 2px;
-  }
-}
-
-.bkit-switch__thumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: #ffffff;
-  border-radius: 9999px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: transform 0.2s ease;
-  pointer-events: none;
-
-  &[data-state='unchecked'] {
-    transform: translateX(0);
-  }
-
-  &[data-state='checked'] {
-    transform: translateX(24px);
-  }
-}
-
-.bkit-switch__icon {
-  color: transparent;
-  transition: color 0.15s ease;
-
-  &--check {
-    .bkit-switch__thumb[data-state='checked'] & {
-      color: var(--fill-primary, #14215A);
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Switch } from './switch'
-import { Label } from './label'
-
-export default {
-  title: 'v2/Shadcn/Switch',
-  component: Switch,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Switch>
-
-type Story = StoryObj<typeof Switch>
-
-export const Default: Story = { args: { id: 'sw1' } }
-export const Checked: Story = { args: { id: 'sw2', defaultChecked: true } }
-export const Disabled: Story = { args: { id: 'sw3', disabled: true } }
-export const WithLabel: Story = {
-  render: () => (
-    <div className="flex items-center gap-2">
-      <Switch id="sw4" />
-      <Label htmlFor="sw4">Enable notifications</Label>
-    </div>
-  ),
-}

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

@@ -1,24 +0,0 @@
-import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { cn } from "../../lib/utils";
-import './switch.scss';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn("bkit-switch", className)}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb className="bkit-switch__thumb">
-      <svg className="bkit-switch__icon bkit-switch__icon--check" width="14" height="14" viewBox="0 0 24 24" fill="none">
-        <path d="M20 6L9 17L4 12" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
-      </svg>
-    </SwitchPrimitives.Thumb>
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/v2/shadcn/components/ui/table-pagination.stories.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { TablePagination } from './table-pagination'
-
-function TablePaginationDefault() {
-  const [page, setPage] = React.useState(1)
-  return (
-    <div className="w-[500px] border border-border-primary rounded-md">
-      <TablePagination
-        currentPage={page}
-        totalPages={10}
-        totalItems={95}
-        itemsPerPage={10}
-        onPageChange={setPage}
-      />
-    </div>
-  )
-}
-
-export default {
-  title: 'v2/Shadcn/TablePagination',
-  component: TablePagination,
-  parameters: { layout: 'padded' },
-} as Meta<typeof TablePagination>
-
-type Story = StoryObj<typeof TablePagination>
-
-export const Default: Story = {
-  render: () => React.createElement(TablePaginationDefault),
-}
-
-export const FirstPage: Story = {
-  args: {
-    currentPage: 1,
-    totalPages: 5,
-    totalItems: 50,
-    itemsPerPage: 10,
-    onPageChange: () => {},
-  },
-}
-
-export const LastPage: Story = {
-  args: {
-    currentPage: 5,
-    totalPages: 5,
-    totalItems: 50,
-    itemsPerPage: 10,
-    onPageChange: () => {},
-  },
-}
-
-export const MiddlePage: Story = {
-  args: {
-    currentPage: 3,
-    totalPages: 5,
-    totalItems: 50,
-    itemsPerPage: 10,
-    onPageChange: () => {},
-  },
-}
-
-export const CustomEntityName: Story = {
-  args: {
-    currentPage: 2,
-    totalPages: 8,
-    totalItems: 156,
-    itemsPerPage: 20,
-    onPageChange: () => {},
-    entityName: 'users',
-  },
-}
-
-export const SinglePage: Story = {
-  args: {
-    currentPage: 1,
-    totalPages: 1,
-    totalItems: 5,
-    itemsPerPage: 10,
-    onPageChange: () => {},
-  },
-}

package/src/v2/shadcn/components/ui/table-pagination.tsx

@@ -1,61 +0,0 @@
-import { Button } from './button';
-import { IconArrowLeft, IconArrowRight } from '../../../icons';
-
-interface TablePaginationProps {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-  itemsPerPage: number;
-  onPageChange: (page: number) => void;
-  entityName?: string;
-}
-
-export function TablePagination({
-  currentPage,
-  totalPages,
-  totalItems,
-  itemsPerPage,
-  onPageChange,
-  entityName = 'entries',
-}: TablePaginationProps) {
-  const startItem = (currentPage - 1) * itemsPerPage + 1;
-  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-  
-  const isFirstPage = currentPage === 1;
-  const isLastPage = currentPage === totalPages;
-
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 border-t border-border-primary">
-      <div className="flex items-center gap-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => onPageChange(currentPage - 1)}
-          disabled={isFirstPage}
-          className="h-8 w-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover disabled:bg-disabled-lightest disabled:hover:bg-disabled-lightest disabled:opacity-100 disabled:cursor-not-allowed"
-        >
-          <IconArrowLeft className="h-4 w-4 fill-fill-primary" />
-        </Button>
-
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => onPageChange(currentPage + 1)}
-          disabled={isLastPage}
-          className="h-8 w-8 rounded-full bg-surface-action-soft hover:bg-surface-action-soft-hover disabled:bg-disabled-lightest disabled:hover:bg-disabled-lightest disabled:opacity-100 disabled:cursor-not-allowed"
-        >
-          <IconArrowRight className="h-4 w-4 fill-fill-primary" />
-        </Button>
-      </div>
-
-      <div className="flex flex-col">
-        <span className="text-label-primary text-sm font-medium">
-          Page {currentPage}
-        </span>
-        <span className="text-label-secondary text-xs">
-          Showing {entityName} {startItem}-{endItem} of {totalItems}
-        </span>
-      </div>
-    </div>
-  );
-}

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption } from './table'
-
-export default {
-  title: 'v2/Shadcn/Table',
-  component: Table,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Table>
-
-type Story = StoryObj<typeof Table>
-
-export const Default: Story = {
-  render: () => (
-    <Table>
-      <TableCaption>A list of recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {[
-          { id: 'INV001', status: 'Paid', method: 'Credit Card', amount: '£250.00' },
-          { id: 'INV002', status: 'Pending', method: 'PayPal', amount: '£150.00' },
-          { id: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '£350.00' },
-        ].map((row) => (
-          <TableRow key={row.id}>
-            <TableCell className="font-medium">{row.id}</TableCell>
-            <TableCell>{row.status}</TableCell>
-            <TableCell>{row.method}</TableCell>
-            <TableCell className="text-right">{row.amount}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  ),
-}

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

@@ -1,72 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  ),
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
-);
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-  ),
-);
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tfoot ref={ref} className={cn("border-t bg-surface-secondary/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
-  ),
-);
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn("border-b transition-colors data-[state=selected]:bg-surface-secondary hover:bg-surface-secondary/50", className)}
-      {...props}
-    />
-  ),
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={cn(
-        "h-12 px-4 text-left align-middle font-medium text-label-secondary [&:has([role=checkbox])]:pr-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
-  ),
-);
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn("mt-4 text-sm text-label-secondary", className)} {...props} />
-  ),
-);
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -1,85 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs'
-
-function TabsDefault() {
-  return (
-    <Tabs defaultValue="account" className="w-[400px]">
-      <TabsList>
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">
-        <div className="p-4 rounded-md border border-border-primary">
-          <h3 className="text-lg font-medium">Account</h3>
-          <p className="text-sm text-label-secondary mt-1">Make changes to your account here.</p>
-        </div>
-      </TabsContent>
-      <TabsContent value="password">
-        <div className="p-4 rounded-md border border-border-primary">
-          <h3 className="text-lg font-medium">Password</h3>
-          <p className="text-sm text-label-secondary mt-1">Change your password here.</p>
-        </div>
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-function TabsThree() {
-  return (
-    <Tabs defaultValue="overview" className="w-[500px]">
-      <TabsList>
-        <TabsTrigger value="overview">Overview</TabsTrigger>
-        <TabsTrigger value="analytics">Analytics</TabsTrigger>
-        <TabsTrigger value="reports">Reports</TabsTrigger>
-      </TabsList>
-      <TabsContent value="overview">
-        <p className="text-sm text-label-secondary p-4">Overview content</p>
-      </TabsContent>
-      <TabsContent value="analytics">
-        <p className="text-sm text-label-secondary p-4">Analytics content</p>
-      </TabsContent>
-      <TabsContent value="reports">
-        <p className="text-sm text-label-secondary p-4">Reports content</p>
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-function TabsWithDisabled() {
-  return (
-    <Tabs defaultValue="active" className="w-[400px]">
-      <TabsList>
-        <TabsTrigger value="active">Active</TabsTrigger>
-        <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
-        <TabsTrigger value="other">Other</TabsTrigger>
-      </TabsList>
-      <TabsContent value="active">
-        <p className="text-sm text-label-secondary p-4">Active tab content</p>
-      </TabsContent>
-      <TabsContent value="other">
-        <p className="text-sm text-label-secondary p-4">Other tab content</p>
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-export default {
-  title: 'v2/Shadcn/Tabs',
-  component: Tabs,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Tabs>
-
-type Story = StoryObj<typeof Tabs>
-
-export const Default: Story = {
-  render: () => React.createElement(TabsDefault),
-}
-
-export const ThreeTabs: Story = {
-  render: () => React.createElement(TabsThree),
-}
-
-export const DisabledTab: Story = {
-  render: () => React.createElement(TabsWithDisabled),
-}

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

@@ -1,53 +0,0 @@
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "../../lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-surface-secondary p-1 text-label-secondary",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-surface-primary transition-all data-[state=active]:bg-surface-primary data-[state=active]:text-label-primary data-[state=active]:shadow-sm 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",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-surface-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-actions-regular focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Textarea } from './textarea'
-
-export default {
-  title: 'v2/Shadcn/Textarea',
-  component: Textarea,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Textarea>
-
-type Story = StoryObj<typeof Textarea>
-
-export const Default: Story = { args: { placeholder: 'Type your message here.' } }
-export const WithValue: Story = { args: { defaultValue: 'This is a textarea with some content already filled in.', className: 'w-[400px]' } }
-export const Disabled: Story = { args: { placeholder: 'Disabled textarea', disabled: true } }
-export const WithRows: Story = { args: { placeholder: 'Tall textarea...', rows: 8, className: 'w-[400px]' } }

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

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-border-primary bg-surface-primary px-3 py-2 text-sm text-label-primary placeholder:text-label-secondary focus-visible:outline-none focus-visible:border-border-selected disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Textarea.displayName = "Textarea";
-
-export { Textarea };

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

@@ -1,77 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import {
-  Toast,
-  ToastProvider,
-  ToastViewport,
-  ToastTitle,
-  ToastDescription,
-  ToastAction,
-  ToastClose,
-} from './toast'
-
-function ToastDefault() {
-  return (
-    <ToastProvider>
-      <Toast open>
-        <div className="grid gap-1">
-          <ToastTitle>Scheduled: Catch up</ToastTitle>
-          <ToastDescription>Friday, February 10, 2025 at 5:57 PM</ToastDescription>
-        </div>
-        <ToastClose />
-      </Toast>
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
-
-function ToastDestructive() {
-  return (
-    <ToastProvider>
-      <Toast variant="destructive" open>
-        <div className="grid gap-1">
-          <ToastTitle>Uh oh! Something went wrong.</ToastTitle>
-          <ToastDescription>There was a problem with your request.</ToastDescription>
-        </div>
-        <ToastClose />
-      </Toast>
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
-
-function ToastWithAction() {
-  return (
-    <ToastProvider>
-      <Toast open>
-        <div className="grid gap-1">
-          <ToastTitle>Event created</ToastTitle>
-          <ToastDescription>Your event has been created successfully.</ToastDescription>
-        </div>
-        <ToastAction altText="Undo">Undo</ToastAction>
-        <ToastClose />
-      </Toast>
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
-
-export default {
-  title: 'v2/Shadcn/Toast',
-  component: Toast,
-  parameters: { layout: 'padded' },
-} as Meta<typeof Toast>
-
-type Story = StoryObj<typeof Toast>
-
-export const Default: Story = {
-  render: () => React.createElement(ToastDefault),
-}
-
-export const Destructive: Story = {
-  render: () => React.createElement(ToastDestructive),
-}
-
-export const WithAction: Story = {
-  render: () => React.createElement(ToastWithAction),
-}