glassine-paper 1.0.1 → 1.1.1

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