lucentia-ui 0.2.13 → 0.2.15

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

@@ -21,7 +21,7 @@
   color: var(--color-on-surface);
 }
 .ghost:hover:not(:disabled) {
-  background: var(--color-surface-container);
+  border: 2px solid var(--color-border);
 }
 
 
@@ -120,6 +120,7 @@
 .sm.button:active:not(:disabled),
 .md.button:active:not(:disabled),
 .button[data-state="pressed"] {
+  
   box-shadow: 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", "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,51 @@
+.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-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/dist/styles/tokens.css

@@ -62,7 +62,7 @@
     --color-on-background: #161d1d;
 
     --color-surface: #f4fbfabf;
-    --color-on-surface: #161d1d;
+    --color-on-surface: #3a4444;
     --color-on-surface-variant: #161d1d80;
     --color-surface-container: #e9efeebf;
 
@@ -121,7 +121,7 @@ html[data-theme="dark"] {
     --color-on-background: #dde4e3;
 
     --color-surface: #2b3a38bf;
-    --color-on-surface: #dde4e3;
+    --color-on-surface: #c3cbca;
     --color-on-surface-variant: #dde4e380;
     --color-surface-container: #262d2d;
 

package/package.json

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