@a2v2ai/uikit 0.0.36 → 0.0.38

package/Sidebar/Sidebar.tsx

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

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

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

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