glassine-paper 1.0.1 → 1.1.0

package/README.md

@@ -17,13 +17,13 @@ CSS and some React components for Material Design 3
 | Button       |  o  |   o   |
 | Slider       |  o  |   o   |
 | Text Field   |  o  |   o   |
+| Checkbox     |  o  |   o   |
+| Switch       |  o  |   o   |
+| Radio        |  o  |   o   |
 | Nav Drawer   |  o  |   o   |
 | Nav Bar      |  o  |   x   |
 | Nav Rail     |  o  |   x   |
 | Fab          |  o  |   x   |
-| Checkbox     |  o  |   x   |
-| Switch       |  o  |   x   |
-| Radio Button |  o  |   x   |
 | Divider      |  o  |   x   |
 | Search       |  x  |   x   |
 | Card         |  x  |   x   |

package/lib/AppBar.d.ts

@@ -22,24 +22,24 @@ export interface AppBarProps {
 /**
  * Material Design 3 App bar component
  *
- * @param props AppBarProps
- * @param props.id Element id
- * @param props.items Array of AppBarItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].type Item type: 'button', 'appLogo', 'title', or 'spacer'
- * @param props.items[].icon Icon element (svg or img)
- * @param props.items[].title Title text
- * @param props.items[].subtitle Subtitle text
- * @param props.items[].active Active state
- * @param props.items[].hidden Hidden state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.sticky Whether the app bar sticks to the top
- * @param props.scrolled Whether the content is scrolled (affects styling)
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {AppBarProps} props The props for the AppBar component.
+ * @param {string} [props.id] Element id
+ * @param {Iterable<AppBarItemProps>} props.items Array of AppBarItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {('button' | 'appLogo' | 'title' | 'spacer')} [props.items[].type] Item type: 'button', 'appLogo', 'title', or 'spacer'
+ * @param {React.ReactNode} [props.items[].icon] Icon element (svg or img)
+ * @param {string} [props.items[].title] Title text
+ * @param {string} [props.items[].subtitle] Subtitle text
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].hidden] Hidden state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {boolean} [props.sticky] Whether the app bar sticks to the top
+ * @param {boolean} [props.scrolled] Whether the content is scrolled (affects styling)
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * import useDetectScroll, { Axis } from '@smakss/react-scroll-direction';

package/lib/AppBar.js

@@ -19,24 +19,24 @@ const AppBarItem = ({ id, type = 'button', title, subtitle, icon, active = false
 /**
  * Material Design 3 App bar component
  *
- * @param props AppBarProps
- * @param props.id Element id
- * @param props.items Array of AppBarItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].type Item type: 'button', 'appLogo', 'title', or 'spacer'
- * @param props.items[].icon Icon element (svg or img)
- * @param props.items[].title Title text
- * @param props.items[].subtitle Subtitle text
- * @param props.items[].active Active state
- * @param props.items[].hidden Hidden state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.sticky Whether the app bar sticks to the top
- * @param props.scrolled Whether the content is scrolled (affects styling)
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {AppBarProps} props The props for the AppBar component.
+ * @param {string} [props.id] Element id
+ * @param {Iterable<AppBarItemProps>} props.items Array of AppBarItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {('button' | 'appLogo' | 'title' | 'spacer')} [props.items[].type] Item type: 'button', 'appLogo', 'title', or 'spacer'
+ * @param {React.ReactNode} [props.items[].icon] Icon element (svg or img)
+ * @param {string} [props.items[].title] Title text
+ * @param {string} [props.items[].subtitle] Subtitle text
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].hidden] Hidden state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {boolean} [props.sticky] Whether the app bar sticks to the top
+ * @param {boolean} [props.scrolled] Whether the content is scrolled (affects styling)
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * import useDetectScroll, { Axis } from '@smakss/react-scroll-direction';

package/lib/Button.d.ts

@@ -22,23 +22,23 @@ export interface ButtonProps {
 /**
  * Material Design 3 Button component
  *
- * @param props ButtonProps
- * @param props.id Input id attribute
- * @param props.name Input name attribute
- * @param props.variant Button variant: 'filled', 'tonal', 'danger', 'error', 'outlined', 'elevated', or 'text'
- * @param props.size Button size: 'xs', 'sm', or 'md'
- * @param props.radius Button radius: 'default' or 'square'
- * @param props.label Label text
- * @param props.icon Leading icon element
- * @param props.width Icon button width: 'narrow', 'default', or 'wide'
- * @param props.type Button type: 'button', 'submit', 'reset', 'toggle', or 'select'
- * @param props.href Link URL (renders as anchor tag)
- * @param props.checked Checked state (for toggle/select types)
- * @param props.disabled Disabled state
- * @param props.onClick Click handler
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {ButtonProps} props ButtonProps
+ * @param {string} [props.id] Input id attribute
+ * @param {string} [props.name] Input name attribute
+ * @param {('filled' | 'tonal' | 'danger' | 'error' | 'outlined' | 'elevated' | 'text')} [props.variant] Button variant: 'filled', 'tonal', 'danger', 'error', 'outlined', 'elevated', or 'text'
+ * @param {('xs' | 'sm' | 'md')} [props.size] Button size: 'xs', 'sm', or 'md'
+ * @param {('default' | 'square')} [props.radius] Button radius: 'default' or 'square'
+ * @param {string} [props.label] Label text
+ * @param {React.ReactNode} [props.icon] Leading icon element
+ * @param {('narrow' | 'default' | 'wide')} [props.width] Icon button width: 'narrow', 'default', or 'wide'
+ * @param {('button' | 'submit' | 'reset' | 'toggle' | 'select')} [props.type] Button type: 'button', 'submit', 'reset', 'toggle', or 'select'
+ * @param {string} [props.href] Link URL (renders as anchor tag)
+ * @param {boolean} [props.checked] Checked state (for toggle/select types)
+ * @param {boolean} [props.disabled] Disabled state
+ * @param {Function} [props.onClick] Click handler
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * // Regular button

package/lib/Button.js

@@ -3,23 +3,23 @@ import React, {} from 'react';
 /**
  * Material Design 3 Button component
  *
- * @param props ButtonProps
- * @param props.id Input id attribute
- * @param props.name Input name attribute
- * @param props.variant Button variant: 'filled', 'tonal', 'danger', 'error', 'outlined', 'elevated', or 'text'
- * @param props.size Button size: 'xs', 'sm', or 'md'
- * @param props.radius Button radius: 'default' or 'square'
- * @param props.label Label text
- * @param props.icon Leading icon element
- * @param props.width Icon button width: 'narrow', 'default', or 'wide'
- * @param props.type Button type: 'button', 'submit', 'reset', 'toggle', or 'select'
- * @param props.href Link URL (renders as anchor tag)
- * @param props.checked Checked state (for toggle/select types)
- * @param props.disabled Disabled state
- * @param props.onClick Click handler
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {ButtonProps} props ButtonProps
+ * @param {string} [props.id] Input id attribute
+ * @param {string} [props.name] Input name attribute
+ * @param {('filled' | 'tonal' | 'danger' | 'error' | 'outlined' | 'elevated' | 'text')} [props.variant] Button variant: 'filled', 'tonal', 'danger', 'error', 'outlined', 'elevated', or 'text'
+ * @param {('xs' | 'sm' | 'md')} [props.size] Button size: 'xs', 'sm', or 'md'
+ * @param {('default' | 'square')} [props.radius] Button radius: 'default' or 'square'
+ * @param {string} [props.label] Label text
+ * @param {React.ReactNode} [props.icon] Leading icon element
+ * @param {('narrow' | 'default' | 'wide')} [props.width] Icon button width: 'narrow', 'default', or 'wide'
+ * @param {('button' | 'submit' | 'reset' | 'toggle' | 'select')} [props.type] Button type: 'button', 'submit', 'reset', 'toggle', or 'select'
+ * @param {string} [props.href] Link URL (renders as anchor tag)
+ * @param {boolean} [props.checked] Checked state (for toggle/select types)
+ * @param {boolean} [props.disabled] Disabled state
+ * @param {Function} [props.onClick] Click handler
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * // Regular button

package/lib/Checkbox.d.ts

@@ -0,0 +1,41 @@
+import React, { type CSSProperties } from 'react';
+/**
+ * Checkbox component props
+ */
+export interface CheckboxProps {
+    id?: string;
+    name?: string;
+    error?: boolean;
+    disabled?: boolean;
+    value?: string;
+    checked?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Material Design 3 Checkbox component.
+ *
+ * @param {CheckboxProps} props The properties for the Checkbox component.
+ * @param {string} [props.id] The ID of the checkbox.
+ * @param {string} [props.name] The name of the checkbox.
+ * @param {boolean} [props.error=false] Whether the checkbox is in an error state.
+ * @param {boolean} [props.disabled=false] Whether the checkbox is disabled.
+ * @param {string} [props.value] The value of the checkbox.
+ * @param {boolean} [props.checked] Whether the checkbox is checked.
+ * @param {Function} [props.onClick] The function to call when the checkbox is clicked.
+ * @param {string} [props.className] Additional CSS classes to apply to the checkbox.
+ * @param {CSSProperties} [props.style] Additional CSS styles to apply to the checkbox.
+ * @returns {JSX.Element} A Checkbox component.
+ *
+ * @example
+ * <Checkbox
+ *  id="my-checkbox"
+ *  name="my-checkbox"
+ *  checked={isChecked}
+ *  onClick={() => setIsChecked(!isChecked)}
+ * />
+ */
+export declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0B5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/Checkbox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, {} from 'react';
+/**
+ * Material Design 3 Checkbox component.
+ *
+ * @param {CheckboxProps} props The properties for the Checkbox component.
+ * @param {string} [props.id] The ID of the checkbox.
+ * @param {string} [props.name] The name of the checkbox.
+ * @param {boolean} [props.error=false] Whether the checkbox is in an error state.
+ * @param {boolean} [props.disabled=false] Whether the checkbox is disabled.
+ * @param {string} [props.value] The value of the checkbox.
+ * @param {boolean} [props.checked] Whether the checkbox is checked.
+ * @param {Function} [props.onClick] The function to call when the checkbox is clicked.
+ * @param {string} [props.className] Additional CSS classes to apply to the checkbox.
+ * @param {CSSProperties} [props.style] Additional CSS styles to apply to the checkbox.
+ * @returns {JSX.Element} A Checkbox component.
+ *
+ * @example
+ * <Checkbox
+ *  id="my-checkbox"
+ *  name="my-checkbox"
+ *  checked={isChecked}
+ *  onClick={() => setIsChecked(!isChecked)}
+ * />
+ */
+export const Checkbox = ({ id, name, error = false, disabled = false, value, checked, onClick, className = '', style = {}, }) => {
+    const classes = ['checkbox', error ? 'error' : '', className];
+    return (_jsx("input", { id: id, name: name, className: classes.join(' '), type: "checkbox", style: style, disabled: disabled, value: value, checked: checked, onClick: (event) => (onClick ? onClick(event) : undefined) }));
+};
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/lib/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAiBlD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,EAAE,EACF,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAE9D,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAC1D,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/Menu.d.ts

@@ -19,21 +19,21 @@ export interface MenuProps {
 /**
  * Material Design 3 Menu component
  *
- * @param props MenuProps
- * @param props.id Element id
- * @param props.items Array of MenuItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].leadingIcon Leading icon element
- * @param props.items[].trailingIcon Trailing icon element
- * @param props.items[].divider Show as divider (renders hr element)
- * @param props.items[].active Active state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {MenuProps} props MenuProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<MenuItemProps>} props.items Array of MenuItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} [props.items[].label] Label text
+ * @param {React.ReactNode} [props.items[].leadingIcon] Leading icon element
+ * @param {React.ReactNode} [props.items[].trailingIcon] Trailing icon element
+ * @param {boolean} [props.items[].divider] Show as divider (renders hr element)
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Menu

package/lib/Menu.js

@@ -7,21 +7,21 @@ const MenuItem = ({ key, id, label, leadingIcon, trailingIcon, divider = false,
 /**
  * Material Design 3 Menu component
  *
- * @param props MenuProps
- * @param props.id Element id
- * @param props.items Array of MenuItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].leadingIcon Leading icon element
- * @param props.items[].trailingIcon Trailing icon element
- * @param props.items[].divider Show as divider (renders hr element)
- * @param props.items[].active Active state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {MenuProps} props MenuProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<MenuItemProps>} props.items Array of MenuItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} [props.items[].label] Label text
+ * @param {React.ReactNode} [props.items[].leadingIcon] Leading icon element
+ * @param {React.ReactNode} [props.items[].trailingIcon] Trailing icon element
+ * @param {boolean} [props.items[].divider] Show as divider (renders hr element)
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Menu

package/lib/NavDrawer.d.ts

@@ -21,23 +21,23 @@ export interface NavDrawerProps {
 /**
  * Material Design 3 NavDrawer component
  *
- * @param props NavDrawerProps
- * @param props.id Element id
- * @param props.items Array of NavDrawerItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].leadingIcon Leading icon element
- * @param props.items[].trailingIcon Trailing icon element
- * @param props.items[].divider Show as divider (renders hr element)
- * @param props.items[].active Active state
- * @param props.items[].hidden Hidden state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {NavDrawerProps} props NavDrawerProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<NavDrawerItemProps>} props.items Array of NavDrawerItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} [props.items[].label] Label text
+ * @param {React.ReactNode} [props.items[].leadingIcon] Leading icon element
+ * @param {React.ReactNode} [props.items[].trailingIcon] Trailing icon element
+ * @param {boolean} [props.items[].divider] Show as divider (renders hr element)
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].hidden] Hidden state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <NavDrawer

package/lib/NavDrawer.js

@@ -11,23 +11,23 @@ const NavDrawerItem = ({ key, id, label, leadingIcon, trailingIcon, divider = fa
 /**
  * Material Design 3 NavDrawer component
  *
- * @param props NavDrawerProps
- * @param props.id Element id
- * @param props.items Array of NavDrawerItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].leadingIcon Leading icon element
- * @param props.items[].trailingIcon Trailing icon element
- * @param props.items[].divider Show as divider (renders hr element)
- * @param props.items[].active Active state
- * @param props.items[].hidden Hidden state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {NavDrawerProps} props NavDrawerProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<NavDrawerItemProps>} props.items Array of NavDrawerItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} [props.items[].label] Label text
+ * @param {React.ReactNode} [props.items[].leadingIcon] Leading icon element
+ * @param {React.ReactNode} [props.items[].trailingIcon] Trailing icon element
+ * @param {boolean} [props.items[].divider] Show as divider (renders hr element)
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].hidden] Hidden state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <NavDrawer

package/lib/Radio.d.ts

@@ -0,0 +1,40 @@
+import React, { type CSSProperties } from 'react';
+/**
+ * Radio component props
+ */
+export interface RadioProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    value?: string;
+    checked?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Material Design 3 Radio button component.
+ *
+ * @param {RadioProps} props The properties for the Radio component.
+ * @param {string} [props.id] The ID of the radio button.
+ * @param {string} [props.name] The name of the radio button.
+ * @param {boolean} [props.disabled=false] Whether the radio button is disabled.
+ * @param {string} [props.value] The value of the radio button.
+ * @param {boolean} [props.checked] Whether the radio button is checked.
+ * @param {Function} [props.onClick] The function to call when the radio button is clicked.
+ * @param {string} [props.className] Additional CSS classes to apply to the radio button.
+ * @param {CSSProperties} [props.style] Additional CSS styles to apply to the radio button.
+ * @returns {JSX.Element} A Radio component.
+ *
+ * @example
+ * <Radio
+ *  id="my-radio"
+ *  name="my-radio-group"
+ *  value="option1"
+ *  checked={selectedValue === 'option1'}
+ *  onClick={() => setSelectedValue('option1')}
+ * />
+ */
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

package/lib/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyBtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/Radio.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, {} from 'react';
+/**
+ * Material Design 3 Radio button component.
+ *
+ * @param {RadioProps} props The properties for the Radio component.
+ * @param {string} [props.id] The ID of the radio button.
+ * @param {string} [props.name] The name of the radio button.
+ * @param {boolean} [props.disabled=false] Whether the radio button is disabled.
+ * @param {string} [props.value] The value of the radio button.
+ * @param {boolean} [props.checked] Whether the radio button is checked.
+ * @param {Function} [props.onClick] The function to call when the radio button is clicked.
+ * @param {string} [props.className] Additional CSS classes to apply to the radio button.
+ * @param {CSSProperties} [props.style] Additional CSS styles to apply to the radio button.
+ * @returns {JSX.Element} A Radio component.
+ *
+ * @example
+ * <Radio
+ *  id="my-radio"
+ *  name="my-radio-group"
+ *  value="option1"
+ *  checked={selectedValue === 'option1'}
+ *  onClick={() => setSelectedValue('option1')}
+ * />
+ */
+export const Radio = ({ id, name, disabled = false, value, checked, onClick, className = '', style = {}, }) => {
+    const classes = ['radio', className];
+    return (_jsx("input", { id: id, name: name, className: classes.join(' '), type: "radio", style: style, disabled: disabled, value: value, checked: checked, onClick: (event) => (onClick ? onClick(event) : undefined) }));
+};
+export default Radio;
+//# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../src/components/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAgBlD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,EAAE,EACF,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAErC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAC1D,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/Slider.d.ts

@@ -21,23 +21,23 @@ export interface SliderProps {
 /**
  * Material Design 3 Slider component
  *
- * @param props SliderProps
- * @param props.id Input id attribute
- * @param props.name Input name attribute
- * @param props.min Minimum value
- * @param props.max Maximum value
- * @param props.step Step increment
- * @param props.value Current value
- * @param props.size Size variant: 'xs', 'sm', or 'md'
- * @param props.orientation Orientation: 'horizontal', 'top-bottom', or 'bottom-top'
- * @param props.showValueIndicator Show value indicator
- * @param props.options Datalist options array
- * @param props.options[].value Option value
- * @param props.options[].key Optional unique key for the option
- * @param props.onChange Change handler function
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {SliderProps} props SliderProps
+ * @param {string} [props.id] Input id attribute
+ * @param {string} [props.name] Input name attribute
+ * @param {number} [props.min] Minimum value
+ * @param {number} [props.max] Maximum value
+ * @param {number} [props.step] Step increment
+ * @param {number} props.value Current value
+ * @param {('xs' | 'sm' | 'md')} [props.size] Size variant: 'xs', 'sm', or 'md'
+ * @param {('horizontal' | 'top-bottom' | 'bottom-top')} [props.orientation] Orientation: 'horizontal', 'top-bottom', or 'bottom-top'
+ * @param {boolean} [props.showValueIndicator] Show value indicator
+ * @param {SliderOption[]} [props.options] Datalist options array
+ * @param {number} props.options[].value Option value
+ * @param {string} [props.options[].key] Optional unique key for the option
+ * @param {Function} [props.onChange] Change handler function
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Slider

package/lib/Slider.js

@@ -3,23 +3,23 @@ import React, { useEffect, useRef } from 'react';
 /**
  * Material Design 3 Slider component
  *
- * @param props SliderProps
- * @param props.id Input id attribute
- * @param props.name Input name attribute
- * @param props.min Minimum value
- * @param props.max Maximum value
- * @param props.step Step increment
- * @param props.value Current value
- * @param props.size Size variant: 'xs', 'sm', or 'md'
- * @param props.orientation Orientation: 'horizontal', 'top-bottom', or 'bottom-top'
- * @param props.showValueIndicator Show value indicator
- * @param props.options Datalist options array
- * @param props.options[].value Option value
- * @param props.options[].key Optional unique key for the option
- * @param props.onChange Change handler function
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {SliderProps} props SliderProps
+ * @param {string} [props.id] Input id attribute
+ * @param {string} [props.name] Input name attribute
+ * @param {number} [props.min] Minimum value
+ * @param {number} [props.max] Maximum value
+ * @param {number} [props.step] Step increment
+ * @param {number} props.value Current value
+ * @param {('xs' | 'sm' | 'md')} [props.size] Size variant: 'xs', 'sm', or 'md'
+ * @param {('horizontal' | 'top-bottom' | 'bottom-top')} [props.orientation] Orientation: 'horizontal', 'top-bottom', or 'bottom-top'
+ * @param {boolean} [props.showValueIndicator] Show value indicator
+ * @param {SliderOption[]} [props.options] Datalist options array
+ * @param {number} props.options[].value Option value
+ * @param {string} [props.options[].key] Optional unique key for the option
+ * @param {Function} [props.onChange] Change handler function
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Slider

package/lib/Switch.d.ts

@@ -0,0 +1,39 @@
+import React, { type CSSProperties } from 'react';
+/**
+ * Switch component props
+ */
+export interface SwitchProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    value?: string;
+    checked?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Material Design 3 Switch component.
+ *
+ * @param {SwitchProps} props The properties for the Switch component.
+ * @param {string} [props.id] The ID of the switch.
+ * @param {string} [props.name] The name of the switch.
+ * @param {boolean} [props.disabled=false] Whether the switch is disabled.
+ * @param {string} [props.value] The value of the switch.
+ * @param {boolean} [props.checked] Whether the switch is checked.
+ * @param {Function} [props.onClick] The function to call when the switch is clicked.
+ * @param {string} [props.className] Additional CSS classes to apply to the switch.
+ * @param {CSSProperties} [props.style] Additional CSS styles to apply to the switch.
+ * @returns {JSX.Element} A Switch component.
+ *
+ * @example
+ * <Switch
+ *  id="my-switch"
+ *  name="my-switch"
+ *  checked={isChecked}
+ *  onClick={() => setIsChecked(!isChecked)}
+ * />
+ */
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;
+//# sourceMappingURL=Switch.d.ts.map

package/lib/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyBxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/Switch.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, {} from 'react';
+/**
+ * Material Design 3 Switch component.
+ *
+ * @param {SwitchProps} props The properties for the Switch component.
+ * @param {string} [props.id] The ID of the switch.
+ * @param {string} [props.name] The name of the switch.
+ * @param {boolean} [props.disabled=false] Whether the switch is disabled.
+ * @param {string} [props.value] The value of the switch.
+ * @param {boolean} [props.checked] Whether the switch is checked.
+ * @param {Function} [props.onClick] The function to call when the switch is clicked.
+ * @param {string} [props.className] Additional CSS classes to apply to the switch.
+ * @param {CSSProperties} [props.style] Additional CSS styles to apply to the switch.
+ * @returns {JSX.Element} A Switch component.
+ *
+ * @example
+ * <Switch
+ *  id="my-switch"
+ *  name="my-switch"
+ *  checked={isChecked}
+ *  onClick={() => setIsChecked(!isChecked)}
+ * />
+ */
+export const Switch = ({ id, name, disabled = false, value, checked, onClick, className = '', style = {}, }) => {
+    const classes = ['switch', className];
+    return (_jsx("input", { id: id, name: name, className: classes.join(' '), type: "checkbox", style: style, disabled: disabled, value: value, checked: checked, onClick: (event) => (onClick ? onClick(event) : undefined) }));
+};
+export default Switch;
+//# sourceMappingURL=Switch.js.map

package/lib/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/components/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAgBlD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,EAAE,EACF,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEtC,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5B,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAC1D,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/Tabs.d.ts

@@ -17,19 +17,19 @@ export interface TabsProps {
 /**
  * Material Design 3 Tabs component
  *
- * @param props TabsProps
- * @param props.id Element id
- * @param props.items Array of TabItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].leadingIcon Leading icon element
- * @param props.items[].active Active state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {TabsProps} props TabsProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<TabItemProps>} props.items Array of TabItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} props.items[].label Label text
+ * @param {React.ReactNode} [props.items[].leadingIcon] Leading icon element
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Tabs

package/lib/Tabs.js

@@ -7,19 +7,19 @@ const TabItem = ({ key, id, leadingIcon, label, active = false, onClick, href, }
 /**
  * Material Design 3 Tabs component
  *
- * @param props TabsProps
- * @param props.id Element id
- * @param props.items Array of TabItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].leadingIcon Leading icon element
- * @param props.items[].active Active state
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {TabsProps} props TabsProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<TabItemProps>} props.items Array of TabItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} props.items[].label Label text
+ * @param {React.ReactNode} [props.items[].leadingIcon] Leading icon element
+ * @param {boolean} [props.items[].active] Active state
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Tabs

package/lib/TextField.d.ts

@@ -24,25 +24,25 @@ export interface TextFieldProps {
 /**
  * Material Design 3 TextField component
  *
- * @param props TextFieldProps
- * @param props.id Input id attribute
- * @param props.name Input name attribute
- * @param props.variant Variant of the text field: 'filled' or 'outlined'
- * @param props.type Input type: 'text', 'email', 'number', 'password', 'tel', or 'url'
- * @param props.label Label text
- * @param props.placeholder Placeholder text (should match label)
- * @param props.value Current value
- * @param props.error Error state
- * @param props.disabled Disabled state
- * @param props.supportingText Supporting text or error message
- * @param props.leadingIcon Leading icon element
- * @param props.trailingIcon Trailing icon element
- * @param props.onChange Change handler
- * @param props.onBlur Blur handler
- * @param props.onFocus Focus handler
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {TextFieldProps} props TextFieldProps
+ * @param {string} [props.id] Input id attribute
+ * @param {string} [props.name] Input name attribute
+ * @param {('filled' | 'outlined')} [props.variant] Variant of the text field: 'filled' or 'outlined'
+ * @param {('text' | 'email' | 'number' | 'password' | 'tel' | 'url')} [props.type] Input type: 'text', 'email', 'number', 'password', 'tel', or 'url'
+ * @param {string} props.label Label text
+ * @param {string} [props.placeholder] Placeholder text (should match label)
+ * @param {(string | number)} [props.value] Current value
+ * @param {boolean} [props.error] Error state
+ * @param {boolean} [props.disabled] Disabled state
+ * @param {string} [props.supportingText] Supporting text or error message
+ * @param {React.ReactNode} [props.leadingIcon] Leading icon element
+ * @param {React.ReactNode} [props.trailingIcon] Trailing icon element
+ * @param {Function} [props.onChange] Change handler
+ * @param {Function} [props.onBlur] Blur handler
+ * @param {Function} [props.onFocus] Focus handler
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <TextField

package/lib/TextField.js

@@ -3,25 +3,25 @@ import React, {} from 'react';
 /**
  * Material Design 3 TextField component
  *
- * @param props TextFieldProps
- * @param props.id Input id attribute
- * @param props.name Input name attribute
- * @param props.variant Variant of the text field: 'filled' or 'outlined'
- * @param props.type Input type: 'text', 'email', 'number', 'password', 'tel', or 'url'
- * @param props.label Label text
- * @param props.placeholder Placeholder text (should match label)
- * @param props.value Current value
- * @param props.error Error state
- * @param props.disabled Disabled state
- * @param props.supportingText Supporting text or error message
- * @param props.leadingIcon Leading icon element
- * @param props.trailingIcon Trailing icon element
- * @param props.onChange Change handler
- * @param props.onBlur Blur handler
- * @param props.onFocus Focus handler
- * @param props.className Additional CSS class names
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {TextFieldProps} props TextFieldProps
+ * @param {string} [props.id] Input id attribute
+ * @param {string} [props.name] Input name attribute
+ * @param {('filled' | 'outlined')} [props.variant] Variant of the text field: 'filled' or 'outlined'
+ * @param {('text' | 'email' | 'number' | 'password' | 'tel' | 'url')} [props.type] Input type: 'text', 'email', 'number', 'password', 'tel', or 'url'
+ * @param {string} props.label Label text
+ * @param {string} [props.placeholder] Placeholder text (should match label)
+ * @param {(string | number)} [props.value] Current value
+ * @param {boolean} [props.error] Error state
+ * @param {boolean} [props.disabled] Disabled state
+ * @param {string} [props.supportingText] Supporting text or error message
+ * @param {React.ReactNode} [props.leadingIcon] Leading icon element
+ * @param {React.ReactNode} [props.trailingIcon] Trailing icon element
+ * @param {Function} [props.onChange] Change handler
+ * @param {Function} [props.onBlur] Blur handler
+ * @param {Function} [props.onFocus] Focus handler
+ * @param {string} [props.className] Additional CSS class names
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <TextField

package/lib/Toolbar.d.ts

@@ -22,24 +22,24 @@ export interface ToolbarProps {
 /**
  * Material Design 3 Toolbar component
  *
- * @param props ToolbarProps
- * @param props.id Element id
- * @param props.items Array of ToolbarItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].icon Icon element
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.items[].toggle Renders as toggle button if true
- * @param props.items[].checked Toggle button checked state
- * @param props.items[].primary Primary button styling if true
- * @param props.items[].fab Renders as floating action button if true on floating toolbars
- * @param props.variant Toolbar variant: 'docked' or 'floating'
- * @param props.color Toolbar color scheme: 'standard' or 'vibrant'
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {ToolbarProps} props ToolbarProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<ToolbarItemProps>} props.items Array of ToolbarItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} [props.items[].label] Label text
+ * @param {React.ReactNode} [props.items[].icon] Icon element
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {boolean} [props.items[].toggle] Renders as toggle button if true
+ * @param {boolean} [props.items[].checked] Toggle button checked state
+ * @param {boolean} [props.items[].primary] Primary button styling if true
+ * @param {boolean} [props.items[].fab] Renders as floating action button if true on floating toolbars
+ * @param {('docked' | 'floating')} [props.variant] Toolbar variant: 'docked' or 'floating'
+ * @param {('standard' | 'vibrant')} [props.color] Toolbar color scheme: 'standard' or 'vibrant'
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Toolbar

package/lib/Toolbar.js

@@ -7,24 +7,24 @@ const ToolbarItem = ({ key, id, label, icon, disabled = false, onClick, href, to
 /**
  * Material Design 3 Toolbar component
  *
- * @param props ToolbarProps
- * @param props.id Element id
- * @param props.items Array of ToolbarItem configurations
- * @param props.items[].key Unique key for the item
- * @param props.items[].id Element id for the item
- * @param props.items[].label Label text
- * @param props.items[].icon Icon element
- * @param props.items[].disabled Disabled state
- * @param props.items[].onClick Click handler
- * @param props.items[].href Link URL (renders as anchor tag)
- * @param props.items[].toggle Renders as toggle button if true
- * @param props.items[].checked Toggle button checked state
- * @param props.items[].primary Primary button styling if true
- * @param props.items[].fab Renders as floating action button if true on floating toolbars
- * @param props.variant Toolbar variant: 'docked' or 'floating'
- * @param props.color Toolbar color scheme: 'standard' or 'vibrant'
- * @param props.style Custom inline styles
- * @returns JSX.Element
+ * @param {ToolbarProps} props ToolbarProps
+ * @param {string} [props.id] Element id
+ * @param {Iterable<ToolbarItemProps>} props.items Array of ToolbarItem configurations
+ * @param {(string | number)} [props.items[].key] Unique key for the item
+ * @param {string} [props.items[].id] Element id for the item
+ * @param {string} [props.items[].label] Label text
+ * @param {React.ReactNode} [props.items[].icon] Icon element
+ * @param {boolean} [props.items[].disabled] Disabled state
+ * @param {Function} [props.items[].onClick] Click handler
+ * @param {string} [props.items[].href] Link URL (renders as anchor tag)
+ * @param {boolean} [props.items[].toggle] Renders as toggle button if true
+ * @param {boolean} [props.items[].checked] Toggle button checked state
+ * @param {boolean} [props.items[].primary] Primary button styling if true
+ * @param {boolean} [props.items[].fab] Renders as floating action button if true on floating toolbars
+ * @param {('docked' | 'floating')} [props.variant] Toolbar variant: 'docked' or 'floating'
+ * @param {('standard' | 'vibrant')} [props.color] Toolbar color scheme: 'standard' or 'vibrant'
+ * @param {React.CSSProperties} [props.style] Custom inline styles
+ * @returns {JSX.Element}
  *
  * @example
  * <Toolbar

package/lib/index.d.ts

@@ -8,4 +8,7 @@ export { Menu, type MenuProps, type MenuItemProps } from './Menu';
 export { Slider, type SliderProps, type SliderOption } from './Slider';
 export { Tabs, type TabsProps, type TabItemProps } from './Tabs';
 export { TextField, type TextFieldProps } from './TextField';
+export { Checkbox } from './Checkbox';
+export { Switch } from './Switch';
+export { Radio } from './Radio';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/lib/index.js

@@ -8,4 +8,7 @@ export { Menu } from './Menu';
 export { Slider } from './Slider';
 export { Tabs } from './Tabs';
 export { TextField } from './TextField';
+export { Checkbox } from './Checkbox';
+export { Switch } from './Switch';
+export { Radio } from './Radio';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAA0C,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAsC,MAAM,QAAQ,CAAC;AAClE,OAAO,EAAE,MAAM,EAAuC,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,IAAI,EAAqC,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAA0C,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAsC,MAAM,QAAQ,CAAC;AAClE,OAAO,EAAE,MAAM,EAAuC,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,IAAI,EAAqC,MAAM,QAAQ,CAAC;AACjE,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glassine-paper",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "CSS and some React components for Material Design 3",
   "type": "module",
   "main": "lib/index.js",
@@ -51,8 +51,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "dev:static": "npx http-server docs -o sample -a localhost -p 8000",
-    "dev": "vite",
-    "start": "npm-run-all --parallel watch:sample watch:compressed dev:static"
+    "dev": "vite --host localhost --port 4000",
+    "start": "npm run watch:sample & npm run watch:compressed & npm run dev:static & npx vite"
   },
   "author": "Michinobu Maeda",
   "license": "MIT",