lucentia-ui 0.2.7 → 0.2.8

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,5 @@
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "ghost" | "primary" | "secondary" | "danger";
     size?: "sm" | "md";
+    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,98 @@
+.themeSwitch {
+  font-size: 18px;
+  position: relative;
+  display: inline-block;
+  width: 3.5em;
+  height: 2em;
+}
+
+/* input単体にスタイルを当てる */
+.input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #333;
+  transition: 0.4s;
+  border-radius: 30px;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  height: 1.4em;
+  width: 1.4em;
+  border-radius: 20px;
+  left: 0.3em;
+  bottom: 0.3em;
+  background-color: #fff000;
+  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-color: #333;
+  width: 1.25rem;
+  height: 1.25rem;
+  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: #fff000;
+  border-radius: 1rem;
+  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/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/package.json

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