lucentia-ui 0.2.2 → 0.2.4

package/README.md

@@ -1,5 +1,3 @@
 # lucentia-ui
 
 React UI design token and component system based on neumorphism, featuring two color themes: light and dark.
-
--

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

@@ -1,6 +1,6 @@
 .button {
   font-family: var(--font);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   border: 2px solid transparent;
   cursor: pointer;
 
@@ -91,13 +91,13 @@
 
 .sm {
   padding: var(--space-xs) var(--space-lg);
-  font-size: 0.875rem;
+  font-size: var(--font-size-14);
   box-shadow: var(--shadow-sm);
 }
 
 .md {
   padding: var(--space-sm) var(--space-2xl);
-  font-size: 1rem;
+  font-size: var(--font-size-16);
   box-shadow: var(--shadow-md);
 }
 
@@ -107,6 +107,7 @@
 .md.button:active:not(:disabled),
 .button[data-state="pressed"] {
   box-shadow: none;
+  background: var(--color-surface-container);
 }
 
 .button:focus-visible {

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

@@ -8,7 +8,7 @@
   gap: var(--space-sm);
   cursor: pointer;
   font-family: var(--font);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   color: var(--color-on-surface);
 }
 
@@ -49,5 +49,5 @@
 }
 
 .label {
-  font-size: 1rem;
+  font-size: var(--font-size-16);
 }

package/dist/components/Feedback/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import styles from "./Modal.module.css";
-export const Modal = ({ open, onClose, children }) => {
+export const Modal = ({ open, onClose, children, className, }) => {
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
@@ -12,5 +12,5 @@ export const Modal = ({ open, onClose, children }) => {
     const modalRoot = document.getElementById("modal-root");
     if (!modalRoot)
         return null;
-    return createPortal(_jsx("div", { className: styles.overlay, onClick: onClose, children: _jsx("div", { className: styles.modal, onClick: (e) => e.stopPropagation(), children: children }) }), modalRoot);
+    return createPortal(_jsx("div", { className: styles.overlay, onClick: onClose, children: _jsx("div", { className: [styles.modal, className].filter(Boolean).join(" "), onClick: (e) => e.stopPropagation(), children: children }) }), modalRoot);
 };

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

@@ -10,10 +10,10 @@
 }
 
 .modal {
-  background: var(--color-surface);
+  background: var(--color-background);
   color: var(--color-on-surface);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-surface-lg);
   padding: var(--space-lg);
   min-width: 320px;
   max-width: 90vw;

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

@@ -3,4 +3,5 @@ export type ModalProps = {
     open: boolean;
     onClose?: () => void;
     children: ReactNode;
+    className?: string;
 };

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

@@ -40,13 +40,13 @@
 
 /* ===== size ===== */
 .sm {
-  font-size: 0.875rem;
+  font-size: var(--font-size-14);
   padding: var(--space-sm) var(--space-md);
   box-shadow: var(--shadow-sm-in);
 }
 
 .md {
-  font-size: 1rem;
+  font-size: var(--font-size-16);
   padding: var(--space-md) var(--space-lg);
   box-shadow: var(--shadow-md-in);
 }

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

@@ -4,7 +4,7 @@
   gap: var(--space-sm);
   cursor: pointer;
   font-family: var(--font);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   color: var(--color-on-surface);
 }
 
@@ -45,5 +45,5 @@
 }
 
 .label {
-  font-size: 1rem;
+  font-size: var(--font-size-16);
 }

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

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

package/dist/components/Textarea/Textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from "./Textarea.module.css";
 import clsx from "clsx";
-export const Textarea = ({ state = "default", className, rows = 3, ...props }) => {
-    return (_jsx("textarea", { rows: rows, className: clsx(styles.textarea, styles[state], className), ...props }));
+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 }));
 };

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

@@ -39,3 +39,18 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+
+
+/* ===== size ===== */
+.sm {
+  font-size: var(--font-size-14);
+  padding: var(--space-sm) var(--space-md);
+  box-shadow: var(--shadow-sm-in);
+}
+
+.md {
+  font-size: var(--font-size-16);
+  padding: var(--space-md) var(--space-lg);
+  box-shadow: var(--shadow-md-in);
+}

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Textarea>;
 export declare const Default: Story;
 export declare const State: Story;
+export declare const Size: Story;

package/dist/components/Textarea/Textarea.stories.js

@@ -20,3 +20,8 @@ export const State = {
             }, children: [_jsx(Textarea, { placeholder: "Default State", state: "default" }), _jsx(Textarea, { placeholder: "Error State", state: "error" }), _jsx(Textarea, { placeholder: "Disabled State", disabled: true })] }));
     },
 };
+export const Size = {
+    render: () => {
+        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16 }, children: [_jsx(Textarea, { placeholder: "Small Size", size: "sm" }), _jsx(Textarea, { placeholder: "Medium Size", size: "md" })] }));
+    },
+};

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

@@ -1,4 +1,6 @@
 export type TextareaState = "default" | "error";
+export type size = "sm" | "md";
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     state?: TextareaState;
+    size?: size;
 }

package/dist/components/ThemeProvider/ThemeProvider.module.css

@@ -1,12 +1,35 @@
 .theme {
   min-height: 100%;
-  font-family: var(--font), system-ui, -apple-system, sans-serif;
+  font-family:
+    var(--font),
+    system-ui,
+    -apple-system,
+    sans-serif;
   background: var(--color-background);
 
   /* font */
   --font: "Noto Sans JP", sans-serif;
 
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-28: 28px;
+  --font-size-40: 40px;
+  --font-size-48: 48px;
+
+  --line-tight: 1.2;
+  --line-snug: 1.35;
+  --line-normal: 1.6;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --font-weight-black: 700;
+
   /* ===== Radius ===== */
+  --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-max: 999px;
@@ -25,7 +48,6 @@
 
   /* ===== Layout ===== */
   --container: 1120px;
-  
 }
 
 .light {
@@ -62,20 +84,28 @@
   /* ===== Effect ===== */
   --blur: blur(8px);
 
-  --shadow-sm: -2px -2px 2px 1px var(--color-shadow-l),
+  --shadow-sm:
+    -2px -2px 2px 1px var(--color-shadow-l),
     2px 2px 2px 1px var(--color-shadow-d);
 
-  --shadow-sm-in: inset -2px -2px 2px  var(--color-shadow-l),
-    inset 2px 2px 2px  var(--color-shadow-d);
+  --shadow-sm-in:
+    inset -2px -2px 2px var(--color-shadow-l),
+    inset 2px 2px 2px var(--color-shadow-d);
 
-  --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
+  --shadow-md:
+    -2px -2px 4px 2px var(--color-shadow-l),
     2px 2px 4px 2px var(--color-shadow-d);
 
-  --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
+  --shadow-md-in:
+    inset -4px -4px 4px var(--color-shadow-l),
     inset 4px 4px 4px var(--color-shadow-d);
 
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
+  --shadow-lg:
+    -4px -4px 16px 8px var(--color-shadow-l),
     4px 4px 16px 8px var(--color-shadow-d);
+
+  --shadow-surface-lg:
+    0px 4px 16px 8px var(--color-shadow-d);
 }
 
 .dark {
@@ -111,18 +141,22 @@
   /* ===== Effect ===== */
   --blur: blur(8px);
 
-  --shadow-sm: -2px -2px 2px  var(--color-shadow-l),
-    2px 2px 2px 1px var(--color-shadow-d);
+  --shadow-sm:
+    -2px -2px 2px var(--color-shadow-l), 2px 2px 2px 1px var(--color-shadow-d);
 
-  --shadow-sm-in: inset -2px -2px 2px var(--color-shadow-l),
+  --shadow-sm-in:
+    inset -2px -2px 2px var(--color-shadow-l),
     inset 2px 2px 2px var(--color-shadow-d);
 
-  --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
+  --shadow-md:
+    -2px -2px 4px 2px var(--color-shadow-l),
     2px 2px 4px 2px var(--color-shadow-d);
 
-  --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
+  --shadow-md-in:
+    inset -4px -4px 4px var(--color-shadow-l),
     inset 4px 4px 4px var(--color-shadow-d);
 
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
+  --shadow-lg:
+    -4px -4px 16px 8px var(--color-shadow-l),
     4px 4px 16px 8px var(--color-shadow-d);
 }

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

@@ -0,0 +1,13 @@
+import type { TypographyVariant, TypographyColor } from "./types";
+import type React from "react";
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingVariant = Extract<TypographyVariant, "display-lg" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs">;
+type HeadingProps = {
+    level: HeadingLevel;
+    variant?: HeadingVariant;
+    color?: TypographyColor;
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const Heading: ({ level, variant, color, className, children, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Typography/Heading.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "./Text";
+export const Heading = ({ level, variant = "heading-lg", color = "default", className, children, }) => {
+    const Tag = `h${level}`;
+    return (_jsx(Text, { as: Tag, variant: variant, color: color, className: className, children: children }));
+};

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

@@ -0,0 +1,12 @@
+import type { TypographyVariant, TypographyColor } from "./types";
+import type React from "react";
+type LabelVariant = Extract<TypographyVariant, "label-md" | "label-sm">;
+type LabelProps = {
+    htmlFor?: string;
+    variant?: LabelVariant;
+    color?: TypographyColor;
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const Label: ({ htmlFor, variant, color, className, children, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Typography/Label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "./Text";
+export const Label = ({ htmlFor, variant = "label-sm", color = "default", className, children, }) => {
+    return (_jsx(Text, { as: "label", variant: variant, color: color, htmlFor: htmlFor, className: className, children: children }));
+};

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

@@ -0,0 +1,9 @@
+import type { TypographyVariant, TypographyColor, PolymorphicProps } from "./types";
+import type React from "react";
+type TextProps<E extends React.ElementType> = PolymorphicProps<E, {
+    variant?: TypographyVariant;
+    color?: TypographyColor;
+    className?: string;
+}>;
+export declare const Text: <E extends React.ElementType = "span">({ as, variant, color, className, ...props }: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Typography/Text.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./typography.module.css";
+export const Text = ({ as, variant = "body-md", color = "default", className, ...props }) => {
+    const Component = as || "span";
+    return (_jsx(Component, { className: clsx(styles[variant], styles[`color-${color}`], className), ...props }));
+};

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

@@ -0,0 +1,4 @@
+export { Text } from "./Text";
+export { Heading } from "./Heading";
+export { Label } from "./Label";
+export * from "./types";

package/dist/components/Typography/index.js

@@ -0,0 +1,4 @@
+export { Text } from "./Text";
+export { Heading } from "./Heading";
+export { Label } from "./Label";
+export * from "./types";

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

@@ -0,0 +1,7 @@
+import type React from "react";
+export type AsProp<E extends React.ElementType> = {
+    as?: E;
+};
+export type PolymorphicProps<E extends React.ElementType, P> = P & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, keyof P | "as">;
+export type TypographyVariant = "display-lg" | "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";

package/dist/components/Typography/types.js

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

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

@@ -0,0 +1,95 @@
+/* ========================================
+   Display
+======================================== */
+
+.display-lg {
+  font-size: var(--font-size-48);
+  line-height: var(--line-tight);
+  font-weight: var(--font-weight-bold);
+}
+
+/* ========================================
+   Heading
+======================================== */
+
+.heading-xl {
+  font-size: var(--font-size-28);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-bold);
+}
+
+.heading-lg {
+  font-size: var(--font-size-24);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-medium);
+}
+
+.heading-md {
+  font-size: var(--font-size-20);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-medium);
+}
+
+.heading-sm {
+  font-size: var(--font-size-18);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-medium);
+}
+
+.heading-xs {
+  font-size: var(--font-size-16);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ========================================
+   Body
+======================================== */
+
+.body-md {
+  font-size: var(--font-size-16);
+  line-height: var(--line-normal);
+  font-weight: var(--font-weight-regular);
+}
+
+.body-sm {
+  font-size: var(--font-size-14);
+  line-height: var(--line-normal);
+  font-weight: var(--font-weight-regular);
+}
+
+/* ========================================
+   Label
+======================================== */
+
+.label-md {
+  font-size: var(--font-size-16);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-medium);
+}
+
+.label-sm {
+  font-size: var(--font-size-14);
+  line-height: var(--line-snug);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ========================================
+   Color
+======================================== */
+
+.color-default {
+  color: var(--color-on-background);
+}
+
+.color-muted {
+  color: var(--color-on-surface-variant);
+}
+
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-error {
+  color: var(--color-error);
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
 export * from "./components/Textarea";
+export * from "./components/Typography";
 export * from "./components/Select";
 export * from "./components/Switch";
 export * from "./components/Feedback/Modal";

package/dist/index.js

@@ -7,6 +7,7 @@ export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
 export * from "./components/Textarea";
+export * from "./components/Typography";
 export * from "./components/Select";
 export * from "./components/Switch";
 export * from "./components/Feedback/Modal";

package/dist/styles/font.css

@@ -20,4 +20,4 @@
   font-weight: 600;
   font-style: normal;
   font-display: swap;
-}
+}

package/package.json

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