@a2v2ai/uikit 0.0.38 → 0.0.39

package/Loader/Loader.stories.tsx

@@ -1,170 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Button } from "../Button/Button"
-import { Flex } from "../Flex/Flex"
-import { Typography } from "../Typography/Typography"
-import { Loader } from "./Loader"
-
-const meta: Meta<typeof Loader> = {
-  title: "Components/Loader",
-  component: Loader,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["mini", "small", "regular", "large"],
-      description: "The size of the loader",
-    },
-    color: {
-      control: "select",
-      options: ["main", "grey", "white", "current"],
-      description: "The color of the loader",
-    },
-    label: {
-      control: "text",
-      description: "Accessibility label for the loader",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof Loader>
-
-export const Default: Story = {
-  args: {
-    size: "regular",
-    color: "main",
-  },
-}
-
-export const Mini: Story = {
-  args: {
-    size: "mini",
-    color: "main",
-  },
-}
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    color: "main",
-  },
-}
-
-export const Regular: Story = {
-  args: {
-    size: "regular",
-    color: "main",
-  },
-}
-
-export const Large: Story = {
-  args: {
-    size: "large",
-    color: "main",
-  },
-}
-
-export const Grey: Story = {
-  args: {
-    size: "regular",
-    color: "grey",
-  },
-}
-
-export const White: Story = {
-  args: {
-    size: "regular",
-    color: "white",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-  decorators: [
-    (Story) => (
-      <Flex className="bg-main-600 p-4 rounded-lg">
-        <Story />
-      </Flex>
-    ),
-  ],
-}
-
-export const InButton: Story = {
-  render: () => (
-    <Button disabled>
-      <Loader size="small" color="current" className="mr-2" />
-      Loading...
-    </Button>
-  ),
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <Flex gap={8}>
-      {/* Sizes */}
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">Sizes</Typography>
-        <Flex direction="row" align="center" gap={6}>
-          <Flex align="center" gap={2}>
-            <Loader size="mini" />
-            <Typography variant="body3" color="main-500">Mini</Typography>
-          </Flex>
-          <Flex align="center" gap={2}>
-            <Loader size="small" />
-            <Typography variant="body3" color="main-500">Small</Typography>
-          </Flex>
-          <Flex align="center" gap={2}>
-            <Loader size="regular" />
-            <Typography variant="body3" color="main-500">Regular</Typography>
-          </Flex>
-          <Flex align="center" gap={2}>
-            <Loader size="large" />
-            <Typography variant="body3" color="main-500">Large</Typography>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/* Colors */}
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">Colors</Typography>
-        <Flex direction="row" align="center" gap={6}>
-          <Flex align="center" gap={2}>
-            <Loader color="main" />
-            <Typography variant="body3" color="main-500">Main</Typography>
-          </Flex>
-          <Flex align="center" gap={2}>
-            <Loader color="grey" />
-            <Typography variant="body3" color="main-500">Grey</Typography>
-          </Flex>
-          <Flex align="center" gap={2} className="bg-main-600 p-3 rounded-lg">
-            <Loader color="white" />
-            <Typography variant="body3" className="text-white">White</Typography>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/* Usage Examples */}
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">Usage Examples</Typography>
-        <Flex gap={4}>
-          <Flex direction="row" align="center" gap={4}>
-            <Button disabled>
-              <Loader size="small" color="current" className="mr-2" />
-              Loading...
-            </Button>
-            <Typography variant="body3" color="main-500">In Button</Typography>
-          </Flex>
-          <Flex direction="row" align="center" gap={4}>
-            <Flex direction="row" align="center" gap={2} className="text-main-600">
-              <Loader size="small" color="current" />
-              <Typography variant="body2">Processing...</Typography>
-            </Flex>
-            <Typography variant="body3" color="main-500">Inline with text</Typography>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  ),
-}

package/Loader/Loader.tsx

@@ -1,62 +0,0 @@
-import * as React from "react"
-import { Loader2 } from "lucide-react"
-import { cva } from "class-variance-authority"
-
-import { Flex } from "../Flex/Flex"
-import { Typography } from "../Typography/Typography"
-import { cn } from "../lib/utils"
-
-type LoaderSize = "mini" | "small" | "regular" | "large"
-type LoaderColor = "main" | "grey" | "white" | "current"
-
-const loaderVariants = cva(
-  "animate-spin",
-  {
-    variants: {
-      size: {
-        mini: "size-3",
-        small: "size-4",
-        regular: "size-6",
-        large: "size-8",
-      },
-      color: {
-        main: "text-main-600",
-        grey: "text-grey-600",
-        white: "text-white",
-        current: "text-current",
-      },
-    },
-    defaultVariants: {
-      size: "regular",
-      color: "main",
-    },
-  }
-)
-
-export type LoaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
-  size?: LoaderSize
-  color?: LoaderColor
-  /** Optional label for accessibility */
-  label?: string
-}
-
-const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
-  ({ className, size, color, label = "Loading...", ...props }, ref) => (
-    <Flex
-      ref={ref}
-      role="status"
-      aria-label={label}
-      align="center"
-      justify="center"
-      className={cn("inline-flex", className)}
-      {...props}
-    >
-      <Loader2 className={cn(loaderVariants({ size, color }))} />
-      <Typography className="sr-only">{label}</Typography>
-    </Flex>
-  )
-)
-Loader.displayName = "Loader"
-
-export { Loader, loaderVariants }
-export type { LoaderSize, LoaderColor }

package/Menubar/Menubar.stories.tsx

@@ -1,382 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Flex } from "../Flex/Flex"
-import { Typography } from "../Typography/Typography"
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-  MenubarLabel,
-} from "./Menubar"
-
-const meta: Meta<typeof Menubar> = {
-  title: "Components/Menubar",
-  component: Menubar,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-}
-
-export default meta
-type Story = StoryObj<typeof Menubar>
-
-export const Default: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>New Incognito Window</MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Share</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Email link</MenubarItem>
-              <MenubarItem>Messages</MenubarItem>
-              <MenubarItem>Notes</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>
-            Print... <MenubarShortcut>Ctrl+P</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Find</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Search the web</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Find...</MenubarItem>
-              <MenubarItem>Find Next</MenubarItem>
-              <MenubarItem>Find Previous</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>
-            Cut <MenubarShortcut>Ctrl+X</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Copy <MenubarShortcut>Ctrl+C</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Paste <MenubarShortcut>Ctrl+V</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>
-            Always Show Full URLs
-          </MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Reload <MenubarShortcut>Ctrl+R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Force Reload <MenubarShortcut>Ctrl+Shift+R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Toggle Fullscreen</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Hide Sidebar</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Profiles</MenubarTrigger>
-        <MenubarContent>
-          <MenubarRadioGroup value="andy">
-            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator />
-          <MenubarItem>Edit...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Add Profile...</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-}
-
-export const Simple: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>New</MenubarItem>
-          <MenubarItem>Open</MenubarItem>
-          <MenubarItem>Save</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Exit</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Undo</MenubarItem>
-          <MenubarItem>Redo</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Cut</MenubarItem>
-          <MenubarItem>Copy</MenubarItem>
-          <MenubarItem>Paste</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Help</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Documentation</MenubarItem>
-          <MenubarItem>About</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-}
-
-export const WithLabels: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>Actions</MenubarTrigger>
-        <MenubarContent>
-          <MenubarLabel>File Actions</MenubarLabel>
-          <MenubarItem>New File</MenubarItem>
-          <MenubarItem>New Folder</MenubarItem>
-          <MenubarSeparator />
-          <MenubarLabel>Edit Actions</MenubarLabel>
-          <MenubarItem>Rename</MenubarItem>
-          <MenubarItem>Delete</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-}
-
-export const WithCheckboxes: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>Options</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
-          <MenubarCheckboxItem>Show Status Bar</MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarCheckboxItem>Enable Spell Check</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>Auto Save</MenubarCheckboxItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-}
-
-export const WithRadioGroup: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>Theme</MenubarTrigger>
-        <MenubarContent>
-          <MenubarRadioGroup value="system">
-            <MenubarRadioItem value="light">Light</MenubarRadioItem>
-            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
-            <MenubarRadioItem value="system">System</MenubarRadioItem>
-          </MenubarRadioGroup>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Font Size</MenubarTrigger>
-        <MenubarContent>
-          <MenubarRadioGroup value="medium">
-            <MenubarRadioItem value="small">Small</MenubarRadioItem>
-            <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
-            <MenubarRadioItem value="large">Large</MenubarRadioItem>
-          </MenubarRadioGroup>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-}
-
-export const WithSubmenus: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>Insert</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Text</MenubarItem>
-          <MenubarSub>
-            <MenubarSubTrigger>Shape</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Rectangle</MenubarItem>
-              <MenubarItem>Circle</MenubarItem>
-              <MenubarItem>Triangle</MenubarItem>
-              <MenubarSub>
-                <MenubarSubTrigger>More Shapes</MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>Star</MenubarItem>
-                  <MenubarItem>Heart</MenubarItem>
-                  <MenubarItem>Arrow</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSub>
-            <MenubarSubTrigger>Image</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>From File...</MenubarItem>
-              <MenubarItem>From URL...</MenubarItem>
-              <MenubarItem>From Clipboard</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>Table</MenubarItem>
-          <MenubarItem>Chart</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <Flex gap={8}>
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">
-          Full Featured Menubar
-        </Typography>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                New <MenubarShortcut>Ctrl+N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                Open <MenubarShortcut>Ctrl+O</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarSub>
-                <MenubarSubTrigger>Export</MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>PDF</MenubarItem>
-                  <MenubarItem>PNG</MenubarItem>
-                  <MenubarItem>JPEG</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-              <MenubarSeparator />
-              <MenubarItem>Exit</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarCheckboxItem checked>Toolbar</MenubarCheckboxItem>
-              <MenubarCheckboxItem>Status Bar</MenubarCheckboxItem>
-              <MenubarSeparator />
-              <MenubarRadioGroup value="100">
-                <MenubarLabel>Zoom</MenubarLabel>
-                <MenubarRadioItem value="50">50%</MenubarRadioItem>
-                <MenubarRadioItem value="100">100%</MenubarRadioItem>
-                <MenubarRadioItem value="150">150%</MenubarRadioItem>
-              </MenubarRadioGroup>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </Flex>
-
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">
-          Minimal Menubar
-        </Typography>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>Menu</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>Option 1</MenubarItem>
-              <MenubarItem>Option 2</MenubarItem>
-              <MenubarItem>Option 3</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </Flex>
-
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">
-          Application Menubar
-        </Typography>
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>App</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>About</MenubarItem>
-              <MenubarItem>Preferences</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Quit</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Account</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>Profile</MenubarItem>
-              <MenubarItem>Settings</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Sign Out</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Help</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>Documentation</MenubarItem>
-              <MenubarItem>Support</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Check for Updates</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </Flex>
-    </Flex>
-  ),
-}