lucentia-ui 0.1.1

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from "./types";
+export declare const Button: ({ variant, size, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Button.module.css";
+import clsx from "clsx";
+export const Button = ({ variant = "default", size = "md", className, ...props }) => {
+    return (_jsx("button", { className: clsx(styles.button, styles[variant], styles[size], className), ...props }));
+};

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

@@ -0,0 +1,64 @@
+.button {
+  font-family: var(--font);
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+
+  border-radius: var(--radius-max);
+
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, opacity 0.2s ease, background 0.25s ease-in-out,
+    color 0.25s ease;
+}
+
+/* ===== Variant ===== */
+.default {
+  background: var(--color-surface-container);
+  color: var(--color-on-surface);
+}
+
+.primary {
+  background: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}
+
+
+.secondary {
+  background: var(--color-secondary-container);
+  color: var(--color-on-secondary-container);
+}
+
+
+.error {
+  background: var(--color-error-container);
+  color: var(--color-on-error-container);
+}
+
+
+/* ===== Size ===== */
+
+.sm {
+  padding: var(--space-xs) var(--space-lg);
+  font-size: 0.875rem;
+}
+
+.md {
+  padding: var(--space-sm) var(--space-2xl);
+  font-size: 1rem;
+}
+
+/* ===== State ===== */
+
+.button:active:not(:disabled),
+.button[data-state="pressed"] {
+  box-shadow: none;
+}
+
+.button:focus-visible {
+  outline: none;
+}
+
+.button:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const State: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "./Button";
+const meta = {
+    title: "Components/Button",
+    component: Button,
+    args: {
+        children: "Button",
+        variant: "default",
+        size: "md",
+    },
+    argTypes: {
+        variant: {
+            control: "radio",
+            options: ["default", "primary", "secondary", "error"],
+            description: "Buttonの表示バリエーション",
+        },
+        size: {
+            control: "radio",
+            options: ["sm", "md"],
+            description: "Buttonのサイズ",
+        },
+        disabled: {
+            control: "boolean",
+            description: "無効状態",
+        },
+        onClick: {
+            action: "clicked",
+        },
+    },
+};
+export default meta;
+export const Default = {};
+export const State = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "default", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "default", disabled: true, children: "Disabled" })] })),
+};
+export const Variants = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "error", children: "Error" })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" })] })),
+};

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

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./types";

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./types";

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

@@ -0,0 +1,4 @@
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "default" | "primary" | "secondary" | "error";
+    size?: "sm" | "md";
+}

package/dist/components/Button/types.js

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from "./types";
+export declare const Checkbox: ({ label, className, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Checkbox.module.css";
+export const Checkbox = ({ label, className, ...props }) => {
+    return (_jsxs("label", { className: styles.wrapper, children: [_jsx("input", { type: "checkbox", className: styles.input, ...props }), _jsx("span", { className: styles.control }), label && _jsx("span", { className: styles.label, children: label })] }));
+};

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

@@ -0,0 +1,56 @@
+:root{
+  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M28.6122 12.5595C29.4077 11.7934 30.6741 11.8169 31.4403 12.6122C32.2064 13.4078 32.1829 14.6742 31.3875 15.4404L17.8875 28.4404C17.1025 29.1963 15.8564 29.1846 15.0858 28.414L8.58579 21.914C7.80474 21.133 7.80474 19.8669 8.58579 19.0859C9.36684 18.3048 10.6329 18.3048 11.4139 19.0859L16.5252 24.1972L28.6122 12.5595Z'/%3E%3C/svg%3E");
+}
+
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-family: var(--font);
+  font-weight: 500;
+  color: var(--color-on-surface);
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.control {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-container);
+  box-shadow: var(--shadow-sm-in);
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 32px 32px;
+   transition: background-color 0.2s ease;
+}
+
+/* checked */
+.input:checked + .control {
+  background-color: var(--color-primary);
+  background-image: var(--icon-check);
+}
+/* focus */
+.input:focus-visible + .control {
+  outline: 2px solid var(--color-primary-container);
+  outline-offset: 2px;
+}
+
+/* disabled */
+.input:disabled + .control {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.label {
+  font-size: 1rem;
+}
+
+
+

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "./Checkbox";
+const meta = {
+    title: "Components/Checkbox",
+    component: Checkbox,
+};
+export default meta;
+export const Default = {};
+export const State = {
+    render: () => {
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [_jsx(Checkbox, { label: "\u975E\u9078\u629E\u72B6\u614B" }), _jsx(Checkbox, { label: "\u9078\u629E\u72B6\u614B", defaultChecked: true }), _jsx(Checkbox, { label: "\u7DE8\u96C6\u4E0D\u53EF", disabled: true })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./types";

package/dist/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

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

@@ -0,0 +1,3 @@
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}

package/dist/components/Checkbox/types.js

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from "./types";
+export declare const Input: ({ state, className, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/Input.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Input.module.css";
+import clsx from "clsx";
+export const Input = ({ state = "default", className, ...props }) => {
+    return (_jsx("input", { className: clsx(styles.input, styles[state], className), ...props }));
+};

package/dist/components/Input/Input.module.css

@@ -0,0 +1,33 @@
+.input {
+  font-family: var(--font);
+  padding: var(--space-md) var(--space-lg);
+  border-radius: var(--radius-sm);
+  border: 2px solid var(--color-surface);
+  outline: none;
+  box-shadow: var(--shadow-sm-in), var(--shadow-sm);
+
+  background: var(--color-surface-container);
+  color: var(--color-on-surface);
+
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* ===== Focus ===== */
+
+.input:focus {
+  outline: none;
+  border: 2px solid var(--color-primary);
+}
+
+/* ===== Error ===== */
+
+.error {
+  border: 2px solid var(--color-error);
+}
+
+/* ===== Disabled ===== */
+
+.input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "./Input";
+const meta = {
+    title: "Components/Input",
+    component: Input,
+};
+export default meta;
+export const Default = {
+    args: {
+        placeholder: "入力してください",
+    },
+};
+export const State = {
+    render: () => {
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Input, { placeholder: "Default State", state: "default" }), _jsx(Input, { placeholder: "Error State", state: "error" }), _jsx(Input, { placeholder: "Disabled State", disabled: true })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from "./types";

package/dist/components/Input/index.js

@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from "./types";

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

@@ -0,0 +1,4 @@
+export type InputState = "default" | "error";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    state?: InputState;
+}

package/dist/components/Input/types.js

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

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ModalProps } from "./types";
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Modal.module.css";
+export const Modal = ({ open, onClose, children }) => {
+    if (!open)
+        return null;
+    return (_jsx("div", { className: styles.overlay, onClick: onClose, children: _jsx("div", { className: styles.modal, onClick: (e) => e.stopPropagation(), children: children }) }));
+};

package/dist/components/Modal/Modal.module.css

@@ -0,0 +1,20 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-scrim);
+  backdrop-filter: var(--blur);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: var(--color-surface);
+  color: var(--color-on-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-lg);
+  min-width: 320px;
+  max-width: 90vw;
+}

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal } from "./Modal";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;

package/dist/components/Modal/Modal.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Modal } from "./Modal";
+import { Button } from "../Button/Button";
+const meta = {
+    title: "Components/Feedback/Modal",
+    component: Modal,
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal" }), _jsx(Modal, { open: open, onClose: () => setOpen(false), children: _jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 32 }, children: [_jsx("h2", { children: "Modal Title" }), _jsx("p", { children: "This is a modal content." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close" })] }) })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from "./Modal";
+export * from "./types";

package/dist/components/Modal/index.js

@@ -0,0 +1,2 @@
+export * from "./Modal";
+export * from "./types";

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export type ModalProps = {
+    open: boolean;
+    onClose?: () => void;
+    children: ReactNode;
+};

package/dist/components/Modal/types.js

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,2 @@
+import { RadioProps } from "./types";
+export declare const Radio: ({ label, className, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./Radio.module.css";
+export const Radio = ({ label, className, ...props }) => {
+    return (_jsxs("label", { className: clsx(styles.wrapper, className), children: [_jsx("input", { type: "radio", className: styles.input, ...props }), _jsx("span", { className: styles.control }), label && _jsx("span", { className: styles.label, children: label })] }));
+};

package/dist/components/Radio/Radio.module.css

@@ -0,0 +1,53 @@
+
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-family: var(--font);
+  font-weight: 500;
+  color: var(--color-on-surface);
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.control {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm-in);
+  position: relative;
+}
+
+/* checked */
+.input:checked + .control::after {
+  content: "";
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: var(--color-primary);
+}
+
+/* focus */
+.input:focus-visible + .control {
+  outline: 2px solid var(--color-primary-container);
+  outline-offset: 2px;
+}
+
+/* disabled */
+.input:disabled + .control {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.label {
+  font-size: 1rem;
+}
+
+
+

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Radio } from "./Radio";
+declare const meta: Meta<typeof Radio>;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/Radio/Radio.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio } from "./Radio";
+const meta = {
+    title: "Components/Radio",
+    component: Radio,
+};
+export default meta;
+export const Default = {
+    args: {
+        checked: false,
+    },
+};
+export const State = {
+    render: () => {
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", maxWidth: 300, gap: 16 }, children: [_jsx(Radio, { name: "option", value: "1", label: "\u672A\u9078\u629E", checked: false }), _jsx(Radio, { name: "option", value: "2", label: "\u9078\u629E\u6E08\u307F", checked: true }), _jsx(Radio, { name: "option", value: "3", label: "\u7DE8\u96C6\u4E0D\u53EF", checked: false, disabled: true })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export type { RadioProps } from "./types";

package/dist/components/Radio/index.js

@@ -0,0 +1 @@
+export { Radio } from "./Radio";

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

@@ -0,0 +1,3 @@
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}

package/dist/components/Radio/types.js

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

package/dist/components/Select/Select.d.ts

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

package/dist/components/Select/Select.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Select.module.css";
+import clsx from "clsx";
+export const Select = ({ state = "default", className, children, ...props }) => {
+    return (_jsx("select", { className: clsx(styles.select, styles[state], className), ...props, children: children }));
+};

package/dist/components/Select/Select.module.css

@@ -0,0 +1,45 @@
+.select {
+  font-family: var(--font);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+
+  background-color: var(--color-surface-container);
+  color: var(--color-on-surface);
+
+  appearance: none;
+  -webkit-appearance: none;
+
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.5%209.5L12%2015L18%209.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+
+  
+  background-repeat: no-repeat;
+  background-position: right var(--space-sm) center;
+  background-size: 24px;
+
+  padding-right: calc(var(--space-md) + 32px + var(--space-sm));
+
+  cursor: pointer;
+}
+
+select:has(option[value=""]:checked) {
+  color: var(--color-on-surface);
+}
+
+
+/* focus */
+.select:focus {
+  outline: none;
+
+}
+
+/* error */
+.error {
+  border: 2px solid var(--color-error);
+}
+
+/* disabled */
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from "./Select";
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const State: Story;

package/dist/components/Select/Select.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select } from "./Select";
+const meta = {
+    title: "Components/Select",
+    component: Select,
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] })),
+    },
+};
+export const State = {
+    render: () => {
+        return (_jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: 32,
+            }, children: [_jsxs(Select, { children: [_jsx("option", { value: "", children: "Default State" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] }), _jsxs(Select, { state: "error", required: true, children: [_jsx("option", { value: "", disabled: true, selected: true, hidden: true, children: "Error State" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] }), _jsxs(Select, { disabled: true, children: [_jsx("option", { value: "", children: "Disabled State" }), _jsx("option", { value: "a", children: "Option A" }), _jsx("option", { value: "b", children: "Option B" })] })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./types";

package/dist/components/Select/index.js

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./types";

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

@@ -0,0 +1,4 @@
+export type SelectState = "default" | "error";
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    state?: SelectState;
+}

package/dist/components/Select/types.js

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