lucentia-ui 0.2.7 → 0.2.9

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

@@ -1,2 +1,2 @@
 import { ButtonProps } from "./types";
-export declare const Button: ({ variant, size, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, size, fullWidth, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from "./Button.module.css";
 import clsx from "clsx";
-export const Button = ({ variant = "ghost", size = "md", className, ...props }) => {
-    return (_jsx("button", { className: clsx(styles.button, styles[variant], styles[size], className), ...props }));
+export const Button = ({ variant = "ghost", size = "md", fullWidth = false, className, ...props }) => {
+    return (_jsx("button", { className: clsx(styles.button, styles[variant], styles[size], fullWidth && styles.fullWidth, className), ...props }));
 };

package/dist/components/Button/Button.module.css

@@ -109,6 +109,12 @@
   box-shadow: var(--shadow-md);
 }
 
+
+/* ===== full width ===== */
+.fullWidth {
+  width: 100%;
+}
+
 /* ===== State ===== */
 
 .sm.button:active:not(:disabled),

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

@@ -1,4 +1,8 @@
+import type React from "react";
+export type ButtonVariant = "ghost" | "primary" | "secondary" | "danger";
+export type ButtonSize = "sm" | "md";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "ghost" | "primary" | "secondary" | "danger";
-    size?: "sm" | "md";
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
 }

package/dist/components/Checkbox/Checkbox.module.css

@@ -19,21 +19,21 @@
 }
 
 .control {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: var(--radius-sm);
   background: var(--color-surface-container);
   box-shadow: var(--shadow-md-in);
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
-  background-size: 32px 32px;
+  background-size: 24px 24px;
   transition: background-color 0.2s ease;
 }
 
 /* checked */
 .input:checked + .control {
-  background-color: var(--color-primary);
+  background: var(--color-primary);
   background-image: var(--icon-check);
 }
 /* focus */

package/dist/components/Extra/Clock/Clock.d.ts

@@ -0,0 +1 @@
+export declare function Clock(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Extra/Clock/Clock.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styles from "./Clock.module.css";
+export function Clock() {
+    const [time, setTime] = useState(null);
+    useEffect(() => {
+        const update = () => setTime(new Date());
+        update(); // 初回
+        const timer = setInterval(update, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    if (!time) {
+        return _jsx("div", { className: styles.clock });
+    }
+    const seconds = time.getSeconds();
+    const minutes = time.getMinutes();
+    const hours = time.getHours() % 12;
+    const secondDeg = seconds * 6;
+    const minuteDeg = minutes * 6 + seconds * 0.1;
+    const hourDeg = hours * 30 + minutes * 0.5;
+    return (_jsxs("div", { className: styles.clock, children: [_jsx("div", { className: styles.dial, children: Array.from({ length: 60 }).map((_, i) => (_jsx("span", { className: [
+                        styles.tick,
+                        i % 5 === 0 ? styles.major : styles.minor,
+                        i % 15 === 0 ? styles.quarter : "",
+                    ].join(" "), style: { transform: `rotate(${i * 6}deg)` } }, i))) }), _jsx("div", { className: `${styles.hand} ${styles.hour}`, style: { transform: `rotate(${hourDeg}deg)` } }), _jsx("div", { className: `${styles.hand} ${styles.minute}`, style: { transform: `rotate(${minuteDeg}deg)` } }), _jsx("div", { className: `${styles.hand} ${styles.second}`, style: { transform: `rotate(${secondDeg}deg)` } }), _jsx("div", { className: styles.center })] }));
+}

package/dist/components/Extra/Clock/Clock.module.css

@@ -0,0 +1,88 @@
+.clock {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background: var(--color-background);
+  border: 2px solid var(--color-surface);
+  box-sizing: border-box;
+  box-shadow: var(--shadow-md),var(--shadow-md-in);
+}
+
+/* 共通の針 */
+.hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  transform-origin: bottom center;
+  transform: translateX(-50%);
+  box-shadow: 0px 0px 4px  var(--color-shadow-d);
+  border-radius: 2px;
+}
+
+/* 時針 */
+.hour {
+  width: 5px;
+  height: 64px;
+  background: var(--color-secondary);
+}
+
+/* 分針 */
+.minute {
+  width: 5px;
+  height: 104px;
+  background: var(--color-secondary);
+}
+
+/* 秒針 */
+.second {
+  width: 2px;
+  height: 100px;
+  background: var(--color-error);
+}
+
+/* 中心の丸 */
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background: var(--color-background);
+  box-shadow: var(--shadow-sm);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+
+
+/* ===== 文字盤 ===== */
+
+.dial {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+/* 共通目盛り */
+.tick {
+  position: absolute;
+  left: 50%;
+  top: 8px;
+  transform-origin: center 112px;
+  background: var(--color-on-surface-variant);
+}
+
+/* 5分ごとの目盛 */
+.major {
+  width: 2.5px;
+  height: 14px;
+}
+
+/* 12・3・6・9 */
+.quarter {
+  height: 21px;
+  width: 3px;
+  background: var(--color-on-surface-variant);
+}

package/dist/components/Extra/Clock/Clock.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Clock } from "./Clock";
+declare const meta: Meta<typeof Clock>;
+export default meta;
+type Story = StoryObj<typeof Clock>;
+export declare const Default: Story;

package/dist/components/Extra/Clock/Clock.stories.js

@@ -0,0 +1,7 @@
+import { Clock } from "./Clock";
+const meta = {
+    title: "Components/Extra/Clock",
+    component: Clock,
+};
+export default meta;
+export const Default = {};

package/dist/components/Extra/Clock/index.d.ts

@@ -0,0 +1 @@
+export * from "./Clock";

package/dist/components/Extra/Clock/index.js

@@ -0,0 +1 @@
+export * from "./Clock";

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ThemeSwitchProps } from "./types";
+export declare const ThemeSwitch: React.FC<ThemeSwitchProps>;

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./ThemeSwitch.module.css";
+import clsx from "clsx";
+export const ThemeSwitch = ({ checked, defaultChecked, onChange, onCheckedChange, disabled = false, id, name, className, }) => {
+    const handleChange = (e) => {
+        if (disabled)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(e.target.checked);
+    };
+    return (_jsxs("label", { className: clsx(styles.themeSwitch, className), style: {
+            opacity: disabled ? 0.6 : 1,
+            cursor: disabled ? "not-allowed" : "pointer",
+        }, children: [_jsx("input", { type: "checkbox", id: id, name: name, 
+                // CSS Modules側のクラス名と一致させる（styles.input もしくは styles.themeSwitchCheckbox）
+                className: styles.themeSwitchCheckbox, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange }), _jsx("span", { className: styles.slider, children: _jsxs("span", { className: styles.circle, children: [[...Array(8)].map((_, i) => (_jsx("span", { className: clsx(styles.shine, styles[`shine-${i + 1}`]) }, i))), _jsx("span", { className: styles.moon })] }) })] }));
+};

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.module.css

@@ -0,0 +1,99 @@
+.themeSwitch {
+  font-size: 18px;
+  position: relative;
+  display: inline-block;
+  width: 72px;
+  height: 40px;
+}
+
+/* input単体にスタイルを当てる */
+.input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm-in);
+  transition: 0.4s;
+  border-radius: 30px;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  height: 1.1em;
+  width: 1.1em;
+  border-radius: 20px;
+  left: 0.6em;
+  bottom: 0.45em;
+  background-color: var(--color-primary);
+  transition: 0.4s;
+}
+
+/* ThemeSwitch.module.css */
+
+/* inputのクラス名をTSXと合わせる */
+.themeSwitchCheckbox {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+/* チェック時の隣接セレクタを調整 */
+.themeSwitchCheckbox:checked + .slider .circle {
+  transform: rotate(0deg) translateX(1.5em) !important;
+}
+
+.themeSwitchCheckbox:checked + .slider .circle .shine {
+  transform: translate(0%, 0%) !important;
+}
+
+.themeSwitchCheckbox:checked + .slider .circle .moon {
+  left: -10%;
+  opacity: 1;
+  transform: translateY(-60%);
+}
+
+.moon {
+  position: absolute;
+  left: -100%;
+  top: 50%;
+  opacity: 0;
+  background: var(--color-background);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 99999px;
+  transform: translateY(-50%);
+  transition: all 0.4s;
+}
+
+.shine {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.25rem;
+  height: 0.25rem;
+  background-color: var(--color-primary);
+  border-radius: 4rem;
+  transition: all 0.4s;
+}
+
+/* 個別のshine配置 */
+.shine-1 { transform: translate(-50%, -375%); }
+.shine-2 { transform: translate(175%, -275%); }
+.shine-3 { transform: translate(275%, -50%); }
+.shine-4 { transform: translate(175%, 175%); }
+.shine-5 { transform: translate(-50%, 275%); }
+.shine-6 { transform: translate(-275%, 175%); }
+.shine-7 { transform: translate(-375%, -50%); }
+.shine-8 { transform: translate(-275%, -275%); }

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeSwitch } from "./ThemeSwitch";
+declare const meta: Meta<typeof ThemeSwitch>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitch>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemeSwitch } from "./ThemeSwitch";
+const meta = {
+    title: "Components/Extra/ThemeSwitch",
+    component: ThemeSwitch,
+};
+export default meta;
+export const Default = {};
+export const State = {
+    render: () => {
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [_jsx(ThemeSwitch, { defaultChecked: false }), _jsx(ThemeSwitch, { defaultChecked: true })] }));
+    },
+};

package/dist/components/Extra/ThemeSwitch/types.d.ts

@@ -0,0 +1,13 @@
+import type { ChangeEvent } from "react";
+export type ThemeSwitchProps = {
+    /** controlled */
+    checked?: boolean;
+    /** uncontrolled */
+    defaultChecked?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+};

package/dist/components/Extra/ThemeSwitch/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { IconButtonProps } from "./types";
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import clsx from "clsx";
+import styles from "./IconButton.module.css";
+export const IconButton = React.forwardRef((props, ref) => {
+    const { icon, children, variant = "ghost", size = "md", className, ...rest } = props;
+    // a11y guard (dev only)
+    if (process.env.NODE_ENV !== "production" &&
+        !children &&
+        !rest["aria-label"]) {
+        console.warn("IconButton: icon-only usage requires `aria-label`.");
+    }
+    return (_jsxs("button", { ref: ref, className: clsx(styles.iconButton, styles[variant], styles[size], {
+            [styles.iconOnly]: !children,
+            [styles.withText]: !!children,
+        }, className), ...rest, children: [_jsx("span", { className: styles.icon, children: icon }), children && _jsx("span", { className: styles.text, children: children })] }));
+});
+IconButton.displayName = "IconButton";

package/dist/components/IconButton/IconButton.module.css

@@ -0,0 +1,154 @@
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+  height: fit-content;
+  font-family: var(--font);
+  font-weight: var(--font-weight-medium);
+  border: 2px solid transparent;
+  cursor: pointer;
+
+  border-radius: var(--radius-sm);
+
+  transition:
+    box-shadow 0.2s ease,
+    opacity 0.2s ease,
+    background 0.25s ease-in-out,
+    color 0.25s ease;
+}
+
+
+
+/* ===== Variant ===== */
+.ghost {
+  background: var(--color-surface);
+  color: var(--color-on-surface);
+}
+.ghost:hover:not(:disabled) {
+  background: var(--color-surface-container);
+}
+
+
+.primary {
+  background: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}
+
+.sm.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 2px var(--color-primary),
+    0 0 4px var(--color-primary);
+}
+
+.md.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 4px var(--color-primary),
+    0 0 8px var(--color-primary);
+}
+
+.md.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 4px var(--color-primary),
+    0 0 8px var(--color-primary);
+}
+
+.secondary {
+  background: var(--color-secondary-container);
+  color: var(--color-on-secondary-container);
+}
+
+.sm.secondary:hover:not(:disabled) {
+  border: 2px solid var(--color-secondary);
+  box-shadow:
+    0 0 2px var(--color-secondary),
+    0 0 4px var(--color-secondary);
+}
+
+.md.secondary:hover:not(:disabled) {
+  border: 2px solid var(--color-secondary);
+  box-shadow:
+    0 0 4px var(--color-secondary),
+    0 0 8px var(--color-secondary);
+}
+
+
+.danger {
+  background: var(--color-error-container);
+  color: var(--color-on-error-container);
+}
+
+.sm.danger:hover:not(:disabled) {
+  border: 2px solid var(--color-error);
+  box-shadow:
+    0 0 2px var(--color-error),
+    0 0 4px var(--color-error);
+}
+
+.md.danger:hover:not(:disabled) {
+  border: 2px solid var(--color-error);
+  box-shadow:
+    0 0 4px var(--color-error),
+    0 0 8px var(--color-error);
+}
+
+.md.danger:active:not(:disabled) {
+  box-shadow: none;
+}
+
+
+/* ===== Size ===== */
+
+.sm {
+  padding: var(--space-xs) var(--space-lg);
+  font-size: var(--font-size-14);
+  box-shadow: var(--shadow-sm);
+}
+
+.md {
+  padding: var(--space-sm) var(--space-2xl);
+  font-size: var(--font-size-16);
+  box-shadow: var(--shadow-md);
+}
+
+/* icon-only */
+.sm.iconOnly {
+  padding: var(--space-xs) var(--space-md);
+}
+
+.md.iconOnly {
+  padding: var(--space-sm) var(--space-md);
+}
+
+
+
+.icon {
+  display: inline-flex;
+}
+
+.text {
+  white-space: nowrap;
+}
+
+
+
+/* ===== State ===== */
+
+.sm.iconButton:active:not(:disabled),
+.md.iconButton:active:not(:disabled),
+.iconButton[data-state="pressed"] {
+  box-shadow: none;
+}
+
+.iconButton:focus-visible {
+  outline: none;
+}
+
+.iconButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "./IconButton";
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Default: Story;
+export declare const State: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;

package/dist/components/IconButton/IconButton.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from "./IconButton";
+// Storybook only
+import { HomeIcon } from "../../icons/Home";
+const meta = {
+    title: "Components/IconButton",
+    component: IconButton,
+    args: {
+        children: "IconButton",
+        variant: "ghost",
+        size: "md",
+    },
+    argTypes: {
+        variant: {
+            control: "radio",
+            options: ["ghost", "primary", "secondary", "danger"],
+            description: "Buttonの表示バリエーション",
+        },
+        size: {
+            control: "radio",
+            options: ["sm", "md"],
+            description: "Buttonのサイズ",
+        },
+        disabled: {
+            control: "boolean",
+            description: "無効状態",
+        },
+        onClick: {
+            action: "clicked",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost" }),
+};
+export const State = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", children: "Default" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", style: { background: "var(--color-surface-container)" }, "data-state": "pressed", children: "Pressed" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", disabled: true, children: "Disabled" })] })),
+};
+export const Variants = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", children: "Ghost" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "primary", children: "Primary" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "secondary", children: "Secondary" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "danger", children: "Danger" })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(IconButton, { icon: _jsx(HomeIcon, { size: 20 }), size: "sm", children: "Small" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), size: "md", children: "Medium" })] })),
+};

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

@@ -0,0 +1,2 @@
+export * from "./IconButton";
+export * from "./types";

package/dist/components/IconButton/index.js

@@ -0,0 +1,2 @@
+export * from "./IconButton";
+export * from "./types";

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

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { ButtonVariant, ButtonSize } from "../Button/types";
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Icon element (required) */
+    icon: React.ReactNode;
+    /** Optional text */
+    children?: React.ReactNode;
+    /** Inherit from Button */
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** icon-only の場合に必須 */
+    "aria-label"?: string;
+}

package/dist/components/IconButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Radio/Radio.module.css

@@ -15,8 +15,8 @@
 }
 
 .control {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   background: var(--color-surface);
   box-shadow: var(--shadow-md-in);

package/dist/components/Switch/Switch.module.css

@@ -1,8 +1,8 @@
 .switch {
   position: relative;
   display: inline-block;
-  width: 72px;
-  height: 40px;
+  width: 64px;
+  height: 36px;
 }
 
 /* input は見えなくするが状態は保持 */
@@ -27,8 +27,8 @@
 .slider::before {
   content: "";
   position: absolute;
-  height: 24px;
-  width: 24px;
+  height: 20px;
+  width: 20px;
   left: 8px;
   top: 8px;
   background: var(--color-on-primary);
@@ -43,7 +43,7 @@
 }
 
 .switch input:checked + .slider::before {
-  transform: translateX(32px);
+  transform: translateX(28px);
 }
 
 /* ===== Focus ===== */

package/dist/icons/Home.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+export declare const HomeIcon: React.FC<IconProps>;
+export default HomeIcon;

package/dist/icons/Home.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HomeIcon = ({ size = 24, color = "currentColor", className = "", }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M13.5 14H10.5C9.94772 14 9.5 14.4477 9.5 15V20.5C9.5 21.0523 9.05228 21.5 8.5 21.5H4C3.44772 21.5 3 21.0523 3 20.5V10.931C3 10.6559 3.11335 10.3929 3.31338 10.204L11.3134 2.64848C11.6988 2.28449 12.3012 2.28449 12.6866 2.64848L20.6866 10.204C20.8866 10.3929 21 10.6559 21 10.931V20.5C21 21.0523 20.5523 21.5 20 21.5H15.5C14.9477 21.5 14.5 21.0523 14.5 20.5V15C14.5 14.4477 14.0523 14 13.5 14Z", fill: "currentColor" }) }));
+};
+export default HomeIcon;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/Checkbox";
 export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
+export * from "./components/IconButton";
 export * from "./components/Textarea";
 export * from "./components/Typography";
 export * from "./components/Select";

package/dist/index.js

@@ -6,6 +6,7 @@ export * from "./components/Checkbox";
 export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
+export * from "./components/IconButton";
 export * from "./components/Textarea";
 export * from "./components/Typography";
 export * from "./components/Select";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "React UI design token and component system based on neumorphism, featuring two color themes: light and dark.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",