@masaraxui/styles 1.0.0

package/dist/components/progress-bar/progress-bar.styles.d.ts

@@ -0,0 +1,106 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const progressBarVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;
+//# sourceMappingURL=progress-bar.styles.d.ts.map

package/dist/components/progress-bar/progress-bar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAyC9B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/progress-bar/progress-bar.styles.js

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+
+const progressBarVariants = tv({
+    defaultVariants: {
+        color: "accent",
+        size: "md",
+    },
+    slots: {
+        base: "progress-bar",
+        fill: "progress-bar__fill",
+        output: "progress-bar__output",
+        track: "progress-bar__track",
+    },
+    variants: {
+        color: {
+            accent: {
+                base: "progress-bar--accent",
+            },
+            danger: {
+                base: "progress-bar--danger",
+            },
+            default: {
+                base: "progress-bar--default",
+            },
+            success: {
+                base: "progress-bar--success",
+            },
+            warning: {
+                base: "progress-bar--warning",
+            },
+        },
+        size: {
+            lg: {
+                base: "progress-bar--lg",
+            },
+            md: {
+                base: "progress-bar--md",
+            },
+            sm: {
+                base: "progress-bar--sm",
+            },
+        },
+    },
+});
+
+export { progressBarVariants };

package/dist/components/progress-bar.css

@@ -0,0 +1,128 @@
+/* ==========================================================================
+   ProgressBar - Shows determinate or indeterminate progress
+   ========================================================================== */
+
+/* Base styles */
+.progress-bar {
+  @apply grid w-full gap-1;
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  /* Default color token (accent) */
+  --progress-bar-fill: var(--color-accent);
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .progress-bar__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .progress-bar__track {
+    @apply relative overflow-hidden rounded-full bg-default;
+
+    grid-area: track;
+
+    /* Default height (matches --md) */
+    @apply h-2;
+  }
+
+  .progress-bar__fill {
+    @apply absolute top-0 left-0 h-full rounded-full;
+
+    background-color: var(--progress-bar-fill);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: width 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Indeterminate state - when no aria-valuenow is set */
+  &:not([aria-valuenow]) {
+    .progress-bar__fill {
+      @apply w-2/5;
+
+      animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+
+      @apply motion-reduce:animate-none;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+/* ==========================================================================
+   Indeterminate animation
+   ========================================================================== */
+
+@keyframes progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-bar--sm {
+  .progress-bar__track {
+    @apply h-1;
+  }
+}
+
+.progress-bar--md {
+  /* No styles as this is the default size */
+}
+
+.progress-bar--lg {
+  .progress-bar__track {
+    @apply h-3;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-bar--default {
+  --progress-bar-fill: var(--color-default-foreground);
+}
+
+.progress-bar--accent {
+  --progress-bar-fill: var(--color-accent);
+}
+
+.progress-bar--success {
+  --progress-bar-fill: var(--color-success);
+}
+
+.progress-bar--warning {
+  --progress-bar-fill: var(--color-warning);
+}
+
+.progress-bar--danger {
+  --progress-bar-fill: var(--color-danger);
+}

package/dist/components/progress-circle/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./progress-circle.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/progress-circle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/components/progress-circle/index.js

@@ -0,0 +1 @@
+export { progressCircleVariants } from './progress-circle.styles.js';

package/dist/components/progress-circle/progress-circle.styles.d.ts

@@ -0,0 +1,106 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const progressCircleVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fillCircle: string;
+    track: string;
+    trackCircle: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;
+//# sourceMappingURL=progress-circle.styles.d.ts.map

package/dist/components/progress-circle/progress-circle.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.styles.d.ts","sourceRoot":"","sources":["../../../src/components/progress-circle/progress-circle.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAyCjC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/progress-circle/progress-circle.styles.js

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+
+const progressCircleVariants = tv({
+    defaultVariants: {
+        color: "accent",
+        size: "md",
+    },
+    slots: {
+        base: "progress-circle",
+        fillCircle: "progress-circle__fill-circle",
+        track: "progress-circle__track",
+        trackCircle: "progress-circle__track-circle",
+    },
+    variants: {
+        color: {
+            accent: {
+                base: "progress-circle--accent",
+            },
+            danger: {
+                base: "progress-circle--danger",
+            },
+            default: {
+                base: "progress-circle--default",
+            },
+            success: {
+                base: "progress-circle--success",
+            },
+            warning: {
+                base: "progress-circle--warning",
+            },
+        },
+        size: {
+            lg: {
+                base: "progress-circle--lg",
+            },
+            md: {
+                base: "progress-circle--md",
+            },
+            sm: {
+                base: "progress-circle--sm",
+            },
+        },
+    },
+});
+
+export { progressCircleVariants };

package/dist/components/progress-circle.css

@@ -0,0 +1,105 @@
+/* ==========================================================================
+   ProgressCircle - Circular progress indicator
+   ========================================================================== */
+
+/* Base styles */
+.progress-circle {
+  @apply inline-flex items-center justify-center;
+
+  /* Default color token (accent) */
+  --progress-circle-stroke: var(--color-accent);
+  --progress-circle-track-stroke: var(--color-default);
+
+  .progress-circle__track {
+    /* Default size (matches --md) */
+    @apply size-7;
+  }
+
+  .progress-circle__track-circle {
+    stroke: var(--progress-circle-track-stroke);
+  }
+
+  .progress-circle__fill-circle {
+    stroke: var(--progress-circle-stroke);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: stroke-dashoffset 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Indeterminate state - when no aria-valuenow is set */
+  &:not([aria-valuenow]) {
+    .progress-circle__track {
+      animation: progress-circle-spin 1s linear infinite;
+
+      @apply motion-reduce:animate-none;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Indeterminate animation
+   ========================================================================== */
+
+@keyframes progress-circle-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-circle--sm {
+  .progress-circle__track {
+    @apply size-5;
+  }
+}
+
+.progress-circle--md {
+  /* No styles as this is the default size */
+}
+
+.progress-circle--lg {
+  .progress-circle__track {
+    @apply size-9;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-circle--default {
+  --progress-circle-stroke: var(--color-default-foreground);
+}
+
+.progress-circle--accent {
+  --progress-circle-stroke: var(--color-accent);
+}
+
+.progress-circle--success {
+  --progress-circle-stroke: var(--color-success);
+}
+
+.progress-circle--warning {
+  --progress-circle-stroke: var(--color-warning);
+}
+
+.progress-circle--danger {
+  --progress-circle-stroke: var(--color-danger);
+}

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

@@ -0,0 +1,2 @@
+export * from "./radio.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/radio/index.js

@@ -0,0 +1 @@
+export { radioVariants } from './radio.styles.js';

package/dist/components/radio/radio.styles.d.ts

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const radioVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            indicator?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            indicator?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            indicator?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            control?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type RadioVariants = VariantProps<typeof radioVariants>;
+//# sourceMappingURL=radio.styles.d.ts.map

package/dist/components/radio/radio.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAOxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/radio/radio.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const radioVariants = tv({
+    slots: {
+        base: "radio",
+        content: "radio__content",
+        control: "radio__control",
+        indicator: "radio__indicator",
+    },
+});
+
+export { radioVariants };

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./radio-group.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/radio-group/index.js

@@ -0,0 +1 @@
+export { radioGroupVariants } from './radio-group.styles.js';

package/dist/components/radio-group/radio-group.styles.d.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const radioGroupVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "radio-group", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "radio-group", unknown, unknown, undefined>>;
+export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
+//# sourceMappingURL=radio-group.styles.d.ts.map

package/dist/components/radio-group/radio-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;0DAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/radio-group/radio-group.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const radioGroupVariants = tv({
+    base: "radio-group",
+    defaultVariants: {
+        variant: "primary",
+    },
+    variants: {
+        variant: {
+            primary: "radio-group--primary",
+            secondary: "radio-group--secondary",
+        },
+    },
+});
+
+export { radioGroupVariants };