lucentia-ui 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { ThemeProvider } from "./components/ThemeProvider";
 export type { Theme } from "./components/ThemeProvider";
 export * from "./components/Button";
 export * from "./components/Checkbox";
+export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
 export * from "./components/Textarea";

package/dist/index.js

@@ -3,6 +3,7 @@ export { ThemeProvider } from "./components/ThemeProvider";
 /* ===== Components ===== */
 export * from "./components/Button";
 export * from "./components/Checkbox";
+export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
 export * from "./components/Textarea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.1.8",
+  "version": "0.1.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",
@@ -23,7 +23,8 @@
     "react": ">=18"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json && cpy 'src/**/*.css' dist"
+    "build": "tsc -p tsconfig.json && npm run copy:assets",
+    "copy:assets": "cpy 'src/styles/*.css' dist/styles && cpy 'src/fonts/*' dist/fonts"
   },
   "license": "MIT",
   "dependencies": {
@@ -32,4 +33,4 @@
   "devDependencies": {
     "cpy-cli": "^6.0.0"
   }
-}
+}

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

@@ -1,82 +0,0 @@
-.button {
-  font-family: var(--font);
-  font-weight: 500;
-  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 ===== */
-.default {
-  background: var(--color-surface-container);
-  color: var(--color-on-surface);
-}
-.default:hover:not(:disabled) {
-  border: 2px solid var(--color-border);
-  box-shadow: 0 0 4px var(--color-border), 0 0 8px var(--color-border);
-}
-
-.primary {
-  background: var(--color-primary-container);
-  color: var(--color-on-primary-container);
-}
-
-.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);
-}
-
-.secondary:hover:not(:disabled) {
-  border: 2px solid var(--color-secondary);
-  box-shadow: 0 0 4px var(--color-secondary), 0 0 8px var(--color-secondary);
-}
-
-.error {
-  background: var(--color-error-container);
-  color: var(--color-on-error-container);
-}
-
-.error:hover:not(:disabled) {
-  border: 2px solid var(--color-error);
-  box-shadow: 0 0 4px var(--color-error), 0 0 8px var(--color-error);
-}
-
-/* ===== Size ===== */
-
-.sm {
-  padding: var(--space-xs) var(--space-lg);
-  font-size: 0.875rem;
-  box-shadow: var(--shadow-sm);
-}
-
-.md {
-  padding: var(--space-sm) var(--space-2xl);
-  font-size: 1rem;
-    box-shadow: var(--shadow-md);
-}
-
-/* ===== State ===== */
-
-.button:active:not(:disabled),
-.button[data-state="pressed"] {
-  box-shadow: none;
-}
-
-.button:focus-visible {
-  outline: none;
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

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

@@ -1,53 +0,0 @@
-: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-md-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/Divider/Divider.module.css

@@ -1,28 +0,0 @@
-.divider {
-  background: var(--color-border);
-  flex-shrink: 0;
-}
-
-/* orientation */
-.divider[data-orientation="horizontal"] {
-  width: 100%;
-  height: 2px;
-}
-
-.divider[data-orientation="vertical"] {
-  width: 2px;
-  height: 100%;
-}
-
-
-/* variants */
-
-.divider[data-variant="groove"][data-orientation="horizontal"]{
-  box-shadow: var(--shadow-sm-in);
-  height: 4px;
-}
-
-.divider[data-variant="groove"][data-orientation="vertical"]{
-  box-shadow: var(--shadow-sm-in);
-  width: 4px;
-}

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

@@ -1,20 +0,0 @@
-.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-lg);
-  padding: var(--space-lg);
-  min-width: 320px;
-  max-width: 90vw;
-}

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

@@ -1,52 +0,0 @@
-.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;
-  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);
-}
-
-
-/* ===== Readonly ===== */
-.input:read-only:not(:disabled)  {
-  box-shadow: none;
-  cursor: text;
-}
-
-.input:read-only:not(:disabled) :focus {
-  border: 2px solid var(--color-surface);
-}
-
-/* ===== Error ===== */
-.error {
-  border: 2px solid var(--color-error);
-}
-
-/* ===== Disabled ===== */
-.input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ===== size ===== */
-.sm {
-  font-size: 0.875rem;
-  padding: var(--space-sm) var(--space-md);
-  box-shadow: var(--shadow-sm-in);
-}
-
-.md {
-  font-size: 1rem;
-  padding: var(--space-md) var(--space-lg);
-  box-shadow: var(--shadow-md-in);
-}

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

@@ -1,49 +0,0 @@
-.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-md-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/Select/Select.module.css

@@ -1,43 +0,0 @@
-.select {
-  font-family: var(--font);
-  padding: var(--space-sm) var(--space-md);
-  border: 2px solid transparent;
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-md);
-
-  background: 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/Switch/Switch.module.css

@@ -1,58 +0,0 @@
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 72px;
-  height: 40px;
-}
-
-/* input は見えなくするが状態は保持 */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* ===== Track ===== */
-.slider {
-  position: absolute;
-  inset: 0;
-  background: var(--color-surface-container);
-  border-radius: var(--radius-max);
-  box-shadow: var(--shadow-md-in);
-  transition: background 0.2s ease;
-  cursor: pointer;
-}
-
-/* ===== Knob ===== */
-.slider::before {
-  content: "";
-  position: absolute;
-  height: 24px;
-  width: 24px;
-  left: 8px;
-  top: 8px;
-  background: var(--color-on-primary);
-  box-shadow: var(--shadow-md);
-  border-radius: var(--radius-max);
-  transition: transform 0.2s ease;
-}
-
-/* ===== Checked ===== */
-.switch input:checked + .slider {
-  background: var(--color-primary);
-}
-
-.switch input:checked + .slider::before {
-  transform: translateX(32px);
-}
-
-/* ===== Focus ===== */
-.switch input:focus-visible + .slider {
-  outline: none;
-}
-
-/* ===== Disabled ===== */
-.switch input:disabled + .slider {
-  opacity: 0.25;
-  cursor: not-allowed;
-}

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

@@ -1,41 +0,0 @@
-.textarea {
-  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-md-in);
-
-  background: var(--color-surface-container);
-  color: var(--color-on-surface);
-  resize: none;
-  scrollbar-width: none;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* ===== Focus ===== */
-.textarea:focus {
-  outline: none;
-  border: 2px solid var(--color-primary);
-}
-
-/* ===== Error ===== */
-.error {
-  border: 2px solid var(--color-error);
-}
-
-/* ===== Readonly ===== */
-.textarea:read-only {
-  box-shadow: none;
-  cursor: text;
-}
-
-.textarea:read-only:focus {
-  border: 2px solid var(--color-surface);
-}
-
-/* ===== Disabled ===== */
-.textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

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

@@ -1,125 +0,0 @@
-.theme {
-  min-height: 100%;
-  /* font */
-  --font: "Noto Sans JP", sans-serif;
-
-  /* ===== Radius ===== */
-  --radius-sm: 8px;
-  --radius-md: 16px;
-  --radius-max: 999px;
-
-  /* ===== Space ===== */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 12px;
-  --space-lg: 16px;
-  --space-xl: 24px;
-  --space-2xl: 32px;
-  --space-3xl: 48px;
-  --space-4xl: 64px;
-  --space-5xl: 96px;
-  --gap: 32px;
-
-  /* ===== Layout ===== */
-  --container: 1120px;
-  
-}
-
-.light {
-  /* ===== Color ===== */
-  --color-primary: #00a1a1;
-  --color-on-primary: #ffffff;
-  --color-primary-container: #9cf1f0;
-  --color-on-primary-container: #004f4f;
-
-  --color-secondary: #7b9695;
-  --color-on-secondary: #ffffff;
-  --color-secondary-container: #cce8e7;
-  --color-on-secondary-container: #324b4b;
-
-  --color-error: #ff5449;
-  --color-on-error: #ffffff;
-  --color-error-container: #ffdad6;
-  --color-on-error-container: #93000a;
-
-  --color-background: #f4fbfa;
-  --color-on-background: #161d1d;
-
-  --color-surface: #f4fbfabf;
-  --color-on-surface: #161d1d;
-  --color-on-surface-variant: #161d1d80;
-  --color-surface-container: #e9efeebf;
-
-  --color-border: #bbcccc;
-  --color-scrim: rgba(129, 129, 129, 0.25);
-
-  --color-shadow-l: rgba(255, 255, 255, 1);
-  --color-shadow-d: rgba(0, 0, 0, 0.2);
-
-  /* ===== Effect ===== */
-  --blur: blur(8px);
-
-  --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 1px var(--color-shadow-l),
-    inset 2px 2px 2px 1px var(--color-shadow-d);
-
-  --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),
-    inset 4px 4px 4px var(--color-shadow-d);
-
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
-    4px 4px 16px 8px var(--color-shadow-d);
-}
-
-.dark {
-  --color-primary: #80d5d4;
-  --color-on-primary: #003737;
-  --color-primary-container: #004f4f;
-  --color-on-primary-container: #9cf1f0;
-
-  --color-secondary: #b0cccb;
-  --color-on-secondary: #1b3534;
-  --color-secondary-container: #324b4b;
-  --color-on-secondary-container: #cce8e7;
-
-  --color-error: #ffb4ab;
-  --color-on-error: #690005;
-  --color-error-container: #93000a;
-  --color-on-error-container: #ffdad6;
-
-  --color-background: #2b3a38;
-  --color-on-background: #dde4e3;
-
-  --color-surface: #1a2120bf;
-  --color-on-surface: #dde4e3;
-  --color-on-surface-variant: #dde4e380;
-  --color-surface-container: #262d2d;
-
-  --color-border: #889392;
-  --color-scrim: rgba(0, 0, 0, 0.25);
-
-  --color-shadow-l: rgba(255, 255, 255, 0.25);
-  --color-shadow-d: rgba(0, 0, 0, 1);
-
-  /* ===== Effect ===== */
-  --blur: blur(8px);
-
-  --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 1px var(--color-shadow-l),
-    inset 2px 2px 2px 1px var(--color-shadow-d);
-
-  --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),
-    inset 4px 4px 4px var(--color-shadow-d);
-
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
-    4px 4px 16px 8px var(--color-shadow-d);
-}