lucentia-ui 0.2.5 → 0.2.7

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

@@ -24,6 +24,7 @@
   background: var(--color-surface-container);
 }
 
+
 .primary {
   background: var(--color-primary-container);
   color: var(--color-on-primary-container);
@@ -69,6 +70,7 @@
     0 0 8px var(--color-secondary);
 }
 
+
 .danger {
   background: var(--color-error-container);
   color: var(--color-on-error-container);
@@ -88,6 +90,10 @@
     0 0 8px var(--color-error);
 }
 
+.md.danger:active:not(:disabled) {
+  box-shadow: none;
+}
+
 
 /* ===== Size ===== */
 
@@ -109,7 +115,6 @@
 .md.button:active:not(:disabled),
 .button[data-state="pressed"] {
   box-shadow: none;
-  background: var(--color-surface-container);
 }
 
 .button:focus-visible {

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

@@ -36,7 +36,7 @@ export const State = {
             flexDirection: "column",
             alignItems: "flex-start",
             gap: 32,
-        }, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
+        }, children: [_jsx(Button, { variant: "ghost", children: "Default" }), _jsx(Button, { variant: "ghost", style: { background: "var(--color-surface-container)" }, "data-state": "pressed", children: "Pressed" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Disabled" })] })),
 };
 export const Variants = {
     render: () => (_jsxs("div", { style: {

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

@@ -2,7 +2,7 @@
   font-family: var(--font);
   padding: var(--space-md) var(--space-lg);
   border-radius: var(--radius-sm);
-  border: 2px solid var(--color-surface);
+  border: 2px solid var(--color-background);
   outline: none;
   background: var(--color-surface-container);
   color: var(--color-on-surface);

package/dist/components/Switch/Switch.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from "./Switch.module.css";
-export const Switch = ({ checked, defaultChecked, onChange, disabled = false, id, name, }) => {
-    return (_jsxs("label", { className: styles.switch, children: [_jsx("input", { type: "checkbox", id: id, name: name, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled }), _jsx("span", { className: styles.slider })] }));
+export const Switch = ({ checked, defaultChecked, onChange, onCheckedChange, disabled = false, id, name, }) => {
+    const handleChange = (e) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(e.target.checked);
+    };
+    return (_jsxs("label", { className: styles.switch, children: [_jsx("input", { type: "checkbox", role: "switch", id: id, name: name, checked: checked, defaultChecked: defaultChecked, onChange: handleChange, disabled: disabled }), _jsx("span", { className: styles.slider })] }));
 };

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

@@ -5,6 +5,7 @@ export type SwitchProps = {
     /** uncontrolled */
     defaultChecked?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     id?: string;
     name?: string;

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

@@ -45,7 +45,9 @@
   --space-3xl: 48px;
   --space-4xl: 64px;
   --space-5xl: 96px;
-  --gap: 32px;
+  --gap-sm: 16px;
+  --gap-md: 32px;
+  --gap-lg: 64px;
 
   /* ===== Layout ===== */
   --container: 1120px;
@@ -128,7 +130,7 @@
   --color-background: #2b3a38;
   --color-on-background: #dde4e3;
 
-  --color-surface: #1a2120bf;
+  --color-surface: #2b3a38bf;
   --color-on-surface: #dde4e3;
   --color-on-surface-variant: #dde4e380;
   --color-surface-container: #262d2d;

package/package.json

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