glassine-paper 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Michinobu Maeda
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# Glassine Paper
+
+CSS and some React components for Material Design 3
+
+- [API Documentation](docs/api.md)
+- [Sample](https://pages.michinobu.jp/glassine-paper/sample)
+- [Theme color generator](https://pages.michinobu.jp/glassine-paper/theme)
+
+## 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';
+```
+
+`glassine-paper-variables.css` with default values
+
+```css
+:root {
+  --color-scheme: light dark;
+
+  --root-font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --root-font-size: 16px;
+  --root-font-weight: 400;
+
+  --app-bar-z-index: 4;
+  --nav-bar-z-index: 6;
+  --nav-bar-height: calc(64px + env(safe-area-inset-bottom));
+  --nav-rail-z-index: 8;
+  --nav-rail-width: 240px;
+  --nav-drawer-z-index: 10;
+  --nav-drawer-width: 360px;
+
+  --menu-width: 256px;
+}
+```
+
+### Installation
+
+Install from GitHub repository:
+
+```bash
+npm install github:MichinobuMaeda/glassine-paper
+```
+
+### Import CSS
+
+```javascript
+import 'glassine-paper/css';
+```
+
+```css
+@import 'glassine-paper/css';
+```
+
+### Import React Components
+
+```javascript
+// Import all components
+import { Button, Slider, TextField } from 'glassine-paper';
+
+// Or import individual components
+import { Button } from 'glassine-paper/Button';
+import { Slider } from 'glassine-paper/Slider';
+import { TextField } from 'glassine-paper/TextField';
+```
+
+## Development
+
+```bash
+git clone https://github.com/MichinobuMaeda/glassine-paper.git
+cd glassine-paper
+npm install
+
+# Build all
+npm run build
+
+# Watch and compile SCSS changes
+npm run watch
+
+# Start development server (theme generator UI)
+npm start
+```

package/lib/AppBar.d.ts

@@ -0,0 +1,81 @@
+import React, { type ReactNode, type CSSProperties } from 'react';
+export interface AppBarItemProps {
+    key?: string | number;
+    id?: string;
+    type?: 'button' | 'appLogo' | 'title' | 'spacer';
+    icon?: ReactNode;
+    title?: string;
+    subtitle?: string;
+    active?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    href?: string;
+}
+export interface AppBarProps {
+    id?: string;
+    items: Iterable<AppBarItemProps>;
+    sticky?: boolean;
+    scrolled?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * 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
+ *
+ * @example
+ * import useDetectScroll, { Axis } from '@smakss/react-scroll-direction';
+ *
+ * const [scrolled, setScrolled] = useState(false);
+ * const { scrollPosition } = useDetectScroll({ axis: Axis.X });
+ *
+ * useEffect(() => {
+ *   setScrolled(scrollPosition.top > 0);
+ * }, [scrollPosition]);
+ *
+ * <AppBar
+ *   sticky
+ *   scrolled={scrolled}
+ *   items={[
+ *     {
+ *       icon: <svg>...</svg>,
+ *       onClick: () => {...},
+ *     },
+ *     {
+ *       type: "appLogo",
+ *       icon: <img src="./favicon.svg" alt="Glassine Paper" />,
+ *     },
+ *     {
+ *       type: "title",
+ *       title: "App name",
+ *       subtitle: "Description",
+ *     },
+ *     { type: "spacer" },
+ *     {
+ *       icon: <svg>...</svg>,
+ *       onClick: () => {...},
+ *     },
+ *   ]}
+ * />
+ */
+export declare const AppBar: React.FC<AppBarProps>;
+export default AppBar;
+//# sourceMappingURL=AppBar.d.ts.map

package/lib/AppBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../src/components/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAiDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/AppBar.js

@@ -0,0 +1,85 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, {} from 'react';
+const AppBarItem = ({ id, type = 'button', title, subtitle, icon, active = false, hidden = false, onClick, href, }) => {
+    const classes = [active ? 'active' : ''].join(' ');
+    if (hidden) {
+        return _jsx(_Fragment, {});
+    }
+    switch (title ? 'title' : type) {
+        case 'button':
+            return href ? (_jsx("a", { id: id, className: classes, href: href, children: icon })) : (_jsx("button", { id: id, className: classes, onClick: onClick, children: icon }));
+        case 'appLogo':
+            return icon;
+        case 'title':
+            return (_jsxs("div", { id: id, className: "title-area", children: [_jsx("div", { id: `${id}-title`, className: "title", children: title }), subtitle && (_jsx("div", { id: `${id}-subtitle`, className: "subtitle", children: subtitle }))] }));
+        case 'spacer':
+            return _jsx("div", { style: { flexGrow: 1 } });
+    }
+};
+/**
+ * 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
+ *
+ * @example
+ * import useDetectScroll, { Axis } from '@smakss/react-scroll-direction';
+ *
+ * const [scrolled, setScrolled] = useState(false);
+ * const { scrollPosition } = useDetectScroll({ axis: Axis.X });
+ *
+ * useEffect(() => {
+ *   setScrolled(scrollPosition.top > 0);
+ * }, [scrollPosition]);
+ *
+ * <AppBar
+ *   sticky
+ *   scrolled={scrolled}
+ *   items={[
+ *     {
+ *       icon: <svg>...</svg>,
+ *       onClick: () => {...},
+ *     },
+ *     {
+ *       type: "appLogo",
+ *       icon: <img src="./favicon.svg" alt="Glassine Paper" />,
+ *     },
+ *     {
+ *       type: "title",
+ *       title: "App name",
+ *       subtitle: "Description",
+ *     },
+ *     { type: "spacer" },
+ *     {
+ *       icon: <svg>...</svg>,
+ *       onClick: () => {...},
+ *     },
+ *   ]}
+ * />
+ */
+export const AppBar = ({ id, items, sticky = false, scrolled = false, style = {}, }) => {
+    const classes = [
+        'app-bar',
+        sticky ? 'sticky' : '',
+        scrolled ? 'on-scroll' : '',
+    ].join(' ');
+    return (_jsx("div", { id: id, className: classes, style: style, children: Array.from(items).map((item, index) => (_jsx(AppBarItem, { ...item }, item.key || index))) }));
+};
+export default AppBar;
+//# sourceMappingURL=AppBar.js.map

package/lib/AppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.js","sourceRoot":"","sources":["../src/components/AppBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsC,MAAM,OAAO,CAAC;AAwBlE,MAAM,UAAU,GAA8B,CAAC,EAC7C,EAAE,EACF,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,OAAO,EACP,IAAI,GACL,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEnD,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,mBAAK,CAAC;IACf,CAAC;IACD,QAAQ,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC/B,KAAK,QAAQ;YACX,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,YAAG,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,YACtC,IAAI,GACH,CACL,CAAC,CAAC,CAAC,CACF,iBAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YACjD,IAAI,GACE,CACV,CAAC;QACJ,KAAK,SAAS;YACZ,OAAO,IAAI,CAAC;QACd,KAAK,OAAO;YACV,OAAO,CACL,eAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,YAAY,aACjC,cAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,OAAO,YACtC,KAAK,GACF,EACL,QAAQ,IAAI,CACX,cAAK,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,UAAU,YAC5C,QAAQ,GACL,CACP,IACG,CACP,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAQ,CAAC;IAC/C,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,EAAE,EACF,KAAK,EACL,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,SAAS;QACT,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;QACtB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;KAC5B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACZ,OAAO,CACL,cAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,YAC1C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,UAAU,OAA6B,IAAI,IAA3B,IAAI,CAAC,GAAG,IAAI,KAAK,CAAc,CACjD,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/Button.d.ts

@@ -0,0 +1,89 @@
+import React, { type ReactNode, type CSSProperties } from 'react';
+/**
+ * Button component props
+ */
+export interface ButtonProps {
+    id?: string;
+    name?: string;
+    variant?: 'filled' | 'tonal' | 'danger' | 'error' | 'outlined' | 'elevated' | 'text';
+    size?: 'xs' | 'sm' | 'md';
+    radius?: 'default' | 'square';
+    label?: string;
+    icon?: ReactNode;
+    width?: 'narrow' | 'default' | 'wide';
+    type?: 'button' | 'submit' | 'reset' | 'toggle' | 'select';
+    href?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLInputElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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
+ *
+ * @example
+ * // Regular button
+ * <Button variant="filled" size="sm">
+ *   Click me
+ * </Button>
+ *
+ * @example
+ * // Button with leading icon and text
+ * <Button
+ *   variant="tonal"
+ *   size="md"
+ *   radius="square"
+ *   icon={<svg>...</svg>}
+ *   label="Label"
+ * />
+ *
+ * @example
+ * // Icon button
+ * <Button
+ *   variant="outlined"
+ *   icon
+ *   width="wide"
+ *   icon={<svg>...</svg>}
+ *  />
+ *
+ * @example
+ * // Link button
+ * <Button
+ *   variant="elevated"
+ *   href="https://example.com"
+ *   label="Go to Example"
+ * />
+ *
+ * @example
+ * // Toggle button (checkbox)
+ * <Button
+ *   variant="filled"
+ *   type="toggle"
+ *   checked={isToggled}
+ *   icon={<svg>...</svg>}
+ *   label="Toggle"
+ * />
+ *
+ */
+export declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/lib/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EACJ,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwExC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/Button.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
+ *
+ * @example
+ * // Regular button
+ * <Button variant="filled" size="sm">
+ *   Click me
+ * </Button>
+ *
+ * @example
+ * // Button with leading icon and text
+ * <Button
+ *   variant="tonal"
+ *   size="md"
+ *   radius="square"
+ *   icon={<svg>...</svg>}
+ *   label="Label"
+ * />
+ *
+ * @example
+ * // Icon button
+ * <Button
+ *   variant="outlined"
+ *   icon
+ *   width="wide"
+ *   icon={<svg>...</svg>}
+ *  />
+ *
+ * @example
+ * // Link button
+ * <Button
+ *   variant="elevated"
+ *   href="https://example.com"
+ *   label="Go to Example"
+ * />
+ *
+ * @example
+ * // Toggle button (checkbox)
+ * <Button
+ *   variant="filled"
+ *   type="toggle"
+ *   checked={isToggled}
+ *   icon={<svg>...</svg>}
+ *   label="Toggle"
+ * />
+ *
+ */
+export const Button = ({ id, name, variant = 'filled', size = 'md', label, icon, width = 'default', radius = 'default', type = 'button', href, checked = false, disabled = false, onClick, className = '', style = {}, }) => {
+    const classes = [
+        'button',
+        label ? '' : 'icon',
+        variant,
+        size,
+        icon && width !== 'default' ? width : '',
+        icon && radius !== 'default' ? radius : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return type === 'toggle' ? (_jsxs("label", { id: `${id}-label`, className: classes, style: style, children: [_jsx("input", { id: id, name: name, type: "checkbox", checked: checked, onClick: (event) => (onClick ? onClick(event) : undefined) }), icon, label] })) : type === 'select' ? (_jsxs("label", { id: `${id}-label`, className: classes, style: style, children: [_jsx("input", { id: id, name: name, type: "radio", checked: checked, onClick: (event) => (onClick ? onClick(event) : undefined) }), icon, label] })) : href ? (_jsxs("a", { id: id, href: href, className: classes, style: style, children: [icon, label] })) : (_jsxs("button", { id: id, name: name, type: type, className: classes, disabled: disabled, onClick: onClick, style: style, children: [icon, label] }));
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsC,MAAM,OAAO,CAAC;AA8BlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,EAAE,EACF,IAAI,EACJ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,SAAS,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,GACX,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,QAAQ;QACR,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;QACnB,OAAO;QACP,IAAI;QACJ,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACxC,IAAI,IAAI,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QAC1C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,iBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aACxD,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,UAAU,EACf,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,EACD,IAAI,EACJ,KAAK,IACA,CACT,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACtB,iBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aACxD,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,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,EACD,IAAI,EACJ,KAAK,IACA,CACT,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,aAAG,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aACpD,IAAI,EACJ,KAAK,IACJ,CACL,CAAC,CAAC,CAAC,CACF,kBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,aAEX,IAAI,EACJ,KAAK,IACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/Menu.d.ts

@@ -0,0 +1,59 @@
+import React, { type ReactNode, type CSSProperties } from 'react';
+export interface MenuItemProps {
+    key?: string | number;
+    id?: string;
+    label?: string;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    divider?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    href?: string;
+}
+export interface MenuProps {
+    id?: string;
+    items: Iterable<MenuItemProps>;
+    style?: CSSProperties;
+}
+/**
+ * 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
+ *
+ * @example
+ * <Menu
+ *   id="example-menu"
+ *   items={[
+ *     {
+ *       leadingIcon: {<svg>...</svg>},
+ *       label: "Item 1",
+ *       trailingIcon: {<svg>...</svg>},
+ *       active: true,
+ *       onClick: () => {},
+ *     },
+ *     { divider: true },
+ *     {
+ *       label: "Item 2",
+ *       href: "...",
+ *     },
+ *   ]}
+ * />
+ */
+export declare const Menu: React.FC<MenuProps>;
+export default Menu;
+//# sourceMappingURL=Menu.d.ts.map

package/lib/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAQpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/Menu.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, {} from 'react';
+const MenuItem = ({ key, id, label, leadingIcon, trailingIcon, divider = false, active = false, disabled = false, onClick, href, }) => {
+    const classes = [active ? 'active' : '', disabled ? 'disabled' : ''].join(' ');
+    return divider ? (_jsx("hr", {})) : href ? (_jsxs("a", { id: id, className: classes, href: href, children: [leadingIcon, label, trailingIcon] }, key)) : (_jsxs("button", { id: id, className: classes, onClick: onClick, children: [leadingIcon, label, trailingIcon] }, key));
+};
+/**
+ * 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
+ *
+ * @example
+ * <Menu
+ *   id="example-menu"
+ *   items={[
+ *     {
+ *       leadingIcon: {<svg>...</svg>},
+ *       label: "Item 1",
+ *       trailingIcon: {<svg>...</svg>},
+ *       active: true,
+ *       onClick: () => {},
+ *     },
+ *     { divider: true },
+ *     {
+ *       label: "Item 2",
+ *       href: "...",
+ *     },
+ *   ]}
+ * />
+ */
+export const Menu = ({ id, items = [], style }) => {
+    return (_jsx("div", { id: id, className: "menu", style: style, children: Array.from(items).map((item, index) => (_jsx(MenuItem, { ...item }, item.key || index))) }));
+};
+export default Menu;
+//# sourceMappingURL=Menu.js.map

package/lib/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../src/components/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsC,MAAM,OAAO,CAAC;AAqBlE,MAAM,QAAQ,GAA4B,CAAC,EACzC,GAAG,EACH,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,IAAI,GACL,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CACvE,GAAG,CACJ,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,cAAM,CACP,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,aAAa,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,aAChD,WAAW,EACX,KAAK,EACL,YAAY,KAHP,GAAG,CAIP,CACL,CAAC,CAAC,CAAC,CACF,kBAAkB,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,aAC3D,WAAW,EACX,KAAK,EACL,YAAY,KAHF,GAAG,CAIP,CACV,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,OAAO,CACL,cAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,YACvC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,QAAQ,OAA6B,IAAI,IAA3B,IAAI,CAAC,GAAG,IAAI,KAAK,CAAc,CAC/C,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/NavDrawer.d.ts

@@ -0,0 +1,63 @@
+import React, { type ReactNode, type CSSProperties } from 'react';
+export interface NavDrawerItemProps {
+    key?: string | number;
+    id?: string;
+    label?: string;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    divider?: boolean;
+    active?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    href?: string;
+}
+export interface NavDrawerProps {
+    id?: string;
+    items: Iterable<NavDrawerItemProps>;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 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
+ *
+ * @example
+ * <NavDrawer
+ *   id="example-nav-drawer"
+ *   items={[
+ *     {
+ *       leadingIcon: {<svg>...</svg>},
+ *       label: "Item 1",
+ *       trailingIcon: {<svg>...</svg>},
+ *       active: true,
+ *       onClick: () => {},
+ *     },
+ *     { divider: true },
+ *     {
+ *       label: "Item 2",
+ *       href: "...",
+ *     },
+ *   ]}
+ * />
+ */
+export declare const NavDrawer: React.FC<NavDrawerProps>;
+export default NavDrawer;
+//# sourceMappingURL=NavDrawer.d.ts.map

package/lib/NavDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDrawer.d.ts","sourceRoot":"","sources":["../src/components/NavDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,kBAAkB;IACjC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAa9C,CAAC;AAEF,eAAe,SAAS,CAAC"}