lucentia-ui 0.2.14 → 0.2.16

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

@@ -6,7 +6,7 @@
   border: 2px solid transparent;
   cursor: pointer;
 
-  border-radius: var(--radius-sm);
+  
 
   transition:
     box-shadow 0.2s ease,
@@ -17,11 +17,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-primary),
+    0 0 4px var(--color-primary);
+}
+
+.md.ghost:hover:not(:disabled) {
+  border: 2px solid var(--color-border);
+  box-shadow:
+    0 0 4px var(--color-shadow-d),
+    0 0 8px var(--color-shadow-d);
+}
+
+.sm.ghost:active:not(:disabled),
+.md.ghost:active:not(:disabled) {
+  box-shadow: none;
 }
 
 
@@ -44,13 +60,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);
@@ -70,6 +85,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);
@@ -90,6 +113,7 @@
     0 0 8px var(--color-error);
 }
 
+.sm.danger:active:not(:disabled),
 .md.danger:active:not(:disabled) {
   box-shadow: none;
 }
@@ -101,12 +125,14 @@
   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);
 }
 
 
@@ -117,12 +143,6 @@
 
 /* ===== State ===== */
 
-.sm.button:active:not(:disabled),
-.md.button:active:not(:disabled),
-.button[data-state="pressed"] {
-  box-shadow: none;
-}
-
 .button:focus-visible {
   outline: none;
 }

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

@@ -36,7 +36,7 @@ export const State = {
             flexDirection: "column",
             alignItems: "flex-start",
             gap: 32,
-        }, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", style: { background: "var(--color-surface-container)" }, "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
+        }, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", style: { boxShadow: "none" }, "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
 };
 export const Variants = {
     render: () => (_jsxs("div", { style: {

package/dist/components/Feedback/Modal/Modal.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
@@ -7,7 +8,6 @@ export const Modal = ({ open, onClose, children, className, }) => {
     useEffect(() => {
         setMounted(true);
     }, []);
-    // 🔒 背景スクロールロック
     useEffect(() => {
         if (!open)
             return;

package/dist/components/Menu/Menu.module.css

@@ -0,0 +1,54 @@
+.list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sm);
+    margin: 0;
+    list-style: none;
+    padding: var(--space-lg) 0;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+
+.menuLink{
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    width: 100%;
+    height: 100%;
+
+    font-family: var(--font);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+    color: var(--color-on-surface);
+
+    padding: var(--space-md) var(--space-lg);
+
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+}
+
+
+
+.menuLink:hover{
+    background: var(--color-surface-container);
+}
+
+.menuLink:active{
+    box-shadow: var(--shadow-sm-in);
+}
+
+.menuLink.active {
+    color: var(--color-on-primary-container);
+    background: var(--color-primary-container);
+    box-shadow: var(--shadow-sm-in);
+}
+
+.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}

package/dist/components/Menu/MenuItem.d.ts

@@ -0,0 +1,2 @@
+import type { MenuItemProps } from "./types";
+export declare const MenuItem: ({ children, disabled, className, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Menu.module.css";
+import clsx from "clsx";
+export const MenuItem = ({ children, disabled = false, className, }) => {
+    return (_jsx("li", { className: clsx(styles.item, disabled && styles.disabled, className), "aria-disabled": disabled, role: "none", children: children }));
+};

package/dist/components/Menu/MenuLink.d.ts

@@ -0,0 +1,2 @@
+import type { MenuLinkProps } from "./types";
+export declare const MenuLink: ({ href, children, isActive, }: MenuLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuLink.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import styles from "./Menu.module.css";
+export const MenuLink = ({ href, children, isActive = false, }) => {
+    return (_jsx(Link, { href: href, role: "menuitem", className: `${styles.menuLink} ${isActive ? styles.active : ""}`, "aria-current": isActive ? "page" : undefined, children: children }));
+};

package/dist/components/Menu/MenuList.d.ts

@@ -0,0 +1,2 @@
+import type { MenuListProps } from "./types";
+export declare const MenuList: ({ children, className }: MenuListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuList.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Menu.module.css";
+import clsx from "clsx";
+export const MenuList = ({ children, className }) => {
+    return _jsx("ul", { className: clsx(styles.list, className), children: children });
+};

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

@@ -0,0 +1,4 @@
+export { MenuList } from "./MenuList";
+export { MenuItem } from "./MenuItem";
+export { MenuLink } from "./MenuLink";
+export type { MenuListProps, MenuItemProps, MenuLinkProps, } from "./types";

package/dist/components/Menu/index.js

@@ -0,0 +1,3 @@
+export { MenuList } from "./MenuList";
+export { MenuItem } from "./MenuItem";
+export { MenuLink } from "./MenuLink";

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { LinkProps } from "next/link";
+export interface MenuListProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface MenuItemProps {
+    children: ReactNode;
+    disabled?: boolean;
+    onSelect?: () => void;
+    className?: string;
+}
+export interface MenuLinkProps extends Omit<LinkProps, "children"> {
+    children: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    isActive?: boolean;
+}

package/dist/components/Menu/types.js

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

package/package.json

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