lucentia-ui 0.2.18 → 0.2.20

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

@@ -4,6 +4,7 @@
   font-family: var(--font);
   font-weight: var(--font-weight-medium);
   border: 2px solid transparent;
+  border-radius: var(--radius-sm);
   cursor: pointer;
 
   
@@ -125,14 +126,12 @@
   padding: var(--space-xs) var(--space-lg);
   font-size: var(--font-size-14);
   box-shadow: var(--shadow-sm);
-  border-radius: var(--radius-sm);
 }
 
 .md {
   padding: var(--space-sm) var(--space-2xl);
   font-size: var(--font-size-16);
   box-shadow: var(--shadow-md);
-  border-radius: var(--radius-sm);
 }
 
 

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const State: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
+export declare const Width: Story;

package/dist/components/Button/Button.stories.js

@@ -54,3 +54,11 @@ export const Sizes = {
             gap: 32,
         }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" })] })),
 };
+export const Width = {
+    render: () => (_jsx("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: _jsx(Button, { size: "md", fullWidth: true, children: "Full Width" }) })),
+};

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

@@ -28,6 +28,8 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: 24px 24px;
+  outline: 2px solid var(--color-background); /* 背景と同じ色 */
+  outline-offset: -1px;
   transition: background-color 0.2s ease;
 }
 

package/dist/components/IconButton/IconButton.js

@@ -3,7 +3,7 @@ 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;
+    const { icon, children, variant = "ghost", size = "md", fullWidth = false, className, ...rest } = props;
     // a11y guard (dev only)
     if (process.env.NODE_ENV !== "production" &&
         !children &&
@@ -13,6 +13,7 @@ export const IconButton = React.forwardRef((props, ref) => {
     return (_jsxs("button", { ref: ref, className: clsx(styles.iconButton, styles[variant], styles[size], {
             [styles.iconOnly]: !children,
             [styles.withText]: !!children,
+            [styles.fullWidth]: !!fullWidth,
         }, 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

@@ -23,11 +23,27 @@
 
 /* ===== Variant ===== */
 .ghost {
-  background: var(--color-surface);
+  background: var(--color-surface-container);
   color: var(--color-on-surface);
 }
-.ghost:hover:not(:disabled) {
-  background: var(--color-surface-container);
+
+.sm.ghost:hover:not(:disabled) {
+  border: 2px solid var(--color-border);
+  box-shadow:
+    0 0 2px var(--color-border),
+    0 0 4px var(--color-border);
+}
+
+.md.ghost:hover:not(:disabled) {
+  border: 2px solid var(--color-border);
+  box-shadow:
+    0 0 4px var(--color-border),
+    0 0 8px var(--color-border);
+}
+
+.sm.ghost:active:not(:disabled),
+.md.ghost:active:not(:disabled) {
+  box-shadow: none;
 }
 
 
@@ -50,13 +66,12 @@
     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);
+.sm.primary:active:not(:disabled),
+.md.primary:active:not(:disabled) {
+  box-shadow: none;
 }
 
+
 .secondary {
   background: var(--color-secondary-container);
   color: var(--color-on-secondary-container);
@@ -76,6 +91,14 @@
     0 0 8px var(--color-secondary);
 }
 
+.sm.secondary:active:not(:disabled),
+.md.secondary:active:not(:disabled) {
+  box-shadow: none;
+}
+
+.md.danger:active:not(:disabled) {
+  box-shadow: none;
+}
 
 .danger {
   background: var(--color-error-container);
@@ -96,11 +119,14 @@
     0 0 8px var(--color-error);
 }
 
+.sm.danger:active:not(:disabled),
 .md.danger:active:not(:disabled) {
   box-shadow: none;
 }
 
 
+
+
 /* ===== Size ===== */
 
 .sm {
@@ -136,6 +162,14 @@
 
 
 
+
+/* ===== full width ===== */
+.fullWidth {
+  width: 100%;
+}
+
+
+
 /* ===== State ===== */
 
 .sm.iconButton:active:not(:disabled),

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

@@ -8,6 +8,8 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     /** Inherit from Button */
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /** Full width button */
+    fullWidth?: boolean;
     /** icon-only の場合に必須 */
     "aria-label"?: string;
 }

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

@@ -3,6 +3,8 @@
   display: inline-block;
   width: 64px;
   height: 36px;
+  outline: 2px solid var(--color-background); /* 背景と同じ色 */
+  outline-offset: -1px;
 }
 
 /* input は見えなくするが状態は保持 */
@@ -40,6 +42,8 @@
 /* ===== Checked ===== */
 .switch input:checked + .slider {
   background: var(--color-primary);
+  outline: 2px solid var(--color-background); /* 背景と同じ色 */
+  outline-offset: -1px;
 }
 
 .switch input:checked + .slider::before {

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -4,5 +4,5 @@ type Props = {
     persist?: boolean;
     children: React.ReactNode;
 };
-export declare function ThemeProvider({ defaultTheme, persist, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ defaultTheme, persist, children, }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -3,17 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState, useCallback } from "react";
 import { ThemeContext } from "./context";
 export function ThemeProvider({ defaultTheme = "light", persist = false, children, }) {
-    const [theme, setTheme] = useState(defaultTheme);
+    const [theme, setTheme] = useState(persist ? null : defaultTheme);
     // 初期化
     useEffect(() => {
         if (!persist)
             return;
         const stored = localStorage.getItem("theme");
-        if (stored)
-            setTheme(stored);
-    }, [persist]);
+        setTheme(stored !== null && stored !== void 0 ? stored : defaultTheme);
+    }, [persist, defaultTheme]);
     // html[data-theme] 反映 + 永続化
     useEffect(() => {
+        if (!theme)
+            return;
         document.documentElement.dataset.theme = theme;
         if (persist) {
             localStorage.setItem("theme", theme);
@@ -22,5 +23,8 @@ export function ThemeProvider({ defaultTheme = "light", persist = false, childre
     const toggleTheme = useCallback(() => {
         setTheme((prev) => (prev === "dark" ? "light" : "dark"));
     }, []);
+    // ★ theme が確定するまで描画しない
+    if (!theme)
+        return null;
     return (_jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "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",