@a2v2ai/uikit 0.0.38 → 0.0.39

package/Sidebar/Sidebar.tsx

@@ -1,414 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { ChevronDown, ChevronRight } from "lucide-react"
-
-import { cn } from "../lib/utils"
-
-/* -----------------------------------------------------------------------------
- * Context for Sidebar collapsed state
- * -------------------------------------------------------------------------- */
-
-interface SidebarContextValue {
-  collapsed: boolean
-  setCollapsed: (collapsed: boolean) => void
-}
-
-const SidebarContext = React.createContext<SidebarContextValue | undefined>(undefined)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a Sidebar")
-  }
-  return context
-}
-
-/* -----------------------------------------------------------------------------
- * Sidebar (Main Container)
- * -------------------------------------------------------------------------- */
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  collapsed?: boolean
-  onCollapsedChange?: (collapsed: boolean) => void
-  defaultCollapsed?: boolean
-}
-
-const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
-  ({ className, collapsed: controlledCollapsed, onCollapsedChange, defaultCollapsed = false, children, ...props }, ref) => {
-    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React.useState(defaultCollapsed)
-
-    const isControlled = controlledCollapsed !== undefined
-    const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed
-
-    const setCollapsed = React.useCallback((value: boolean) => {
-      if (!isControlled) {
-        setUncontrolledCollapsed(value)
-      }
-      onCollapsedChange?.(value)
-    }, [isControlled, onCollapsedChange])
-
-    return (
-      <SidebarContext.Provider value={{ collapsed, setCollapsed }}>
-        <div
-          ref={ref}
-          data-slot="sidebar"
-          data-collapsed={collapsed}
-          className={cn(
-            "flex h-full flex-col bg-white border-r border-grey-200 transition-all duration-300",
-            collapsed ? "w-[52px]" : "w-[240px]",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </SidebarContext.Provider>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-/* -----------------------------------------------------------------------------
- * SidebarHeader
- * -------------------------------------------------------------------------- */
-
-export type SidebarHeaderProps = React.HTMLAttributes<HTMLDivElement>
-
-const SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(
-  ({ className, children, ...props }, ref) => {
-    const { collapsed } = useSidebar()
-
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-header"
-        className={cn(
-          "flex shrink-0 items-center",
-          collapsed ? "justify-center p-2" : "p-4",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-SidebarHeader.displayName = "SidebarHeader"
-
-/* -----------------------------------------------------------------------------
- * SidebarContent
- * -------------------------------------------------------------------------- */
-
-export type SidebarContentProps = React.HTMLAttributes<HTMLDivElement>
-
-const SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(
-  ({ className, children, ...props }, ref) => {
-    const { collapsed } = useSidebar()
-
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-content"
-        className={cn(
-          "flex-1 overflow-y-auto",
-          collapsed ? "px-2 py-4" : "p-4",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-SidebarContent.displayName = "SidebarContent"
-
-/* -----------------------------------------------------------------------------
- * SidebarFooter
- * -------------------------------------------------------------------------- */
-
-export type SidebarFooterProps = React.HTMLAttributes<HTMLDivElement>
-
-const SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(
-  ({ className, children, ...props }, ref) => {
-    const { collapsed } = useSidebar()
-
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-footer"
-        className={cn(
-          "flex shrink-0 items-center border-t border-grey-200",
-          collapsed ? "justify-center p-2" : "p-4",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-SidebarFooter.displayName = "SidebarFooter"
-
-/* -----------------------------------------------------------------------------
- * SidebarGroup
- * -------------------------------------------------------------------------- */
-
-export type SidebarGroupProps = React.HTMLAttributes<HTMLDivElement>
-
-const SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(
-  ({ className, children, ...props }, ref) => {
-    const { collapsed } = useSidebar()
-
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-group"
-        className={cn(
-          "flex flex-col",
-          collapsed ? "gap-1" : "gap-0.5",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-SidebarGroup.displayName = "SidebarGroup"
-
-/* -----------------------------------------------------------------------------
- * SidebarGroupLabel
- * -------------------------------------------------------------------------- */
-
-export type SidebarGroupLabelProps = React.HTMLAttributes<HTMLDivElement>
-
-const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(
-  ({ className, children, ...props }, ref) => {
-    const { collapsed } = useSidebar()
-
-    if (collapsed) return null
-
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-group-label"
-        className={cn(
-          "px-3 py-2 text-xs font-normal text-grey-500",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-)
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
-
-/* -----------------------------------------------------------------------------
- * SidebarMenuItem
- * -------------------------------------------------------------------------- */
-
-const sidebarMenuItemVariants = cva(
-  "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-normal cursor-pointer transition-colors outline-none",
-  {
-    variants: {
-      active: {
-        true: "bg-grey-100 text-grey-900",
-        false: "text-grey-600 hover:bg-grey-50",
-      },
-    },
-    defaultVariants: {
-      active: false,
-    },
-  }
-)
-
-export interface SidebarMenuItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof sidebarMenuItemVariants> {
-  icon?: React.ReactNode
-  label: string
-  labelClassName?: string
-  badge?: React.ReactNode
-  hasChildren?: boolean
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-}
-
-const SidebarMenuItem = React.forwardRef<HTMLDivElement, SidebarMenuItemProps>(
-  ({ className, icon, label, labelClassName, badge, active, hasChildren, expanded, onExpandedChange, children, onClick, ...props }, ref) => {
-    const { collapsed } = useSidebar()
-    const [internalExpanded, setInternalExpanded] = React.useState(expanded ?? false)
-
-    const isExpanded = expanded !== undefined ? expanded : internalExpanded
-
-    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (hasChildren) {
-        const newExpanded = !isExpanded
-        setInternalExpanded(newExpanded)
-        onExpandedChange?.(newExpanded)
-      }
-      onClick?.(e)
-    }
-
-    if (collapsed) {
-      return (
-        <div
-          ref={ref}
-          data-slot="sidebar-menu-item"
-          className={cn(
-            "flex items-center justify-center size-9 rounded-lg cursor-pointer transition-colors mx-auto",
-            active ? "bg-grey-100 text-grey-900" : "text-grey-600 hover:bg-grey-50",
-            className
-          )}
-          onClick={onClick}
-          {...props}
-        >
-          {icon && <span className="size-4">{icon}</span>}
-        </div>
-      )
-    }
-
-    return (
-      <div data-slot="sidebar-menu-item-wrapper">
-        <div
-          ref={ref}
-          data-slot="sidebar-menu-item"
-          className={cn(sidebarMenuItemVariants({ active }), className)}
-          onClick={handleClick}
-          {...props}
-        >
-          {icon && <span className="size-4 shrink-0">{icon}</span>}
-          <span className={cn("flex-1 truncate", labelClassName)}>{label}</span>
-          {badge && <span className="shrink-0">{badge}</span>}
-          {hasChildren && (
-            <span className="size-4 shrink-0 text-grey-400">
-              {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-            </span>
-          )}
-        </div>
-        {hasChildren && isExpanded && children && (
-          <div className="ml-6 mt-1 flex flex-col">
-            {children}
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-SidebarMenuItem.displayName = "SidebarMenuItem"
-
-/* -----------------------------------------------------------------------------
- * SidebarSubMenuItem
- * -------------------------------------------------------------------------- */
-
-const sidebarSubMenuItemVariants = cva(
-  "flex items-center px-3 py-2 rounded-md text-sm font-normal cursor-pointer transition-colors outline-none",
-  {
-    variants: {
-      active: {
-        true: "bg-grey-100 text-grey-900",
-        false: "text-grey-500 hover:bg-grey-50 hover:text-grey-700",
-      },
-    },
-    defaultVariants: {
-      active: false,
-    },
-  }
-)
-
-export interface SidebarSubMenuItemProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof sidebarSubMenuItemVariants> {
-  label: string
-}
-
-const SidebarSubMenuItem = React.forwardRef<HTMLDivElement, SidebarSubMenuItemProps>(
-  ({ className, label, active, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-sub-menu-item"
-        className={cn(sidebarSubMenuItemVariants({ active }), className)}
-        {...props}
-      >
-        <span className="truncate">{label}</span>
-      </div>
-    )
-  }
-)
-SidebarSubMenuItem.displayName = "SidebarSubMenuItem"
-
-/* -----------------------------------------------------------------------------
- * SidebarSeparator
- * -------------------------------------------------------------------------- */
-
-export type SidebarSeparatorProps = React.HTMLAttributes<HTMLDivElement>
-
-const SidebarSeparator = React.forwardRef<HTMLDivElement, SidebarSeparatorProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        data-slot="sidebar-separator"
-        className={cn("my-2 h-px bg-grey-200", className)}
-        {...props}
-      />
-    )
-  }
-)
-SidebarSeparator.displayName = "SidebarSeparator"
-
-/* -----------------------------------------------------------------------------
- * SidebarToggle
- * -------------------------------------------------------------------------- */
-
-export type SidebarToggleProps = React.ButtonHTMLAttributes<HTMLButtonElement>
-
-const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
-  ({ className, children, ...props }, ref) => {
-    const { collapsed, setCollapsed } = useSidebar()
-
-    return (
-      <button
-        ref={ref}
-        data-slot="sidebar-toggle"
-        type="button"
-        className={cn(
-          "flex items-center justify-center p-2 rounded-md text-grey-500 hover:bg-grey-100 hover:text-grey-700 transition-colors",
-          className
-        )}
-        onClick={() => setCollapsed(!collapsed)}
-        {...props}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-SidebarToggle.displayName = "SidebarToggle"
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  Sidebar,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenuItem,
-  SidebarSubMenuItem,
-  SidebarSeparator,
-  SidebarToggle,
-  useSidebar,
-  sidebarMenuItemVariants,
-  sidebarSubMenuItemVariants,
-}

package/Sidebar/index.ts

@@ -1,28 +0,0 @@
-export {
-  Sidebar,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenuItem,
-  SidebarSubMenuItem,
-  SidebarSeparator,
-  SidebarToggle,
-  useSidebar,
-  sidebarMenuItemVariants,
-  sidebarSubMenuItemVariants,
-} from "./Sidebar"
-
-export type {
-  SidebarProps,
-  SidebarHeaderProps,
-  SidebarContentProps,
-  SidebarFooterProps,
-  SidebarGroupProps,
-  SidebarGroupLabelProps,
-  SidebarMenuItemProps,
-  SidebarSubMenuItemProps,
-  SidebarSeparatorProps,
-  SidebarToggleProps,
-} from "./Sidebar"

package/Skeleton/Skeleton.stories.tsx

@@ -1,117 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Flex } from "../Flex/Flex"
-import { Typography } from "../Typography/Typography"
-import { Skeleton } from "./Skeleton"
-
-const meta: Meta<typeof Skeleton> = {
-  title: "Components/Skeleton",
-  component: Skeleton,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => <Skeleton className="w-[100px] h-[20px]" />,
-}
-
-export const Card: Story = {
-  render: () => (
-    <div className="flex items-center space-x-4">
-      <Skeleton className="h-12 w-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  ),
-}
-
-export const Text: Story = {
-  render: () => (
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[300px]" />
-      <Skeleton className="h-4 w-[250px]" />
-      <Skeleton className="h-4 w-[280px]" />
-    </div>
-  ),
-}
-
-export const Avatar: Story = {
-  render: () => <Skeleton className="h-12 w-12 rounded-full" />,
-}
-
-export const Button: Story = {
-  render: () => <Skeleton className="h-9 w-[100px] rounded-lg" />,
-}
-
-export const Image: Story = {
-  render: () => <Skeleton className="h-[200px] w-[300px] rounded-lg" />,
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <Flex  gap={8}>
-      <Typography variant="h4" className="text-white">Skeleton Loading States</Typography>
-
-      <Flex  gap={4}>
-        <Typography variant="body2" className="text-grey-400">User Card</Typography>
-        <div className="flex items-center space-x-4 bg-white p-4 rounded-lg w-[350px]">
-          <Skeleton className="h-12 w-12 rounded-full" />
-          <div className="space-y-2 flex-1">
-            <Skeleton className="h-4 w-3/4" />
-            <Skeleton className="h-3 w-1/2" />
-          </div>
-        </div>
-      </Flex>
-
-      <Flex  gap={4}>
-        <Typography variant="body2" className="text-grey-400">Article Preview</Typography>
-        <div className="space-y-3 bg-white p-4 rounded-lg w-[350px]">
-          <Skeleton className="h-[150px] w-full rounded-md" />
-          <Skeleton className="h-5 w-3/4" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-5/6" />
-          <div className="flex items-center space-x-4 pt-2">
-            <Skeleton className="h-8 w-8 rounded-full" />
-            <Skeleton className="h-3 w-24" />
-          </div>
-        </div>
-      </Flex>
-
-      <Flex  gap={4}>
-        <Typography variant="body2" className="text-grey-400">Table Row</Typography>
-        <div className="space-y-2 bg-white p-4 rounded-lg w-[400px]">
-          {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="flex items-center space-x-4">
-              <Skeleton className="h-4 w-4" />
-              <Skeleton className="h-4 w-[120px]" />
-              <Skeleton className="h-4 w-[80px]" />
-              <Skeleton className="h-4 w-[60px]" />
-            </div>
-          ))}
-        </div>
-      </Flex>
-
-      <Flex  gap={4}>
-        <Typography variant="body2" className="text-grey-400">Form</Typography>
-        <div className="space-y-4 bg-white p-4 rounded-lg w-[300px]">
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-16" />
-            <Skeleton className="h-9 w-full rounded-lg" />
-          </div>
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-9 w-full rounded-lg" />
-          </div>
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-      </Flex>
-    </Flex>
-  ),
-}

package/Skeleton/Skeleton.tsx

@@ -1,16 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../lib/utils"
-
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>
-
-function Skeleton({ className, ...props }: SkeletonProps) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-grey-100", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }