glassine-paper 1.0.1 → 1.1.1

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   |
@@ -37,14 +37,11 @@ CSS and some React components for Material Design 3
 
 ## Usage
 
-```css
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
-@import './glassine-paper-variables.css';
-@import './theme.css';
-@import './glassine-paper.min.css';
-```
+Download [glassine-paper.min.css](https://github.com/MichinobuMaeda/glassine-paper/blob/main/glassine-paper.min.css)
 
-`glassine-paper-variables.css` with default values
+Get [theme.css](https://pages.michinobu.jp/glassine-paper/theme/)
+
+Create `glassine-paper-variables.css`
 
 ```css
 :root {
@@ -66,12 +63,21 @@ CSS and some React components for Material Design 3
 }
 ```
 
+Import CSS files
+
+```css
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
+@import './glassine-paper-variables.css';
+@import './theme.css';
+@import './glassine-paper.min.css';
+```
+
 ### Installation
 
 Install from GitHub repository:
 
 ```bash
-npm install github:MichinobuMaeda/glassine-paper
+npm i glassine-paper
 ```
 
 ### Import CSS

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