@xyhp915/slack-base-ui 0.0.1 → 0.0.3

package/src/components/index.ts

@@ -0,0 +1,186 @@
+// UI Components Export
+// 统一导出所有组件，方便使用
+
+// Basic Components
+export { Button } from './Button'
+export type { ButtonProps } from './Button'
+
+export { Avatar } from './Avatar'
+export type { AvatarProps } from './Avatar'
+
+export { Badge } from './Badge'
+export type { BadgeProps } from './Badge'
+
+export { Input } from './Input'
+export type { InputProps } from './Input'
+
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'
+
+export { Tooltip } from './Tooltip'
+export type { TooltipProps } from './Tooltip'
+
+// Popover Components
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverClose,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  ImperativePopoverProvider,
+  useImperativePopover,
+} from './Popover'
+export type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+  PopoverCloseProps,
+  ImperativePopoverOptions,
+  UseImperativePopoverReturn,
+} from './Popover'
+
+// Menu Components
+export {
+  Menu,
+  MenuTrigger,
+  MenuContent,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+  MenuItemWithIcon
+} from './Menu'
+export type {
+  MenuProps,
+  MenuTriggerProps,
+  MenuContentProps,
+  MenuItemProps,
+  MenuCheckboxItemProps,
+  MenuRadioGroupProps,
+  MenuRadioItemProps,
+  MenuLabelProps,
+  MenuSeparatorProps,
+  MenuSubProps,
+  MenuSubTriggerProps,
+  MenuSubContentProps
+} from './Menu'
+
+// Context Menu Components
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuItemWithIcon
+} from './ContextMenu'
+export type {
+  ContextMenuProps,
+  ContextMenuTriggerProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuRadioGroupProps,
+  ContextMenuRadioItemProps,
+  ContextMenuLabelProps,
+  ContextMenuSeparatorProps,
+  ContextMenuSubProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuSubContentProps
+} from './ContextMenu'
+
+// Dialog Components
+export {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogTrigger,
+  DialogClose,
+  DialogProvider,
+  useDialog,
+} from './Dialog'
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogSize,
+  ShowDialogOptions,
+  ConfirmDialogOptions,
+  AlertDialogOptions,
+  UseDialogReturn,
+} from './Dialog'
+
+export { AlertDialog, AlertDialogTrigger } from './AlertDialog'
+export type { AlertDialogProps, AlertDialogTriggerProps } from './AlertDialog'
+
+// Form Components
+export {
+  Form,
+  FormField,
+  FormInput,
+  FormTextarea,
+  FormSelect,
+  FormCheckbox,
+  FormActions,
+  useFormContext
+} from './Form'
+export type {
+  FormProps,
+  FormFieldProps,
+  FormInputProps,
+  FormTextareaProps,
+  FormSelectProps,
+  FormCheckboxProps,
+  FormActionsProps
+} from './Form'
+
+// Select Component
+export { Select } from './Select'
+export type { SelectProps, SelectOption, SelectGroup } from './Select'
+
+// Checkbox Component
+export { Checkbox } from './Checkbox'
+export type { CheckboxProps } from './Checkbox'
+
+// Radio Components
+export { Radio, RadioGroup } from './Radio'
+export type { RadioProps, RadioGroupProps } from './Radio'
+
+// Switch Component
+export { Switch } from './Switch'
+export type { SwitchProps } from './Switch'
+
+// Tabs Components
+export { Tabs, TabList, Tab, TabPanel } from './Tabs'
+export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './Tabs'
+
+// Progress Component
+export { Progress } from './Progress'
+export type { ProgressProps } from './Progress'
+
+// Toast Components
+export { ToastProvider, useToast } from './Toast'
+export type { ToastProviderProps, ToastOptions, ToastType } from './Toast'
+
+// Loading Component
+export { Loading } from './Loading'
+export type { LoadingProps, LoadingVariant, LoadingSize } from './Loading'
+
+// AutoComplete Component
+export { AutoComplete } from './AutoComplete'
+export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete'
+

package/src/context/ThemeContext.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+type ThemeColor = 'slack' | 'blue' | 'green' | 'aubergine';
+
+interface ThemeContextType {
+    theme: Theme;
+    themeColor: ThemeColor;
+    toggleTheme: () => void;
+    setThemeColor: (color: ThemeColor) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [theme, setTheme] = useState<Theme>(() => {
+        // Check local storage or system preference
+        const savedTheme = localStorage.getItem('theme') as Theme;
+        if (savedTheme) {
+            return savedTheme;
+        }
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    });
+
+    const [themeColor, setThemeColor] = useState<ThemeColor>(() => {
+        const savedThemeColor = localStorage.getItem('themeColor') as ThemeColor;
+        return savedThemeColor || 'slack';
+    });
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        root.setAttribute('data-theme-color', themeColor);
+        localStorage.setItem('theme', theme);
+        localStorage.setItem('themeColor', themeColor);
+    }, [theme, themeColor]);
+
+    const toggleTheme = () => {
+        setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, themeColor, toggleTheme, setThemeColor }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export { ThemeContext };

package/src/context/useTheme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+

package/src/examples/slack-clone/SlackApp.tsx

@@ -0,0 +1,94 @@
+import { Layout } from './layout/Layout'
+import { Message } from './components/Message'
+import { Composer } from './components/Composer'
+import { ChannelHeader } from './components/ChannelHeader'
+
+function SlackApp () {
+  return (
+      <Layout>
+        <ChannelHeader/>
+
+        {/* Main Scroll Area */}
+        <div className="flex-1 overflow-y-auto px-5 custom-scrollbar flex flex-col pt-4">
+
+          <div className="flex-1"/>
+          {/* Spacer to push content down if empty, or just normal flow */}
+
+          {/* Mock Messages */}
+          <div className="pb-4">
+
+            {/* Welcome Message */}
+            <div className="mb-8 mt-4 px-5">
+              <h1 className="text-3xl font-black mb-2 flex items-center gap-2">
+                👋 Welcome to #design-system!
+              </h1>
+              <p className="text-(--text-secondary)">
+                This channel is for everything related to our new Base UI implementation.
+              </p>
+            </div>
+
+            <div className="border-t border-(--border-light) mb-4 flex items-center gap-4 py-2 px-5 text-[13px]">
+              <span className="bg-white text-(--text-secondary) -mt-5 px-2">Yesterday</span>
+            </div>
+
+            <Message
+                id="1"
+                author={{ name: 'Alice Smith', avatar: 'https://i.pravatar.cc/150?u=4', status: 'online' }}
+                timestamp="10:23 AM"
+                content="Hey everyone! I just pushed the new Button component tokens. Let me know what you think."
+                reactions={[{ emoji: '🚀', count: 4, reacted: true }, { emoji: '🔥', count: 2 }]}
+            />
+
+            <Message
+                id="2"
+                author={{ name: 'Bob Jones', avatar: 'https://i.pravatar.cc/150?u=5', status: 'away' }}
+                timestamp="10:25 AM"
+                content="Looks great! I love the new hover states. Are we using CSS variables for the focus rings?"
+                isFirst={true}
+            />
+
+            <Message
+                id="3"
+                author={{ name: 'Alice Smith', avatar: 'https://i.pravatar.cc/150?u=4', status: 'online' }}
+                timestamp="10:26 AM"
+                content="Yes, `var(--slack-blue)` is attached to the `ring` classes in Tailwind."
+                isFirst={true}
+            />
+
+            <div className="border-t border-(--border-light) my-4 flex items-center gap-4 py-2 px-5 text-[13px]">
+              <span className="bg-(--bg-primary) text-(--text-secondary) -mt-5 px-2">Today</span>
+            </div>
+
+            <Message
+                id="4"
+                author={{ name: 'Charlie Day', avatar: 'https://i.pravatar.cc/150?u=8', status: 'dnd' }}
+                timestamp="9:01 AM"
+                content={
+                  <div className="space-y-2">
+                    <p>I've updated the <strong>Composer</strong> component to support rich text (conceptually). Here is
+                      a list of changes:</p>
+                    <ul className="list-disc list-inside">
+                      <li>Added bold/italic support keys</li>
+                      <li>Integrated the emoji picker icon</li>
+                      <li>Fixed the resizing issue</li>
+                    </ul>
+                    <div
+                        className="p-3 bg-(--bg-secondary) rounded border border-(--border-light) mt-2 font-mono text-sm text-(--slack-red)">
+                      npm run build
+                    </div>
+                  </div>
+                }
+                isFirst={true}
+                reactions={[{ emoji: '👀', count: 1 }]}
+            />
+
+          </div>
+
+        </div>
+
+        <Composer/>
+      </Layout>
+  )
+}
+
+export default SlackApp

package/src/examples/slack-clone/components/ChannelHeader.tsx

@@ -0,0 +1,34 @@
+import { Hash, ChevronDown, UserPlus, Info } from 'lucide-react';
+import { Avatar } from '../../../components/Avatar';
+
+export const ChannelHeader = ({ title = "design-system", memberCount = 24 }) => {
+    return (
+        <header className="h-[49px] border-b border-(--border-light) flex items-center justify-between px-5 shrink-0 bg-(--bg-primary) shadow-sm z-10">
+            <div className="flex items-center gap-1 font-bold text-(--text-primary) cursor-pointer hover:bg-(--bg-hover) py-1 px-2 -ml-2 rounded transition-colors group">
+                <Hash className="w-5 h-5 text-(--text-secondary)" />
+                <span className="text-lg">{title}</span>
+                <ChevronDown className="w-3.5 h-3.5 text-(--text-secondary) group-hover:block hidden" />
+            </div>
+
+            <div className="flex items-center">
+                <div className="flex items-center -space-x-2 mr-4 cursor-pointer hover:opacity-80">
+                    <Avatar size="xs" src="https://i.pravatar.cc/150?u=1" className="ring-2 ring-(--bg-primary)" />
+                    <Avatar size="xs" src="https://i.pravatar.cc/150?u=2" className="ring-2 ring-(--bg-primary)" />
+                    <Avatar size="xs" src="https://i.pravatar.cc/150?u=3" className="ring-2 ring-(--bg-primary)" />
+                    <div className="w-6 h-6 rounded bg-(--bg-secondary) flex items-center justify-center text-[10px] ring-2 ring-(--bg-primary) font-medium text-(--text-secondary)">
+                        +{memberCount - 3}
+                    </div>
+                </div>
+
+                <div className="border-l pl-4 flex items-center gap-1 text-(--text-secondary)">
+                    <button className="p-1 hover:bg-(--bg-hover) rounded" title="Add people">
+                        <UserPlus className="w-5 h-5 opacity-80" />
+                    </button>
+                    <button className="p-1 hover:bg-(--bg-hover) rounded" title="Channel details">
+                        <Info className="w-5 h-5 opacity-80" />
+                    </button>
+                </div>
+            </div>
+        </header>
+    );
+};

package/src/examples/slack-clone/components/Composer.tsx

@@ -0,0 +1,42 @@
+import { Bold, Italic, Link, List, Smile, Send, Plus, AtSign, Video } from 'lucide-react';
+import { Button } from '../../../components/Button';
+import { IconButton } from '../../../components/IconButton';
+
+export const Composer = () => {
+    return (
+        <div className="p-5 pb-6">
+            <div className="border border-(--border-light) rounded-lg overflow-hidden focus-within:ring-1 focus-within:ring-(--slack-blue) focus-within:border-(--slack-blue) transition-shadow bg-(--bg-primary) shadow-sm">
+                {/* Toolbar */}
+                <div className="bg-(--bg-hover) px-2 py-1 flex items-center gap-0.5 border-b border-(--border-light) overflow-x-auto">
+                    <IconButton size="sm" variant="ghost" title="Bold"><Bold className="w-4 h-4" /></IconButton>
+                    <IconButton size="sm" variant="ghost" title="Italic"><Italic className="w-4 h-4" /></IconButton>
+                    <IconButton size="sm" variant="ghost" title="Link"><Link className="w-4 h-4" /></IconButton>
+                    <div className="w-px h-4 bg-(--border-light) mx-1"></div>
+                    <IconButton size="sm" variant="ghost" title="List"><List className="w-4 h-4" /></IconButton>
+                </div>
+
+                {/* Text Area */}
+                <textarea
+                    className="w-full p-3 min-h-[40px] max-h-[40vh] outline-none text-[15px] resize-none font-[lato] bg-(--bg-primary) text-(--text-primary) placeholder:text-(--text-muted)"
+                    placeholder="Message #design-system"
+                    rows={1}
+                    style={{ minHeight: '80px' }}
+                />
+
+                {/* Footer Actions */}
+                <div className="flex justify-between items-center p-2 bg-(--bg-primary)">
+                    <div className="flex gap-1">
+                        <IconButton size="sm" variant="ghost"><Plus className="w-4 h-4" /></IconButton>
+                        <IconButton size="sm" variant="ghost"><Video className="w-4 h-4" /></IconButton>
+                        <IconButton size="sm" variant="ghost"><Smile className="w-4 h-4" /></IconButton>
+                        <IconButton size="sm" variant="ghost"><AtSign className="w-4 h-4" /></IconButton>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <span className="text-[11px] text-(--text-muted) hidden sm:inline-block">Press <strong>Enter</strong> to send</span>
+                        <Button variant="primary" size="sm" className="px-4 h-8"><Send className="w-3.5 h-3.5" /></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/examples/slack-clone/components/Message.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Avatar } from '../../../components/Avatar';
+import { Smile, MessageSquare, Share, MoreHorizontal } from 'lucide-react';
+import { IconButton } from '../../../components/IconButton';
+import { UserProfile } from './UserProfile';
+import clsx from 'clsx';
+
+export interface MessageProps {
+    id: string;
+    author: {
+        name: string;
+        avatar: string;
+        status?: 'online' | 'away' | 'dnd' | 'offline';
+    };
+    content: React.ReactNode;
+    timestamp: string;
+    isFirst?: boolean; // If false, squashes the avatar/header
+    reactions?: Array<{ emoji: string; count: number; reacted?: boolean }>;
+}
+
+export const Message = ({ author, content, timestamp, isFirst = true, reactions }: MessageProps) => {
+    return (
+        <div className={clsx(
+            "group flex gap-2 py-0.5 px-5 hover:bg-(--bg-hover) -mx-5 relative",
+            isFirst ? "mt-2 pt-2" : ""
+        )}>
+
+            {/* Gutter / Avatar */}
+            <div className="w-9 shrink-0">
+                {isFirst ? (
+                    <UserProfile user={{ ...author, title: "Product Designer", localTime: "4:43 PM local time", email: "user@example.com" }}>
+                        <button className="block">
+                            <Avatar
+                                src={author.avatar}
+                                alt={author.name}
+                                size="md"
+                                status={author.status}
+                                className="cursor-pointer"
+                            />
+                        </button>
+                    </UserProfile>
+                ) : (
+                    <div className="w-[36px] text-right text-[11px] text-(--text-muted) opacity-0 group-hover:opacity-100 mt-1 select-none">
+                        {timestamp.split(' ')[0]}
+                    </div>
+                )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+                {isFirst && (
+                    <div className="flex items-baseline gap-2 mb-0.5">
+                        <UserProfile user={{ ...author, title: "Product Designer", localTime: "4:43 PM local time", email: "user@example.com" }}>
+                            <button className="font-bold text-[15px] cursor-pointer hover:underline text-(--text-primary) hover:text-(--text-primary) bg-transparent border-none p-0">
+                                {author.name}
+                            </button>
+                        </UserProfile>
+                        <span className="text-[12px] text-(--text-muted) cursor-pointer hover:underline">{timestamp}</span>
+                    </div>
+                )}
+
+                <div className="text-[15px] leading-relaxed text-(--text-primary) wrap-break-word">
+                    {content}
+                </div>
+
+                {/* Reactions */}
+                {reactions && reactions.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-1">
+                        {reactions.map((r, i) => (
+                            <button
+                                key={i}
+                                className={clsx(
+                                    "flex items-center gap-1.5 px-1.5 py-0.5 rounded-full border text-[13px] hover:bg-white transition-colors",
+                                    r.reacted
+                                        ? "bg-[rgba(29,28,29,0.05)] border-(--slack-blue) text-(--slack-blue)"
+                                        : "bg-[rgba(29,28,29,0.05)] border-transparent text-(--text-secondary)"
+                                )}
+                            >
+                                <span>{r.emoji}</span>
+                                <span className="font-medium text-[11px]">{r.count}</span>
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Hover Actions (Floating Toolbar) */}
+            <div className="absolute -top-4 right-4 border border-(--border-light) shadow-sm bg-(--bg-primary) rounded-md p-1 opacity-0 group-hover:opacity-100 transition-opacity z-10 hidden group-hover:flex">
+                <IconButton size="sm" variant="ghost" title="Add reaction"><Smile className="w-4 h-4" /></IconButton>
+                <IconButton size="sm" variant="ghost" title="Reply"><MessageSquare className="w-4 h-4" /></IconButton>
+                <IconButton size="sm" variant="ghost" title="Share"><Share className="w-4 h-4" /></IconButton>
+                <IconButton size="sm" variant="ghost" title="More"><MoreHorizontal className="w-4 h-4" /></IconButton>
+            </div>
+
+        </div>
+    );
+};

package/src/examples/slack-clone/components/UserProfile.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Popover as BasePopover } from '@base-ui/react';
+import { Avatar } from '../../../components/Avatar';
+import { Button } from '../../../components/Button';
+import { Mail, Clock } from 'lucide-react';
+
+export interface UserProfileProps {
+    user: {
+        name: string;
+        avatar: string;
+        status?: 'online' | 'away' | 'dnd' | 'offline';
+        title?: string;
+        email?: string;
+        localTime?: string;
+    };
+    children: React.ReactNode;
+}
+
+export const UserProfile = ({ user, children }: UserProfileProps) => {
+    return (
+        <BasePopoverProvider>
+            <BasePopover.Trigger className="cursor-pointer appearance-none bg-transparent border-none p-0 text-left">
+                {children}
+            </BasePopover.Trigger>
+            <BasePopover.Portal>
+                <BasePopover.Positioner side="right" align="start" sideOffset={10}>
+                    <BasePopover.Popup className="w-[300px] bg-white rounded-lg shadow-xl border border-(--border-light) overflow-hidden z-50 animate-in fade-in zoom-in-95 duration-200 focus:outline-none">
+
+                        {/* Header Image / Avatar */}
+                        <div className="h-24 bg-(--slack-aubergine) relative">
+                            <div className="absolute -bottom-8 left-6">
+                                <Avatar
+                                    src={user.avatar}
+                                    size="xl"
+                                    status={user.status}
+                                    className="ring-4 ring-white rounded-md"
+                                    rounded={true}
+                                />
+                            </div>
+                        </div>
+
+                        <div className="pt-10 px-6 pb-6">
+                            <h2 className="text-xl font-bold text-(--text-primary)">{user.name}</h2>
+                            <p className="text-(--text-secondary) text-[15px]">{user.title || "Member"}</p>
+
+                            <div className="mt-4 flex gap-2">
+                                <Button size="sm" variant="secondary" fullWidth>Message</Button>
+                                <Button size="sm" variant="secondary" fullWidth>Huddle</Button>
+                            </div>
+
+                            <div className="mt-6 space-y-3">
+                                {user.localTime && (
+                                    <div className="flex items-center gap-3 text-[15px] text-(--text-primary)">
+                                        <Clock className="w-4 h-4 text-(--text-secondary)" />
+                                        <span>{user.localTime}</span>
+                                    </div>
+                                )}
+                                {user.email && (
+                                    <div className="flex items-center gap-3 text-[15px] text-(--text-primary)">
+                                        <Mail className="w-4 h-4 text-(--text-secondary)" />
+                                        <a href={`mailto:${user.email}`} className="text-[#1264a3] hover:underline decoration-1">{user.email}</a>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                    </BasePopover.Popup>
+                </BasePopover.Positioner>
+            </BasePopover.Portal>
+        </BasePopoverProvider>
+    );
+};
+
+// Wrapper for Base UI Popover Structure (similar to Tooltip assumption)
+function BasePopoverProvider({ children }: { children: React.ReactNode }) {
+    // Creating a safer flexible wrapper in case exports differ
+    return <BasePopover.Root>{children}</BasePopover.Root>;
+}

package/src/examples/slack-clone/layout/Layout.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Sidebar } from './Sidebar';
+import { TopBar } from './TopBar';
+
+interface LayoutProps {
+    children: React.ReactNode;
+}
+
+export const Layout = ({ children }: LayoutProps) => {
+    return (
+        <div className="flex flex-col h-screen w-full bg-(--bg-primary) overflow-hidden">
+            {/* Top Navigation */}
+            <TopBar />
+
+            {/* Main Workspace Area */}
+            <div className="flex flex-1 overflow-hidden">
+                {/* Sidebar (expandable/collapsible logic could go here) */}
+                <Sidebar />
+
+                {/* Main Content View */}
+                <main className="flex-1 flex flex-col bg-(--bg-primary) min-w-0 relative">
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+};