lucentia-ui 0.2.8 → 0.2.9

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

@@ -1,5 +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/Extra/ThemeSwitch/ThemeSwitch.module.css

@@ -2,8 +2,8 @@
   font-size: 18px;
   position: relative;
   display: inline-block;
-  width: 3.5em;
-  height: 2em;
+  width: 72px;
+  height: 40px;
 }
 
 /* input単体にスタイルを当てる */
@@ -20,7 +20,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #333;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm-in);
   transition: 0.4s;
   border-radius: 30px;
   overflow: hidden;
@@ -28,12 +29,12 @@
 
 .circle {
   position: absolute;
-  height: 1.4em;
-  width: 1.4em;
+  height: 1.1em;
+  width: 1.1em;
   border-radius: 20px;
-  left: 0.3em;
-  bottom: 0.3em;
-  background-color: #fff000;
+  left: 0.6em;
+  bottom: 0.45em;
+  background-color: var(--color-primary);
   transition: 0.4s;
 }
 
@@ -67,9 +68,9 @@
   left: -100%;
   top: 50%;
   opacity: 0;
-  background-color: #333;
-  width: 1.25rem;
-  height: 1.25rem;
+  background: var(--color-background);
+  width: 1rem;
+  height: 1rem;
   border-radius: 99999px;
   transform: translateY(-50%);
   transition: all 0.4s;
@@ -82,8 +83,8 @@
   left: 50%;
   width: 0.25rem;
   height: 0.25rem;
-  background-color: #fff000;
-  border-radius: 1rem;
+  background-color: var(--color-primary);
+  border-radius: 4rem;
   transition: all 0.4s;
 }
 

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/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.8",
+  "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",