webcoreui 0.4.1 → 0.5.0

package/README.md

@@ -1,227 +1,230 @@
-<p>
-    <a href="https://webcoreui.dev">
-      <img
-            alt="Webcore - Frontend components for Astro, Svelte, and React"
-            src="https://raw.githubusercontent.com/Frontendland/webcoreui/main/public/img/banner.png"
-        />
-    </a>
-</p>
-
-<p align="center">
-    <a href="https://github.com/Frontendland/webcoreui/releases">
-        <img
-            src="https://img.shields.io/npm/v/webcoreui.svg?label=Latest%20Release"
-            alt="Latest Release"
-        />
-    </a>
-    <a href="https://github.com/Frontendland/webcoreui/blob/main/LICENSE">
-        <img
-            src="https://img.shields.io/badge/license-MIT-blue"
-            alt="License"
-        />
-    </a>
-</p>
-
-> [!IMPORTANT]
-> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0.
-
----
-## Table of Contents
-
-- [Table of Contents](#table-of-contents)
-- [Documentation](#documentation)
-- [Getting started](#getting-started)
-    - [Prerequisites](#prerequisites)
-    - [Installation](#installation)
-    - [Setup](#setup)
-    - [Using Components](#using-components)
-- [Components](#components)
-
-## Documentation
-
-Full documentation available on [webcoreui.dev](https://webcoreui.dev).
-
-## Getting Started
-
-Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to clone the repository and run `npm run dev` to start building your pages with the components available.
-
-### Prerequisites
-
-> [!NOTE]
-> Before getting started, make sure you have a package manager installed, such as <a href="https://nodejs.org/en/" rel="noreferrer">Node</a>.
-
-Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
-
-- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
-- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
-
-Depending on your project setup, you'll also need the following packages:
-
-- **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
-- **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
-- **For React projects**
-    - [React](https://www.npmjs.com/package/react) - `v18.3` and above
-    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
-
-### Installation
-
-Install Webcore as a dependency by running one of the following command:
-
-```bash
-# Using NPM
-npm i webcoreui
-
-# Using Yarn
-yarn add webcoreui
-```
-
-### Setup
-
-Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
-
-```scss
-@import 'webcoreui/styles';
-@include setup((
-    // Define paths for your fonts
-    fontRegular: '/fonts/Inter-Regular.woff2',
-    fontBold: '/fonts/Inter-Bold.woff2'
-));
-```
-
-> [!TIP]
-> You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
-
-The `Setup` mixin can also accept the following options:
-
-
-| Property  | Default value | Purpose |
-|-----------|---------------|---------|
-| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
-| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
-| `includeTooltip` | `true` | Adds styles for using tooltips.
-| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
-
-Default component styles can be changed by overriding the following CSS variables:
-
-```scss
-html body {
-    // Avatar component
-    --w-avatar-border: var(--w-color-primary-70);
-
-    // Checkbox component
-    --w-checkbox-color: var(--w-color-primary);
-
-    // Collapsible component
-    --w-collapsible-initial-height: 0;
-    --w-collapsible-max-height: 100%;
-
-    // Progress component
-    --w-progress-color: var(--w-color-primary);
-    --w-progress-background: var(--w-color-primary-50);
-    --w-progress-stripe-light: var(--w-color-primary);
-    --w-progress-stripe-dark: var(--w-color-primary-10);
-
-    // Radio component
-    --w-radio-color: var(--w-color-primary);
-
-    // Rating component
-    --w-rating-color: var(--w-color-primary);
-    --w-rating-empty-color: var(--w-color-primary);
-    --w-rating-empty-background: var(--w-color-primary-70);
-    --w-rating-size: 18px;
-
-    // Scrollbars
-    --w-scrollbar-bg: var(--w-color-primary-60);
-    --w-scrollbar-fg: var(--w-color-primary-50);
-
-    // Slider component
-    --w-slider-background: var(--w-color-primary-50);
-    --w-slider-color: var(--w-color-primary);
-    --w-slider-thumb: var(--w-color-primary-50);
-
-    // Spinner component
-    --w-spinner-color: var(--w-color-primary);
-    --w-spinner-width: 2px;
-    --w-spinner-speed: 2s;
-    --w-spinner-size: 30px;
-    --w-spinner-dash: 8;
-
-    // Switch component
-    --w-switch-off-color: var(--w-color-primary-50);
-    --w-switch-on-color: var(--w-color-primary);
-
-    // ThemeSwitcher component
-    --w-theme-switcher-size: 20px;
-
-    // Timeline component
-    --w-timeline-color: var(--w-color-primary-50);
-    --w-timeline-text-color: var(--w-color-primary);
-    --w-timeline-counter: decimal;
-
-    // Tooltips
-    --w-tooltip-background: var(--w-color-primary);
-    --w-tooltip-color: var(--w-color-primary-70);
-
-    // Override border-radius
-    --w-sm-radius: 2px;
-    --w-md-radius: 5px;
-    --w-lg-radius: 10px;
-    --w-xl-radius: 15px;
-}
-```
-
-### Using Components
-
-Start using Webcore components in your code by importing them:
-
-```astro
----
-// Import the component relevant to your project
-// How to import Astro components
-import { Accordion } from 'webcoreui/astro'
-
-// How to import Svelte components
-import { Accordion } from 'webcoreui/svelte'
-
-// How to import React components
-import { Accordion } from 'webcoreui/react'
----
-
-<Accordion items={[{ ... }]} />
-```
-
-## Components
-
-- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
-- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
-- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
-- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
-- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
-- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
-- [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
-- [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
-- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
-- [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
-- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
-- [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
-- [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)
-- [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
-- [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
-- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
-- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
-- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
-- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
-- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
-- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
-- [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
-- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
-- [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
-- [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
-- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
-- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)
-- [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)
-- [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
-- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
-- [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)
+<p>
+    <a href="https://webcoreui.dev">
+      <img
+            alt="Webcore - Frontend components for Astro, Svelte, and React"
+            src="https://raw.githubusercontent.com/Frontendland/webcoreui/main/public/img/banner.png"
+        />
+    </a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/Frontendland/webcoreui/releases">
+        <img
+            src="https://img.shields.io/npm/v/webcoreui.svg?label=Latest%20Release"
+            alt="Latest Release"
+        />
+    </a>
+    <a href="https://github.com/Frontendland/webcoreui/blob/main/LICENSE">
+        <img
+            src="https://img.shields.io/badge/license-MIT-blue"
+            alt="License"
+        />
+    </a>
+</p>
+
+> [!IMPORTANT]
+> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0.
+
+---
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Documentation](#documentation)
+- [Getting started](#getting-started)
+    - [Prerequisites](#prerequisites)
+    - [Installation](#installation)
+    - [Setup](#setup)
+    - [Using Components](#using-components)
+- [Components](#components)
+
+## Documentation
+
+Full documentation available on [webcoreui.dev](https://webcoreui.dev).
+
+## Getting Started
+
+Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to clone the repository and run `npm run dev` to start building your pages with the components available.
+
+### Prerequisites
+
+> [!NOTE]
+> Before getting started, make sure you have a package manager installed, such as <a href="https://nodejs.org/en/" rel="noreferrer">Node</a>.
+
+Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
+
+- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
+
+Depending on your project setup, you'll also need the following packages:
+
+- **For Astro projects**
+    - [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
+- **For Svelte projects**
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
+- **For React projects**
+    - [React](https://www.npmjs.com/package/react) - `v18.3` and above
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
+
+### Installation
+
+Install Webcore as a dependency by running one of the following command:
+
+```bash
+# Using NPM
+npm i webcoreui
+
+# Using Yarn
+yarn add webcoreui
+```
+
+### Setup
+
+Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
+
+```scss
+@import 'webcoreui/styles';
+@include setup((
+    // Define paths for your fonts
+    fontRegular: '/fonts/Inter-Regular.woff2',
+    fontBold: '/fonts/Inter-Bold.woff2'
+));
+```
+
+> [!TIP]
+> You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
+
+The `Setup` mixin can also accept the following options:
+
+
+| Property  | Default value | Purpose |
+|-----------|---------------|---------|
+| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
+| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
+| `includeTooltip` | `true` | Adds styles for using tooltips.
+| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
+
+Default component styles can be changed by overriding the following CSS variables:
+
+```scss
+html body {
+    // Avatar component
+    --w-avatar-border: var(--w-color-primary-70);
+
+    // Checkbox component
+    --w-checkbox-color: var(--w-color-primary);
+
+    // Collapsible component
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+
+    // Progress component
+    --w-progress-color: var(--w-color-primary);
+    --w-progress-background: var(--w-color-primary-50);
+    --w-progress-stripe-light: var(--w-color-primary);
+    --w-progress-stripe-dark: var(--w-color-primary-10);
+
+    // Radio component
+    --w-radio-color: var(--w-color-primary);
+
+    // Rating component
+    --w-rating-color: var(--w-color-primary);
+    --w-rating-empty-color: var(--w-color-primary);
+    --w-rating-empty-background: var(--w-color-primary-70);
+    --w-rating-size: 18px;
+
+    // Scrollbars
+    --w-scrollbar-bg: var(--w-color-primary-60);
+    --w-scrollbar-fg: var(--w-color-primary-50);
+
+    // Slider component
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+
+    // Spinner component
+    --w-spinner-color: var(--w-color-primary);
+    --w-spinner-width: 2px;
+    --w-spinner-speed: 2s;
+    --w-spinner-size: 30px;
+    --w-spinner-dash: 8;
+
+    // Switch component
+    --w-switch-off-color: var(--w-color-primary-50);
+    --w-switch-on-color: var(--w-color-primary);
+
+    // ThemeSwitcher component
+    --w-theme-switcher-size: 20px;
+
+    // Timeline component
+    --w-timeline-color: var(--w-color-primary-50);
+    --w-timeline-text-color: var(--w-color-primary);
+    --w-timeline-counter: decimal;
+
+    // Tooltips
+    --w-tooltip-background: var(--w-color-primary);
+    --w-tooltip-color: var(--w-color-primary-70);
+
+    // Override border-radius
+    --w-sm-radius: 2px;
+    --w-md-radius: 5px;
+    --w-lg-radius: 10px;
+    --w-xl-radius: 15px;
+}
+```
+
+### Using Components
+
+Start using Webcore components in your code by importing them:
+
+```astro
+---
+// Import the component relevant to your project
+// How to import Astro components
+import { Accordion } from 'webcoreui/astro'
+
+// How to import Svelte components
+import { Accordion } from 'webcoreui/svelte'
+
+// How to import React components
+import { Accordion } from 'webcoreui/react'
+---
+
+<Accordion items={[{ ... }]} />
+```
+
+## Components
+
+- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
+- [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
+- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
+- [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
+- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
+- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
+- [Carousel](https://github.com/Frontendland/webcoreui/tree/main/src/components/Carousel)
+- [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
+- [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
+- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)
+- [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
+- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
+- [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
+- [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)
+- [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
+- [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
+- [Pagination](https://github.com/Frontendland/webcoreui/tree/main/src/components/Pagination)
+- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
+- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
+- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
+- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
+- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
+- [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
+- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
+- [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
+- [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
+- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)
+- [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)
+- [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
+- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
+- [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)

package/astro.d.ts

@@ -4,15 +4,18 @@ import type { AvatarProps } from './components/Avatar/avatar'
 import type { BadgeProps } from './components/Badge/badge'
 import type { ButtonProps } from './components/Button/button'
 import type { CardProps } from './components/Card/card'
+import type { CarouselProps } from './components/Carousel/carousel'
 import type { CheckboxProps } from './components/Checkbox/checkbox'
 import type { CollapsibleProps } from './components/Collapsible/collapsible'
 import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { DataTableProps } from './components/DataTable/datatable'
 import type { GroupProps } from './components/Group/group'
 import type { IconProps } from './components/Icon/icon'
 import type { InputProps } from './components/Input/input'
 import type { ListProps } from './components/List/list'
 import type { MenuProps } from './components/Menu/menu'
 import type { ModalProps } from './components/Modal/modal'
+import type { PaginationProps } from './components/Pagination/pagination'
 import type { PopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { RadioProps } from './components/Radio/radio'
@@ -37,15 +40,18 @@ declare module 'webcoreui/astro' {
 	export function Badge(_props: BadgeProps): any
 	export function Button(_props: ButtonProps): any
 	export function Card(_props: CardProps): any
+	export function Carousel(_props: CarouselProps): any
 	export function Checkbox(_props: CheckboxProps): any
 	export function Collapsible(_props: CollapsibleProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
+	export function DataTable(_props: DataTableProps): any
 	export function Group(_props: GroupProps): any
 	export function Icon(_props: IconProps): any
 	export function Input(_props: InputProps): any
 	export function List(_props: ListProps): any
 	export function Menu(_props: MenuProps): any
 	export function Modal(_props: ModalProps): any
+	export function Pagination(_props: PaginationProps): any
 	export function Popover(_props: PopoverProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any

package/astro.js

@@ -4,15 +4,18 @@ import AvatarComponent from './components/Avatar/Avatar.astro'
 import BadgeComponent from './components/Badge/Badge.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
+import CarouselComponent from './components/Carousel/Carousel.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import DataTableComponent from './components/DataTable/DataTable.astro'
 import GroupComponent from './components/Group/Group.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
 import ListComponent from './components/List/List.astro'
 import MenuComponent from './components/Menu/Menu.astro'
 import ModalComponent from './components/Modal/Modal.astro'
+import PaginationComponent from './components/Pagination/Pagination.astro'
 import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
@@ -36,15 +39,18 @@ export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const DataTable = DataTableComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const List = ListComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent

package/components/Avatar/Avatar.astro

@@ -13,7 +13,8 @@ const {
     borderColor,
     borderless,
     reverse,
-    className
+    className,
+    groupClassName
 } = Astro.props
 
 const classes = [
@@ -21,10 +22,16 @@ const classes = [
     borderless && styles.borderless,
     className
 ]
+
+const groupClasses = [
+    styles.group,
+    reverse && styles.reverse,
+    groupClassName
+]
 ---
 
 {Array.isArray(img) ? (
-    <div class:list={[styles.group, reverse && styles.reverse]}
+    <div class:list={groupClasses}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {img.map((img, index) => (

package/components/Avatar/Avatar.svelte

@@ -13,6 +13,7 @@
     export let borderless: AvatarProps['borderless'] = false
     export let reverse: AvatarProps['reverse'] = false
     export let className: AvatarProps['className'] = ''
+    export let groupClassName: AvatarProps['groupClassName'] = ''
 
     const classes = classNames([
         styles.avatar,
@@ -22,7 +23,8 @@
 
     const groupStyles = classNames([
         styles.group,
-        reverse && styles.reverse
+        reverse && styles.reverse,
+        groupClassName
     ])
 </script>
 

package/components/Avatar/Avatar.tsx

@@ -13,7 +13,8 @@ const Avatar = ({
     borderColor,
     borderless,
     reverse,
-    className
+    className,
+    groupClassName
 }: AvatarProps) => {
     const classes = classNames([
         styles.avatar,
@@ -23,7 +24,8 @@ const Avatar = ({
 
     const groupStyles = classNames([
         styles.group,
-        reverse && styles.reverse
+        reverse && styles.reverse,
+        groupClassName
     ])
 
     const borderColorStyle = borderColor

package/components/Avatar/avatar.ts

@@ -7,4 +7,5 @@ export type AvatarProps = {
     borderless?: boolean
     reverse?: boolean
     className?: string
+    groupClassName?: string
 }

package/components/Button/button.module.scss

@@ -2,7 +2,7 @@
 
 .button {
     @include layout(inline-flex, center, xs);
-    @include typography(default, primary-50, none);
+    @include typography(default, primary-50, none, normal);
     @include spacing(py-sm, px-md);
     @include border-radius(xs);
     @include border(0);
@@ -38,6 +38,11 @@
             @include typography(primary);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
+
+        &[disabled] {
+            @include typography(primary-30);
+            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-30);
+        }
     }
 
     &.flat {

package/components/Button/button.ts

@@ -13,10 +13,10 @@ export type ButtonProps = {
 }
 
 export type SvelteButtonProps = {
-    onClick?: () => any
+    onClick?: (() => any) | null
 } & ButtonProps
 
 export type ReactButtonProps = {
-    onClick?: () => any
+    onClick?: (() => any) | null
     children: React.ReactNode
 } & ButtonProps