lucentia-ui 1.0.0 → 1.1.0

package/README.md

@@ -85,7 +85,7 @@ export default function Example() {
 ---
 
 
-### ダークテーマ
+### Dark Theme
 
 Use ThemeProvider only when enabling dark mode or theme switching.
 
@@ -104,7 +104,7 @@ export default function App({ children }: { children: React.ReactNode }) {
 }
 ```
 
-## コンポーネント設計方針
+## Component Design Policy
 
 - **Respect native HTML elements**
 - **props extends HTMLAttributes**

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

@@ -3,6 +3,7 @@
   height: fit-content;
   font-family: var(--font);
   font-weight: var(--font-weight-medium);
+  line-height: var(--line-normal);
   border: 2px solid transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;

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

@@ -9,6 +9,7 @@
   cursor: pointer;
   font-family: var(--font);
   font-weight: var(--font-weight-medium);
+  line-height: var(--line-normal);
   color: var(--color-on-surface);
 }
 

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

@@ -22,6 +22,7 @@
 
     font-family: var(--font);
     font-weight: var(--font-weight-medium);
+    line-height: var(--line-normal);
     text-decoration: none;
     color: var(--color-on-surface);
 

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

@@ -5,6 +5,7 @@
   cursor: pointer;
   font-family: var(--font);
   font-weight: var(--font-weight-medium);
+  line-height: var(--line-normal);
   color: var(--color-on-surface);
 }
 

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

@@ -12,7 +12,9 @@
   color: inherit;
   border: none;
   padding: 0;
-  font: inherit;
+  font-family: var(--font);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-normal);
   cursor: pointer;
   outline: none;
   /* 以降、既存のスタイルを調整 */

package/dist/components/Textarea/Textarea.d.ts

@@ -1,2 +1,2 @@
 import { TextareaProps } from "./types";
-export declare const Textarea: ({ state, size, className, rows, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ state, size, className, rows, autoResize, value, onChange, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Textarea/Textarea.js

@@ -1,6 +1,27 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import styles from "./Textarea.module.css";
 import clsx from "clsx";
-export const Textarea = ({ state = "default", size = "md", className, rows = 3, ...props }) => {
-    return (_jsx("textarea", { rows: rows, className: clsx(styles.textarea, styles[state], styles[size], className), ...props }));
+export const Textarea = ({ state = "default", size = "md", className, rows = 3, autoResize = false, value, onChange, ...props }) => {
+    const textareaRef = useRef(null);
+    const resize = () => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+    };
+    useEffect(() => {
+        if (autoResize) {
+            resize();
+        }
+    }, [value, autoResize]);
+    const handleChange = (e) => {
+        if (autoResize) {
+            resize();
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    return (_jsx("textarea", { ref: textareaRef, rows: rows, value: value, onChange: handleChange, className: clsx(styles.textarea, styles[state], styles[size], className), ...props }));
 };

package/dist/components/Textarea/Textarea.module.css

@@ -1,5 +1,6 @@
 .textarea {
   font-family: var(--font);
+  line-height: var(--line-normal);
   padding: var(--space-md) var(--space-lg);
   border-radius: var(--radius-sm);
   border: 2px solid var(--color-surface);

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

@@ -3,4 +3,5 @@ export type size = "sm" | "md";
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     state?: TextareaState;
     size?: size;
+    autoResize?: boolean;
 }

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

@@ -4,4 +4,4 @@ export type AsProp<E extends React.ElementType> = {
 };
 export type PolymorphicProps<E extends React.ElementType, P> = P & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, keyof P | "as">;
 export type TypographyVariant = "display-lg" | "display-md" | "display-sm" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-md" | "body-sm" | "label-md" | "label-sm";
-export type TypographyColor = "default" | "muted" | "primary" | "secondary" | "error" | "success";
+export type TypographyColor = "default" | "surface" | "muted" | "primary" | "secondary" | "error" | "success";

package/dist/components/Typography/typography.module.css

@@ -60,13 +60,13 @@
 
 .body-md {
   font-size: var(--font-size-16);
-  line-height: var(--line-normal);
+  line-height: var(--line-comfort);
   font-weight: var(--font-weight-medium);
 }
 
 .body-sm {
   font-size: var(--font-size-14);
-  line-height: var(--line-normal);
+  line-height: var(--line-comfort);
   font-weight: var(--font-weight-medium);
 }
 

package/dist/styles/tokens.css

@@ -13,7 +13,7 @@
 
   --line-tight: 1.2;
   --line-snug: 1.35;
-  --line-normal: 1.6;
+  --line-comfort: 1.7;
 
   --font-weight-regular: 400;
   --font-weight-medium: 500;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React UI design token and component system based on neumorphism, featuring two color themes: light and dark.",
   "homepage": "https://lucentia.rikiyamatsuda.com/en",
   "main": "dist/index.js",