- Introduced multiple new SVG icons including AddCategory, AiChat, Aicon27, AiEssentialsIconSet, AiPrompt, Brain, BrainCircuit, BrainCog, CodeAi, Emoji, Group, MessageAi1, MessageBalloonAi1, and Vector.
- Updated the icons index file to include the new icons for easier access.
- Enhanced the icons component structure for better maintainability.
* feat(textarea): add Textarea component with variants and Storybook examples
* feat(textarea): enhance Textarea component with context, improved variants, and Storybook examples
* Fine-tuning the style
* fix ci
* feat(textarea): refactor Textarea stories to use custom label and caption components
* feat(textarea): add TextareaContext for managing textarea state
* fix: format
* feat(textarea): refactor TextareaInput to simplify props and remove autoSize handling
* feat(textarea): remove TextareaContext and update stories to reflect new error handling
* refactor(textarea): remove TextareaRoot component
After removing TextareaContext, TextareaRoot became a simple wrapper div
with no functionality beyond applying layout styles. This change:
- Removes TextareaRoot component and its exports
- Updates all Storybook stories to use plain divs with the same styling
- Simplifies the component API while maintaining the same functionality
Addresses reviewer feedback: https://github.com/CherryHQ/cherry-studio/pull/11260#discussion_r2580009134🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* chore: format
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
- Introduced a new ConfirmDialog component for confirmation scenarios, integrating Dialog and Button primitives.
- Added props for customizable titles, descriptions, and button texts, including support for loading states and destructive actions.
- Created Storybook stories demonstrating various use cases, including default, destructive, and custom content scenarios.
- Changed button border radius from rounded-md to rounded-xs for a sleeker look.
- Adjusted padding to py-2 px-4 to reduce button size and enhance usability.
- Updated hover effect to use shadow-xs for a more subtle interaction feedback.
- Simplified size variants by removing unnecessary padding adjustments.
- Updated DialogContent styling to use a rounded border and improved shadow effects for better visual appeal.
- Introduced a new Storybook file for the Dialog component, featuring multiple stories that demonstrate various use cases, including default, alert, form, and customizable dialogs.
- Enhanced accessibility and usability by providing examples for different dialog configurations and actions.
- Added comments in theme.css and theme.css files to explain the changes in spacing variable definitions.
- Temporarily commented out the `--spacing-5xs` variable due to significant differences with container spacing in Tailwind CSS v4.
- Ensured clarity on the priority of CSS variable resolution in Tailwind CSS.
* feat(input): add new input component and update eslint config
Add new custom input component to replace antd and heroui inputs
Update eslint config to enforce using the new input component
* feat(input): refactor input component to support compound pattern
Add new Input component with support for Password and Button variants through compound pattern. Move input implementation to new directory structure and enhance with label and caption support. Remove old input implementation.
* refactor(input): consolidate input components and update exports
Move input component files to lowercase directory and simplify structure
Remove unused button and password input components
Update exports in components index file
* refactor: replace antd Input with @cherrystudio/ui Input across components
* feat(primitives): add textarea component to ui primitives
* feat(primitives): add input-group component with variants and controls
build: update @radix-ui/react-slot dependency to v1.2.4
* refactor(ui): simplify input component and update usage
Remove complex Input component implementation and replace with simpler version
Update components to use new Input and Textarea components from ui package
* feat(ui): add composite input component and utility functions
- Introduce new CompositeInput component with variants and password toggle
- Add utility functions for null/undefined conversion
- Export new components and types from index
- Update input props interface and usage in input-group
* feat(Input): refactor CompositeInput component and add stories
- Refactor CompositeInput component with improved variants and styling
- Add comprehensive Storybook stories for Input, InputGroup and CompositeInput components
- Implement password toggle functionality and button variants
- Include accessibility features and interactive examples
* feat(input): improve disabled state styling and behavior
- Add disabled state variants for input components
- Ensure password toggle button respects disabled state
- Update disabled styling for better visual consistency
- Add storybook examples for disabled password inputs
* feat(input): add validation states and form examples
- Implement validation states for input components
- Add real-time validation examples
- Create form validation demos for different input types
- Update styling for disabled and invalid states
* feat(input): add prefix support for email variant input
Add prefix variants styling and prefix prop to CompositeInput component to support email inputs with fixed prefixes. Update stories to demonstrate various prefix use cases and interactive examples.
* refactor(Input): simplify content rendering logic by removing useMemo hooks
The startContent and endContent memoized values were removed and their logic was inlined directly in the JSX. This makes the code more straightforward and removes unnecessary memoization overhead since the calculations are simple.
* feat(Input): add select variant to CompositeInput component
Add new 'select' variant to CompositeInput component with support for select dropdown groups and items. Includes styling variants, type exports, and comprehensive storybook examples demonstrating various use cases like currency input, URL with protocol, phone with country code, and temperature with unit selectors.
* Revert "refactor: replace antd Input with @cherrystudio/ui Input across components"
This reverts commit f7f689b326.
* fix(CompositeInput): handle missing props gracefully by returning null
Add null checks for email and select variants to prevent rendering issues when required props are missing
* fix(Input): adjust select prefix and trigger styling
Update select prefix variants to remove redundant padding and simplify size variants. Add new selectTriggerVariants for consistent styling across sizes.
* feat(storybook): add playground story for InputGroup component
Add interactive playground story with controls for all InputGroup props including addons, button variants and input types
* style(primitives): remove redundant border radius from input group variants
* style(input): adjust button and label variant styling
Refactor variant classes to use string literals instead of arrays for better readability
* refactor(Input): simplify variant class strings in input component
---------
Co-authored-by: MyPrototypeWhat <daoquqiexing@gmail.com>
Co-authored-by: fullex <106392080+0xfullex@users.noreply.github.com>
* refactor(ui): migrate switch component from heroui to radix-ui
replace heroui switch implementation with radix-ui for better maintainability
update package.json and yarn.lock to include new dependency
* fix(eslint): enable heroui import restriction for deprecated Switch component
* refactor(ui): update Switch component props from isSelected/onValueChange to checked/onCheckedChange
Standardize Switch component props across the codebase to use checked/onCheckedChange instead of isSelected/onValueChange for better consistency with common React patterns. Also updates loading state prop from isLoading to loading and removes size prop where unnecessary.
The changes include:
- Replacing isSelected with checked
- Replacing onValueChange with onCheckedChange
- Updating isLoading to loading
- Removing redundant size props
- Adjusting styling to accommodate new loading state
* refactor(switch): improve switch component styling and structure
- Add default values for loading and disabled props
- Update styling classes and add group cursor pointer
- Restructure loading indicator and thumb positioning
- Wrap DescriptionSwitch children in flex container
* refactor(ui): improve switch component structure and usage
- Restructure DescriptionSwitch to use explicit props instead of children
- Add label, description, and position props for better customization
- Update all switch usages in SettingsTab to use new props format
* refactor(primitives): simplify switch props by omitting children
Remove redundant children prop from CustomSwitchProps since it's already omitted from the parent type
* fix(switch): add useId for label accessibility in DescriptionSwitch
Ensure proper label association with switch input by generating unique ID using React's useId hook
* refactor(settings): remove commented out SettingRowTitleSmall components
* refactor(SettingsTab): add todo comment for memoization optimization
* feat(switch): add size prop to customize switch dimensions
Add sm, md, and lg size options to the Switch component with corresponding styles. This allows for better visual consistency across different UI contexts.
* style(ui): adjust switch component styling and theme colors
update switch component layout and spacing to improve consistency
modify secondary-foreground color variable to use correct semantic token
* feat(switch): add new switch component styles and animations
- Add new switch.css file with gradient and transition styles
- Update switch.tsx component with new styling classes and animations
- Remove loader icon in favor of animated gradient effect
* fix(i18n): Auto update translations for PR #11061
* style(primitives): remove redundant border style from switch component
* refactor(switch): remove switch.css and update switch component styles
Remove deprecated switch.css file and migrate styles to inline tailwind classes. Update disabled state styling to use opacity instead of linear gradient for better consistency.
* refactor(switch): simplify switch thumb implementation
Replace complex div structure with svg for loading state
Adjust disabled opacity and loading state styling
* style(switch): adjust thumb size and positioning for better consistency
* feat(switch): add storybook documentation for switch component
Add comprehensive Storybook documentation for the Switch component, including:
- Basic usage examples
- Different states (checked, disabled, loading)
- Size variations
- DescriptionSwitch variant
- Real-world usage scenarios
- Accessibility examples
- Form integration examples
Also remove redundant box-content class from switch styles
* fix(switch): adjust thumb positioning for md and lg sizes
* style(primitives): improve switch component styling and spacing
- Add padding to the container
- Simplify label height logic
- Update typography classes for better consistency
- Adjust switch container alignment
* feat(switch): add size prop to DescriptionSwitch component
Add support for sm, md, and lg sizes to DescriptionSwitch component with responsive text sizing. Also includes comprehensive Storybook documentation with examples of all sizes and states.
* style(switch): align label text to right when isLeftSide is true
* refactor(stories): clean up DescriptionSwitch stories by removing unused imports and simplifying JSX
* refactor(ui): rename CustomizedSwitch to Switch for consistency
Simplify component naming by removing redundant 'Customized' prefix and aligning with common naming conventions
* refactor(switch): extract switch root styles into cva variants
Improve maintainability by using class-variance-authority to manage switch root styles and variants
* refactor(switch): extract thumb variants into separate cva function
Improve maintainability by moving switch thumb styling logic into a dedicated variants configuration. This makes the component more readable and easier to modify.
* feat(switch): add classNames prop for custom styling
Allow custom class names to be applied to switch root, thumb, and thumbSvg elements for more flexible styling options.
* feat(switch): add loading animation variants for switch thumb
Extract loading animation logic into separate cva variants for better maintainability and reusability
---------
Co-authored-by: GitHub Action <action@github.com>
- Deleted the DmxapiToImg SVG file and its corresponding React component to streamline the icon library.
- Updated index.ts and Logos.stories.tsx to remove references to DmxapiToImg, ensuring consistency across the codebase.
- Introduced a new Tabs component along with TabsList, TabsTrigger, and TabsContent for improved content organization.
- Updated package.json and yarn.lock to include @radix-ui/react-tabs dependency.
- Enhanced index.ts to export the new Tabs components for easier access in the UI library.
- Created stories for the Tabs component in Storybook to demonstrate various usage scenarios.
- Introduced a new Breadcrumb component along with BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis.
- Updated index.ts to export the new Breadcrumb components for easier access in the UI library.
- Added 'migration_completed' stage to the migration process for better tracking of completion.
- Updated relevant components and hooks to handle the new stage, including UI changes to confirm migration completion.
- Adjusted messages and progress indicators to reflect the new stage in the migration workflow.
- Exported the new Pagination component from the index file to make it available for use.
- Updated the PaginationLink styles to improve hover effects and active state visibility, enhancing user experience.
- Updated the @radix-ui/react-slot dependency in package.json and yarn.lock to version 1.2.4.
- Introduced a new Pagination component with associated subcomponents (PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis).
- Added stories for the Pagination component to demonstrate various use cases and configurations.
- Introduced a new Tooltip component along with TooltipProvider, TooltipTrigger, and TooltipContent for improved user interface interactions.
- Implemented NormalTooltip for easier usage with customizable content and positioning options.
- Integrated Radix UI's tooltip primitives for better accessibility and performance.
- Introduced a new Kbd component to display keyboard shortcuts, supporting both single keys and key combinations.
- Added KbdGroup for grouping multiple Kbd components together.
- Updated package.json to include @radix-ui/react-tooltip version 1.2.8.
- Created stories for Kbd component showcasing various use cases, including integration with Tooltip for enhanced user guidance.
- Updated comments for brand logo icons to reflect the current count and recommended import path.
- Removed deprecated selector component exports to clean up the index file.
- Deleted the FilePngIcon and FileSvgIcon components from the icons directory due to low usage.
- Removed the ToolsCallingIcon component and its related stories, as it did not meet the UI library extraction criteria.
- Updated the index.ts file to reflect these removals and cleaned up the export list accordingly.
- Ensured that all related story files for the removed icons were also deleted to maintain a clean codebase.
- Deleted the DmxapiLogo SVG file from the icons directory.
- Updated the icon export list to reflect the removal of DmxapiLogo, reducing the total icon count from 81 to 80.
- Adjusted related stories to exclude DmxapiLogo from the showcased icons.
- Removed the ICON_IMPLEMENTATION_GUIDE.md file and several unused SVG icons from the `icons/` directory.
- Added new SVG icons to enhance the icon library, including various brand logos.
- Updated package.json to reflect the new version of the `tsx` dependency.
- Introduced a script for generating icons and improved the structure of the icons module for better organization and accessibility.
- Updated the stories for icons to showcase the new additions and ensure proper documentation.
- Deleted the outdated CONVERSION_LOG.md file to streamline documentation.
- Introduced new HSLA color files for primitive, semantic, and status colors, enhancing color management.
- Updated theme and token files to utilize Oklch color format for improved color representation.
- Refactored radius and color tokens for consistency and maintainability across the design system.
- Exported CheckedState type from the checkbox component for better type management.
- Added checkbox and combobox components to the main component index for easier access.
- Updated Storybook examples to utilize the CheckedState type for controlled checkbox states.
- Introduced a new checkbox component utilizing Radix UI, allowing for customizable sizes and states.
- Implemented styles using class-variance-authority for consistent design across different sizes (sm, md, lg).
- Added comprehensive Storybook stories demonstrating various use cases, including default, checked, disabled, and controlled states.
- Updated package.json and yarn.lock to include the new Radix UI checkbox dependency.
- Introduced size variants for RadioGroupItem using class-variance-authority for better customization.
- Updated RadioGroupItem to accept size prop and adjusted styles accordingly.
- Added comprehensive Storybook stories for various use cases, including default, disabled, and size variations, to demonstrate component functionality and usage.
- Refactored the combobox and select components to utilize Tailwind CSS utility classes for consistent styling.
- Added 'text-foreground' class to enhance text visibility in both components.
- Streamlined the default styles for better maintainability and adherence to the new design system.
- Integrated Tailwind CSS into the project by adding necessary imports and configurations.
- Updated CSS files to reflect the transition to Tailwind, including commenting out old styles and adjusting theme-related attributes.
- Changed theme mode handling in the ThemeProvider and CitationBlock components for consistency with the new class-based approach.
- Updated SettingsTab to utilize the new Select component instead of the deprecated Selector.
- Enhanced Select integration with SelectTrigger, SelectContent, SelectItem, and SelectValue for improved functionality.
- Removed Selector imports and related code to streamline the component structure.
- Adjusted styles and layout for better user experience in the settings interface.
- Adjusted border radius for SelectContent to 'rounded-2xs' for a more modern look.
- Enhanced SelectItem styles to include a background color for checked state.
- Updated CheckIcon color to 'text-primary' for better visibility in the SelectItem.
- Added a new Select component based on Radix UI, including SelectTrigger, SelectContent, SelectItem, and SelectValue.
- Implemented support for groups and separators within the Select component.
- Updated package.json to include @radix-ui/react-select as a dependency.
- Removed deprecated Selector and SearchableSelector components to streamline the codebase.
- Added stories for the Select component to showcase various use cases and configurations.
- Updated button variants for improved hover effects and accessibility, including aria-loading support.
- Refined combobox trigger styles for better visibility and consistency, including adjustments to error state styling and input placeholder appearance.
- Improved overall class management and organization for both components.
- Modified default combobox trigger styles for improved visibility and consistency.
- Updated background and text colors in the combobox options for better accessibility.
- Cleaned up unused CSS variables in tailwind.css, retaining only those necessary for theme usage.
- Enhanced comments for clarity in the CSS files.
- Added new CSS files for design tokens including colors, spacing, typography, and border radius.
- Updated theme.css to import the new tokens and ensure proper usage in the UI.
- Enhanced the theme structure to support light and dark modes with semantic color mappings.
- Introduced a build script to generate theme from tokens for easier management.
- Adjusted button outline variant for consistency in dark mode styling.
- Removed unnecessary background color from combobox trigger for cleaner appearance.
- Updated comments in the theme CSS file for clarity and consistency.
- Removed unnecessary background color from default combobox trigger variant for cleaner styling.
- Added a white background to the combobox trigger for improved visibility.
- Updated comments in the CSS file to enhance clarity and consistency in English.
- Changed button size properties to use min-height for better layout consistency.
- Simplified combobox size properties by removing height specifications.
- Enhanced combobox option rendering with improved class management for better styling.
- Updated comments in ComboboxProps to English for clarity.
- Added new brand color tokens for Cherry Studio ranging from 50 to 950.
- Updated primary color references to use brand colors for improved consistency.
- Introduced hover states for primary and destructive colors to enhance UI interactivity.
- Introduced a new Combobox component that supports single and multiple selections, search functionality, and customizable rendering of options.
- Implemented variants for different states (default, error, disabled) and sizes (small, default, large).
- Added a demo and Storybook stories to showcase various use cases and states of the Combobox.
- Deleted the todocss.css file as it was no longer needed.
- Updated Storybook main.ts to include path aliasing for better module resolution.
- Removed deprecated stories and components, streamlining the codebase.
- Added new stories for CodeEditor, Ellipsis, ExpandableText, and other components to enhance documentation and showcase functionality.
- Added loading state support to the Button component, allowing for a spinner to be displayed when the button is in a loading state.
- Introduced props for custom loading icons and adjusted button behavior to disable when loading.
- Updated various components to utilize the new loading feature for better user experience during asynchronous actions.
- Removed deprecation comments from EditableNumber and Sortable components, as they were previously marked for removal due to low usage and dependency conflicts.
- Added deprecation comments to several components and icons due to low usage (≤2 times), indicating plans for removal in future versions.
- Components affected include EditableNumber, MaxContextCount, Sortable, ThinkingEffect, FileIcons, ToolIcon, and others.
- Suggested alternatives or direct usage of other components where applicable.
- Changed the variable for muted foreground color from `--cs-foreground-secondary` to `--cs-foreground-muted` for improved clarity and consistency in styling.
- Changed the main CSS file reference from `globals.css` to `theme.css` in `components.json` for better theme management.
- Introduced `index.css` to export only CSS variables, allowing npm users to utilize design tokens without overriding Tailwind defaults.
- Removed `globals.css` as it is no longer needed with the new structure.
- Updated `package.json` to reflect changes in CSS file paths.
- Enhanced `README.md` to clarify installation and configuration steps for the new styling approach.
