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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,77 @@
+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),
+}