mn-angular-lib 1.0.77 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mn-angular-lib",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "peerDependencies": {
     "@angular/common": "^21.1.3",
     "@angular/core": "^21.1.3"

package/src/lib/features/mn-checkbox/mn-checkbox.css

@@ -0,0 +1,188 @@
+/*
+ * Self-contained checkbox styling — a faithful reproduction of daisyui's
+ * `checkbox` component WITHOUT depending on daisyui.
+ *
+ * Unlike mn-select (which renders entirely with Tailwind utilities), the
+ * checkbox needs a component stylesheet: daisyui draws the checkmark with a
+ * `::before` pseudo-element and an animated `clip-path`, which cannot be
+ * expressed as utility classes on a native <input>. Shipping it as component
+ * CSS also means it compiles with the component and does not rely on the
+ * consumer's Tailwind scanning the library.
+ *
+ * Colors come from the theme CSS variables the consuming app already provides
+ * (--color-primary, --color-base-content, etc. — see demo-app styles.css).
+ * The depth shadows hardcode daisyui's default depth (0.1 opacity) and the
+ * `--fx-noise` layer is dropped.
+ */
+
+.mn-checkbox {
+  /* Defaults; size/color modifier classes override these. */
+  --mn-checkbox-size: 1.5rem;
+  --mn-checkbox-input-color: var(--color-primary);
+  --mn-checkbox-check-color: var(--color-primary-content, #fff);
+
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--mn-checkbox-size);
+  height: var(--mn-checkbox-size);
+  padding: 0.25rem;
+  vertical-align: middle;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  color: var(--mn-checkbox-check-color);
+  border: 1px solid var(--mn-checkbox-input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent));
+  border-radius: 0.25rem;
+  box-shadow: 0 1px oklch(0% 0 0 / 0.1) inset,
+  0 0 #0000 inset,
+  0 0 #0000;
+  transition: background-color 0.2s,
+  box-shadow 0.2s;
+}
+
+.mn-checkbox::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  rotate: 45deg;
+  background-color: currentColor;
+  opacity: 0;
+  box-shadow: 0 3px 0 0 oklch(100% 0 0 / 0.1) inset;
+  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+  transition: clip-path 0.3s,
+  opacity 0.1s,
+  rotate 0.3s,
+  translate 0.3s;
+  transition-delay: 0.1s;
+}
+
+.mn-checkbox:focus-visible {
+  outline: 2px solid var(--mn-checkbox-input-color, currentColor);
+  outline-offset: 2px;
+}
+
+.mn-checkbox:checked,
+.mn-checkbox[aria-checked='true'] {
+  background-color: var(--mn-checkbox-input-color);
+  box-shadow: 0 0 #0000 inset,
+  0 8px 0 -4px oklch(100% 0 0 / 0.1) inset,
+  0 1px oklch(0% 0 0 / 0.1);
+}
+
+.mn-checkbox:checked::before,
+.mn-checkbox[aria-checked='true']::before {
+  opacity: 1;
+  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+}
+
+.mn-checkbox:indeterminate {
+  background-color: var(--mn-checkbox-input-color);
+}
+
+.mn-checkbox:indeterminate::before {
+  opacity: 1;
+  rotate: 0deg;
+  translate: 0 -35%;
+  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+}
+
+.mn-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
+/* ========== Sizes (daisyui dimensions verbatim) ========== */
+
+.mn-checkbox-xs {
+  --mn-checkbox-size: 1rem;
+  padding: 0.125rem;
+}
+
+.mn-checkbox-sm {
+  --mn-checkbox-size: 1.25rem;
+  padding: 0.1875rem;
+}
+
+.mn-checkbox-md {
+  --mn-checkbox-size: 1.5rem;
+  padding: 0.25rem;
+}
+
+.mn-checkbox-lg {
+  --mn-checkbox-size: 1.75rem;
+  padding: 0.3125rem;
+}
+
+.mn-checkbox-xl {
+  --mn-checkbox-size: 2rem;
+  padding: 0.375rem;
+}
+
+/* ========== Colors ========== */
+/* Content tokens carry a #fff fallback because not every theme defines the
+ * full *-content palette; without it currentColor would inherit body text. */
+
+.mn-checkbox-primary {
+  --mn-checkbox-input-color: var(--color-primary);
+  --mn-checkbox-check-color: var(--color-primary-content, #fff);
+}
+
+.mn-checkbox-secondary {
+  --mn-checkbox-input-color: var(--color-secondary);
+  --mn-checkbox-check-color: var(--color-secondary-content, #fff);
+}
+
+.mn-checkbox-accent {
+  --mn-checkbox-input-color: var(--color-accent);
+  --mn-checkbox-check-color: var(--color-accent-content, #fff);
+}
+
+.mn-checkbox-neutral {
+  --mn-checkbox-input-color: var(--color-neutral);
+  --mn-checkbox-check-color: var(--color-neutral-content, #fff);
+}
+
+.mn-checkbox-info {
+  --mn-checkbox-input-color: var(--color-info);
+  --mn-checkbox-check-color: var(--color-info-content, #fff);
+}
+
+.mn-checkbox-success {
+  --mn-checkbox-input-color: var(--color-success);
+  --mn-checkbox-check-color: var(--color-success-content, #fff);
+}
+
+.mn-checkbox-warning {
+  --mn-checkbox-input-color: var(--color-warning);
+  --mn-checkbox-check-color: var(--color-warning-content, #fff);
+}
+
+.mn-checkbox-error {
+  --mn-checkbox-input-color: var(--color-error);
+  --mn-checkbox-check-color: var(--color-error-content, #fff);
+}
+
+/* ========== Border radius ========== */
+
+.mn-checkbox-radius-none {
+  border-radius: 0;
+}
+
+.mn-checkbox-radius-xs {
+  border-radius: 0.125rem;
+}
+
+.mn-checkbox-radius-sm {
+  border-radius: 0.25rem;
+}
+
+.mn-checkbox-radius-md {
+  border-radius: 0.375rem;
+}
+
+.mn-checkbox-radius-lg {
+  border-radius: 0.5rem;
+}

package/types/mn-angular-lib.d.ts

@@ -1412,9 +1412,21 @@ declare class MnTextarea implements OnInit {
 
 declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     borderRadius: {
         none: string;
@@ -1423,11 +1435,23 @@ declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "", {
+}, undefined, "mn-checkbox", {
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     borderRadius: {
         none: string;
@@ -1438,9 +1462,21 @@ declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
     };
 }, undefined, tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     borderRadius: {
         none: string;
@@ -1449,12 +1485,14 @@ declare const mnCheckboxVariants: tailwind_variants.TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "", unknown, unknown, undefined>>;
+}, undefined, "mn-checkbox", unknown, unknown, undefined>>;
 declare const mnCheckboxWrapperVariants: tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     fullWidth: {
         true: string;
@@ -1464,9 +1502,11 @@ declare const mnCheckboxWrapperVariants: tailwind_variants.TVReturnType<{
     };
 }, undefined, "text-base-content", {
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     fullWidth: {
         true: string;
@@ -1476,9 +1516,11 @@ declare const mnCheckboxWrapperVariants: tailwind_variants.TVReturnType<{
     };
 }, undefined, tailwind_variants.TVReturnType<{
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
     };
     fullWidth: {
         true: string;
@@ -1501,6 +1543,8 @@ type MnCheckboxProps = {
     label?: string;
     /** Size variant of the checkbox (default: 'md') */
     size?: MnCheckboxVariants['size'];
+    /** Color variant of the checkbox (default: 'primary') */
+    color?: MnCheckboxVariants['color'];
     /** Border radius variant (default: 'sm') */
     borderRadius?: MnCheckboxVariants['borderRadius'];
     /** Whether the checkbox wrapper should take full width */