@udixio/ui-react 0.1.1 → 0.2.0

package/dist/lib/components/Button.d.ts

@@ -1,7 +1,9 @@
 import { ReactProps } from '../utils';
 import { ButtonInterface } from '../interfaces';
 /**
- * The Button component is a versatile component that can be used to trigger actions or to navigate to different sections of the application
+ * Buttons prompt most actions in a UI
+ * @status beta
+ * @category Action
  */
-export declare const Button: ({ variant, disabled, icon, href, label, className, iconPosition, loading, shape, onClick, ref, size, allowShapeTransformation, transition, ...restProps }: ReactProps<ButtonInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, disabled, icon, href, label, className, iconPosition, loading, shape, onClick, onToggle, activated, ref, size, allowShapeTransformation, transition, children, ...restProps }: ReactProps<ButtonInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/dist/lib/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOhD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,2JAgBpB,UAAU,CAAC,eAAe,CAAC,4CAgH7B,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOhD;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,0LAmBpB,UAAU,CAAC,eAAe,CAAC,4CAsI7B,CAAC"}

package/dist/lib/components/Card.d.ts

@@ -1,4 +1,9 @@
 import { CardInterface } from '../interfaces';
 import { ReactProps } from '../utils';
+/**
+ * Cards display content and actions about a single subject
+ * @status beta
+ * @category Layout
+ */
 export declare const Card: ({ variant, className, children, isInteractive, ref, ...rest }: ReactProps<CardInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/lib/components/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,eAAO,MAAM,IAAI,GAAI,+DAOlB,UAAU,CAAC,aAAa,CAAC,4CAgB3B,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,+DAOlB,UAAU,CAAC,aAAa,CAAC,4CAgB3B,CAAC"}

package/dist/lib/components/Carousel.d.ts

@@ -1,4 +1,10 @@
 import { CarouselInterface } from '../interfaces';
 import { ReactProps } from '../utils';
+/**
+ * Carousels show a collection of items that can be scrolled on and off the screen
+ * Resources
+ * @status beta
+ * @category Layout
+ */
 export declare const Carousel: ({ variant, className, children, ref: optionalRef, marginPourcent, inputRange, outputRange, gap, onChange, scrollSensitivity, ...restProps }: ReactProps<CarouselInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Carousel.d.ts.map

package/dist/lib/components/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,eAAe,CAAC;AAMzE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,GAAI,6IAYtB,UAAU,CAAC,iBAAiB,CAAC,4CAuK/B,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,eAAe,CAAC;AAMzE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,6IAYtB,UAAU,CAAC,iBAAiB,CAAC,4CAuK/B,CAAC"}

package/dist/lib/components/CarouselItem.d.ts

@@ -1,5 +1,9 @@
 import { CarouselItemInterface } from '../interfaces';
 import { MotionProps } from '../utils';
 export declare const normalize: (value: number, inputRange: [number, number], outputRange?: [number, number]) => number;
+/**
+ * @status beta
+ * @parent Carousel
+ */
 export declare const CarouselItem: ({ className, children, width, index, ref: optionalRef, ...restProps }: MotionProps<CarouselItemInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CarouselItem.d.ts.map

package/dist/lib/components/CarouselItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CarouselItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,SAAS,GACpB,OAAO,MAAM,EACb,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,cAAa,CAAC,MAAM,EAAE,MAAM,CAAU,KACrC,MASF,CAAC;AACF,eAAO,MAAM,YAAY,GAAI,uEAO1B,WAAW,CAAC,qBAAqB,CAAC,4CAyBpC,CAAC"}
+{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CarouselItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,SAAS,GACpB,OAAO,MAAM,EACb,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,cAAa,CAAC,MAAM,EAAE,MAAM,CAAU,KACrC,MASF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,uEAO1B,WAAW,CAAC,qBAAqB,CAAC,4CAyBpC,CAAC"}

package/dist/lib/components/{Divided.d.ts → Divider.d.ts}

@@ -1,4 +1,9 @@
 import { DividerInterface } from '../interfaces';
 import { ReactProps } from '../utils';
+/**
+ * Dividers are thin lines that group content in lists or other containers
+ * @status beta
+ * @category Layout
+ */
 export declare const Divider: ({ orientation, className, ...restProps }: ReactProps<DividerInterface>) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Divided.d.ts.map
+//# sourceMappingURL=Divider.d.ts.map

package/dist/lib/components/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,0CAIrB,UAAU,CAAC,gBAAgB,CAAC,4CAI9B,CAAC"}

package/dist/lib/components/Fab.d.ts

@@ -1,4 +1,9 @@
 import { FabInterface } from '../interfaces/fab.interface';
 import { ReactProps } from '../utils/component';
+/**
+ * Floating action buttons (FABs) help people take primary actions
+ * @status beta
+ * @category Action
+ */
 export declare const Fab: ({ className, label, variant, size, href, type, icon, isExtended, ref, transition, ...restProps }: ReactProps<FabInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Fab.d.ts.map

package/dist/lib/components/Fab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Fab.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,eAAO,MAAM,GAAG,GAAI,kGAYjB,UAAU,CAAC,YAAY,CAAC,4CAqF1B,CAAC"}
+{"version":3,"file":"Fab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Fab.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,kGAYjB,UAAU,CAAC,YAAY,CAAC,4CAqF1B,CAAC"}

package/dist/lib/components/IconButton.d.ts

@@ -1,5 +1,10 @@
 import { IconButtonInterface } from '../interfaces/icon-button.interface';
 import { ReactProps } from '../utils/component';
 export type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
-export declare const IconButton: ({ variant, href, disabled, type, title, arialLabel, onToggle, activated, onClick, icon, size, iconSelected, className, ref, width, shape, allowShapeTransformation, transition, ...restProps }: ReactProps<IconButtonInterface>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Icon buttons help people take minor actions with one tap
+ * @status beta
+ * @category Action
+ */
+export declare const IconButton: ({ variant, href, disabled, type, title, ariaLabel, onToggle, activated, onClick, icon, size, iconSelected, className, ref, width, shape, allowShapeTransformation, transition, ...restProps }: ReactProps<IconButtonInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/lib/components/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/lib/components/IconButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAE1E,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAE7E,eAAO,MAAM,UAAU,GAAI,gMAoBxB,UAAU,CAAC,mBAAmB,CAAC,4CA4GjC,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/lib/components/IconButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAE1E,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,+LAoBxB,UAAU,CAAC,mBAAmB,CAAC,4CA4GjC,CAAC"}

package/dist/lib/components/NavigationRail.d.ts

@@ -1,4 +1,9 @@
 import { ReactProps } from '../utils';
 import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
+/**
+ * Navigation rails let people switch between UI views on mid-sized devices
+ * @status beta
+ * @category Navigation
+ */
 export declare const NavigationRail: ({ variant, onItemSelected, children, className, selectedItem: externalSelectedItem, extended, alignment, menu, style, onExtendedChange, transition, setSelectedItem: externalSetSelectedItem, }: ReactProps<NavigationRailInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NavigationRail.d.ts.map

package/dist/lib/components/NavigationRail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRail.d.ts","sourceRoot":"","sources":["../../../src/lib/components/NavigationRail.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAKlF,eAAO,MAAM,cAAc,GAAI,iMAsB5B,UAAU,CAAC,uBAAuB,CAAC,4CA8IrC,CAAC"}
+{"version":3,"file":"NavigationRail.d.ts","sourceRoot":"","sources":["../../../src/lib/components/NavigationRail.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAKlF;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,iMAsB5B,UAAU,CAAC,uBAAuB,CAAC,4CAgIrC,CAAC"}

package/dist/lib/components/NavigationRailItem.d.ts

@@ -1,7 +1,15 @@
 import { ReactProps } from '../utils';
 import { NavigationRailItemInterface } from '../interfaces';
+/**
+ * @status beta
+ * @parent NavigationRail
+ */
 export declare const NavigationRailSection: ({ label }: {
     label: string;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @status beta
+ * @parent NavigationRail
+ */
 export declare const NavigationRailItem: ({ className, onClick, label, variant, href, icon, selectedItem, setSelectedItem, index, onItemSelected, selected, ref, transition, isExtended, iconSelected, style, extendedOnly, ...restProps }: ReactProps<NavigationRailItemInterface>) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=NavigationRailItem.d.ts.map

package/dist/lib/components/NavigationRailItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/NavigationRailItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAI5D,eAAO,MAAM,qBAAqB,GAAI,WAAW;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,4CAMjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kMAmBhC,UAAU,CAAC,2BAA2B,CAAC,mDAmKzC,CAAC"}
+{"version":3,"file":"NavigationRailItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/NavigationRailItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAI5D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAW;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,4CAMjE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,kMAmBhC,UAAU,CAAC,2BAA2B,CAAC,mDAmKzC,CAAC"}

package/dist/lib/components/ProgressIndicator.d.ts

@@ -1,4 +1,8 @@
 import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
 import { ReactProps } from '../utils/component';
+/**
+ * @status beta
+ * @category Communication
+ */
 export declare const ProgressIndicator: ({ variant, minHeight, value, transitionDuration, className, ...restProps }: ReactProps<ProgressIndicatorInterface>) => any;
 //# sourceMappingURL=ProgressIndicator.d.ts.map

package/dist/lib/components/ProgressIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ProgressIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAIxF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,GAAI,4EAO/B,UAAU,CAAC,0BAA0B,CAAC,KAAG,GA8I3C,CAAC"}
+{"version":3,"file":"ProgressIndicator.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ProgressIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAIxF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,4EAO/B,UAAU,CAAC,0BAA0B,CAAC,KAAG,GAgJ3C,CAAC"}

package/dist/lib/components/Slider.d.ts

@@ -1,4 +1,9 @@
 import { SliderInterface } from '../interfaces';
 import { ReactProps } from '../utils';
+/**
+ * Sliders let users make selections from a range of values
+ * @status beta
+ * @category Input
+ */
 export declare const Slider: ({ className, valueFormatter, step, name, value: defaultValue, min, max, marks, ref, onChange, ...restProps }: ReactProps<SliderInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/lib/components/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,eAAO,MAAM,MAAM,GAAI,8GAqBpB,UAAU,CAAC,eAAe,CAAC,4CA6U7B,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,8GAqBpB,UAAU,CAAC,eAAe,CAAC,4CA6U7B,CAAC"}

package/dist/lib/components/Snackbar.d.ts

@@ -1,4 +1,9 @@
 import { SnackbarInterface } from '../interfaces/snackbar.interface';
 import { MotionProps } from '../utils/component';
+/**
+ * Snackbars show short updates about app processes at the bottom of the screen
+ * @status beta
+ * @category Communication
+ */
 export declare const Snackbar: ({ supportingText, className, duration, closeIcon, onClose, ...restProps }: MotionProps<SnackbarInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Snackbar.d.ts.map

package/dist/lib/components/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Snackbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,eAAO,MAAM,QAAQ,GAAI,2EAOtB,WAAW,CAAC,iBAAiB,CAAC,4CAiDhC,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Snackbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,2EAOtB,WAAW,CAAC,iBAAiB,CAAC,4CAiDhC,CAAC"}

package/dist/lib/components/Switch.d.ts

@@ -1,4 +1,9 @@
 import { SwitchInterface } from '../interfaces/switch.interface';
 import { MotionProps } from '../utils/component';
+/**
+ * Switches toggle the selection of an item on or off
+ * @status beta
+ * @category Input
+ */
 export declare const Switch: ({ selected, className, activeIcon, disabled, inactiveIcon, onChange, onClick, onKeyDown, ref, ...restProps }: MotionProps<SwitchInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/lib/components/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,eAAO,MAAM,MAAM,GAAI,8GAWpB,WAAW,CAAC,eAAe,CAAC,4CA0E9B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,8GAWpB,WAAW,CAAC,eAAe,CAAC,4CA0E9B,CAAC"}

package/dist/lib/components/Tab.d.ts

@@ -1,4 +1,8 @@
 import { TabInterface } from '../interfaces/tab.interface';
 import { ReactProps } from '../utils/component';
+/**
+ * @status beta
+ * @parent Tabs
+ */
 export declare const Tab: ({ className, onClick, label, variant, href, icon, selectedTab, setSelectedTab, tabsId, index, onTabSelected, scrollable, selected, ref, ...restProps }: ReactProps<TabInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tab.d.ts.map

package/dist/lib/components/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tab.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAO,MAAM,GAAG,GAAI,wJAgBjB,UAAU,CAAC,YAAY,CAAC,4CAoF1B,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tab.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,GAAG,GAAI,wJAgBjB,UAAU,CAAC,YAAY,CAAC,4CAoF1B,CAAC"}

package/dist/lib/components/Tabs.d.ts

@@ -1,4 +1,9 @@
 import { TabsInterface } from '../interfaces/tabs.interface';
 import { ReactProps } from '../utils/component';
+/**
+ * Tabs organize content across different screens and views
+ * @status beta
+ * @category Navigation
+ */
 export declare const Tabs: ({ variant, onTabSelected, children, className, selectedTab: externalSelectedTab, setSelectedTab: externalSetSelectedTab, scrollable, }: ReactProps<TabsInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/lib/components/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIhD,eAAO,MAAM,IAAI,GAAI,wIAQlB,UAAU,CAAC,aAAa,CAAC,4CAmE3B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIhD;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,wIAQlB,UAAU,CAAC,aAAa,CAAC,4CAmE3B,CAAC"}

package/dist/lib/components/TextField.d.ts

@@ -1,4 +1,9 @@
 import { ReactProps } from '../utils/component';
 import { TextFieldInterface } from '../interfaces/text-field.interface';
+/**
+ * Text fields let users enter text into a UI
+ * @status beta
+ * @category Input
+ */
 export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, textLine, autoComplete, onChange, value: defaultValue, showSupportingText: defaultShowSupportingText, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/lib/components/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,eAAO,MAAM,SAAS,GAAI,oPAmBvB,UAAU,CAAC,kBAAkB,CAAC,4CA6OhC,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,oPAmBvB,UAAU,CAAC,kBAAkB,CAAC,4CA6OhC,CAAC"}

package/dist/lib/components/ToolTip.d.ts

@@ -1,4 +1,9 @@
 import { MotionProps } from '../utils';
 import { ToolTipInterface } from '../interfaces';
+/**
+ * Tooltips display brief labels or messages
+ * @status beta
+ * @category Communication
+ */
 export declare const ToolTip: ({ variant, buttons, className, children, title, text, position, targetRef, ref, trigger, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolTip.d.ts.map

package/dist/lib/components/ToolTip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ToolTip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD,eAAO,MAAM,OAAO,GAAI,qGAYrB,WAAW,CAAC,gBAAgB,CAAC,4CA4M/B,CAAC"}
+{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ToolTip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,qGAYrB,WAAW,CAAC,gBAAgB,CAAC,4CA6M/B,CAAC"}

package/dist/lib/components/index.d.ts

@@ -3,7 +3,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './CarouselItem';
 export * from './CarouselItem';
-export * from './Divided';
+export * from './Divider';
 export * from './Fab';
 export * from './IconButton';
 export * from './IconButton';

package/dist/lib/effects/SyncedFixedWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyncedFixedWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/SyncedFixedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAGf,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,0BAGhC,uBAAuB,uCA8CzB,CAAC"}
+{"version":3,"file":"SyncedFixedWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/SyncedFixedWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAGf,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,0BAGhC,uBAAuB,uCA4CzB,CAAC"}

package/dist/lib/interfaces/button.interface.d.ts

@@ -27,10 +27,15 @@ type Props = {
     shape?: 'squared' | 'rounded';
     allowShapeTransformation?: boolean;
     transition?: Transition;
+    onToggle?: (isActive: boolean) => void;
+    activated?: boolean;
 };
 type Elements = ['button', 'stateLayer', 'container', 'icon', 'label'];
 export type ButtonInterface = ActionOrLink<Props> & {
     elements: Elements;
+    states: {
+        isActive: boolean;
+    };
 };
 export {};
 //# sourceMappingURL=button.interface.d.ts.map

package/dist/lib/interfaces/button.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/button.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IAEtE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAE9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,KAAK,QAAQ,GAAG,CAAC,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG;IAClD,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}
+{"version":3,"file":"button.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/button.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IAEtE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEhC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAE9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,QAAQ,GAAG,CAAC,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG;IAClD,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE;QACN,QAAQ,EAAE,OAAO,CAAC;KACnB,CAAC;CACH,CAAC"}

package/dist/lib/interfaces/icon-button.interface.d.ts

@@ -3,7 +3,7 @@ import { IconButtonVariant } from '../components/IconButton';
 import { ActionOrLink } from '../utils/component';
 import { Transition } from 'motion';
 type Props = {
-    arialLabel: string;
+    ariaLabel: string;
     icon: IconDefinition;
     size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
     width?: 'default' | 'narrow' | 'wide';

package/dist/lib/interfaces/icon-button.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/icon-button.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAE9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AACF,KAAK,QAAQ,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG;IACtD,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}
+{"version":3,"file":"icon-button.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/icon-button.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAE9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AACF,KAAK,QAAQ,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG;IACtD,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}

package/dist/lib/styles/button.style.d.ts

@@ -1,5 +1,5 @@
 import { ButtonInterface } from '../interfaces';
-export declare const buttonStyle: (states: ({
+export declare const buttonStyle: (states: (({
     label: any;
     size: any;
     variant: any;
@@ -10,6 +10,8 @@ export declare const buttonStyle: (states: ({
     shape: any;
     allowShapeTransformation: any;
     transition: any;
+    onToggle: any;
+    activated: any;
     href: any;
 } | {
     label: any;
@@ -22,8 +24,10 @@ export declare const buttonStyle: (states: ({
     shape: any;
     allowShapeTransformation: any;
     transition: any;
+    onToggle: any;
+    activated: any;
     href: any;
-}) & ((({
+}) & (({
     label: string;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     variant?: "filled" | "elevated" | "outlined" | "text" | "filledTonal";
@@ -34,6 +38,8 @@ export declare const buttonStyle: (states: ({
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
+    onToggle?: (isActive: boolean) => void;
+    activated?: boolean;
 } & {
     href?: string;
 }) | ({
@@ -47,9 +53,13 @@ export declare const buttonStyle: (states: ({
     shape?: "squared" | "rounded";
     allowShapeTransformation?: boolean;
     transition?: import('motion').Transition;
+    onToggle?: (isActive: boolean) => void;
+    activated?: boolean;
 } & {
     href?: never;
-})) & {
+}))) & {
+    isActive: boolean;
+} & {
     className: string | import('..').ClassNameComponent<ButtonInterface> | undefined;
-})) => Record<"container" | "button" | "label" | "stateLayer" | "icon", string>;
+}) => Record<"container" | "button" | "label" | "stateLayer" | "icon", string>;
 //# sourceMappingURL=button.style.d.ts.map

package/dist/lib/styles/button.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/button.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAuJvB,CAAC"}
+{"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/button.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EAkIvB,CAAC"}

package/dist/lib/styles/icon-button.style.d.ts

@@ -1,6 +1,6 @@
 import { IconButtonInterface } from '../interfaces/icon-button.interface';
 export declare const iconButtonStyle: (states: (({
-    arialLabel: any;
+    ariaLabel: any;
     icon: any;
     size: any;
     width: any;
@@ -14,7 +14,7 @@ export declare const iconButtonStyle: (states: (({
     transition: any;
     href: any;
 } | {
-    arialLabel: any;
+    ariaLabel: any;
     icon: any;
     size: any;
     width: any;
@@ -28,7 +28,7 @@ export declare const iconButtonStyle: (states: (({
     transition: any;
     href: any;
 }) & (({
-    arialLabel: string;
+    ariaLabel: string;
     icon: import('@fortawesome/fontawesome-svg-core').IconDefinition;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";
@@ -43,7 +43,7 @@ export declare const iconButtonStyle: (states: (({
 } & {
     href?: string;
 }) | ({
-    arialLabel: string;
+    ariaLabel: string;
     icon: import('@fortawesome/fontawesome-svg-core').IconDefinition;
     size?: "xSmall" | "small" | "medium" | "large" | "xLarge";
     width?: "default" | "narrow" | "wide";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -15,13 +15,22 @@
       "default": "./dist/index.js"
     }
   },
+  "peerDependencies": {
+    "react": ">19.0.0",
+    "react-dom": ">19.0.0"
+  },
   "dependencies": {
+    "throttle-debounce": "^5.0.2",
+    "clsx": "^2.1.1",
     "react-textarea-autosize": "^8.5.9",
-    "motion": "^12.23.0"
+    "motion": "^12.23.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "@udixio/theme": "1.0.0",
-    "@udixio/tailwind": "1.0.0"
+    "@udixio/tailwind": "1.1.0"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Button.tsx

@@ -4,10 +4,12 @@ import { buttonStyle } from '../styles';
 import { Icon } from '../icon';
 import { ProgressIndicator } from './ProgressIndicator';
 import { RippleEffect } from '../effects';
-import { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 /**
- * The Button component is a versatile component that can be used to trigger actions or to navigate to different sections of the application
+ * Buttons prompt most actions in a UI
+ * @status beta
+ * @category Action
  */
 export const Button = ({
   variant = 'filled',
@@ -20,10 +22,13 @@ export const Button = ({
   loading = false,
   shape = 'rounded',
   onClick,
+  onToggle,
+  activated,
   ref,
   size = 'medium',
   allowShapeTransformation = true,
   transition,
+  children,
   ...restProps
 }: ReactProps<ButtonInterface>) => {
   const ElementType = href ? 'a' : 'button';
@@ -31,6 +36,33 @@ export const Button = ({
   const defaultRef = useRef<HTMLDivElement>(null);
   const resolvedRef = ref || defaultRef;
 
+  const [isActive, setIsActive] = React.useState(activated);
+  useEffect(() => {
+    setIsActive(activated);
+  }, [activated]);
+
+  transition = { duration: 0.3, ...transition };
+
+  let handleClick;
+
+  if (!onToggle) {
+    handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
+      if (disabled) {
+        e.preventDefault();
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    };
+  } else if (onToggle) {
+    handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
+      if (disabled) {
+        e.preventDefault();
+      }
+      setIsActive(!isActive);
+      onToggle(Boolean(isActive));
+    };
+  }
   const styles = buttonStyle({
     allowShapeTransformation,
     size,
@@ -44,31 +76,26 @@ export const Button = ({
     variant,
     transition,
     className,
+    isActive: isActive ?? false,
+    onToggle,
+    activated: isActive,
   });
-
   const iconElement = icon ? (
     <Icon icon={icon} className={styles.icon} />
   ) : (
     <></>
   );
-
-  transition = { duration: 0.3, ...transition };
+  console.log('gfegrger', onToggle);
+  console.log('test', isActive, onToggle, handleClick);
   return (
     <ElementType
       ref={resolvedRef}
       href={href}
       className={styles.button}
       {...(restProps as any)}
-      onClick={(e: any) => {
-        if (!disabled) {
-          if (onClick) {
-            onClick(e);
-          }
-        } else {
-          e.preventDefault();
-        }
-      }}
+      onClick={handleClick}
       disabled={disabled}
+      aria-pressed={onToggle ? isActive : undefined}
     >
       <div
         className={styles.container}
@@ -132,7 +159,7 @@ export const Button = ({
             />
           </div>
         )}
-        <span className={styles.label}>{label}</span>
+        <span className={styles.label}>{label ?? children}</span>
         {iconPosition === 'right' && iconElement}
       </div>
     </ElementType>

package/src/lib/components/Card.tsx

@@ -5,6 +5,11 @@ import { CardInterface } from '../interfaces';
 import { cardStyle } from '../styles';
 import { ReactProps } from '../utils';
 
+/**
+ * Cards display content and actions about a single subject
+ * @status beta
+ * @category Layout
+ */
 export const Card = ({
   variant = 'outlined',
   className,