@masaraxui/styles 1.0.0

package/dist/components/slider.css

@@ -0,0 +1,179 @@
+/* Slider styles */
+
+.slider {
+  @apply grid w-full gap-1;
+
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .slider__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .slider__track {
+    @apply relative rounded-full bg-default;
+
+    grid-area: track;
+  }
+
+  .slider__fill {
+    @apply pointer-events-none absolute bg-accent;
+  }
+
+  .slider__thumb {
+    /* Flex container for centering pseudo-elements */
+    @apply absolute flex cursor-grab items-center justify-center rounded-full bg-accent no-highlight;
+
+    /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+    transition:
+      background-color 250ms var(--ease-smooth),
+      transform 250ms var(--ease-out),
+      box-shadow 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* after: Visible thumb element */
+    &::after {
+      @apply relative z-10 rounded-full bg-accent-foreground text-black shadow-field;
+      content: "";
+
+      /**
+       * Transitions
+       */
+      @apply origin-center transition-all motion-reduce:transition-none;
+    }
+
+    /* Dragging state - cursor changes and thumb scales down */
+    &[data-dragging="true"] {
+      @apply cursor-grabbing;
+
+      &::after {
+        @apply scale-[0.9] motion-reduce:scale-100;
+      }
+    }
+
+    /* Focus state - increase z-index */
+    &[data-focus-visible="true"] {
+      @apply z-10 status-focused;
+    }
+
+    /* Disabled state */
+    &[data-disabled="true"] {
+      @apply cursor-default;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    flex-direction: column;
+
+    .slider__track {
+      @apply h-5 w-full;
+      /* Add transparent borders to provide space for thumb at edges */
+      /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
+      @apply border-x-[0.75rem] border-x-transparent;
+
+      &[data-fill-start="true"] {
+        @apply border-s-accent;
+      }
+
+      &[data-fill-end="true"] {
+        @apply border-e-accent;
+      }
+    }
+
+    .slider__fill,
+    .slider__thumb {
+      @apply h-full;
+    }
+
+    .slider__thumb {
+      @apply top-1/2;
+
+      /* Thumb width + border width */
+      width: calc(1.5rem + 0.25rem);
+
+      &::after {
+        width: 1.5rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply h-full gap-2;
+
+    flex-direction: row;
+    grid-template-areas:
+      "output"
+      "track"
+      "label";
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+
+    .slider__output {
+      text-align: center;
+    }
+
+    [data-slot="label"] {
+      text-align: center;
+    }
+
+    .slider__track {
+      @apply h-full w-5;
+      /* Add transparent borders to provide space for thumb at edges */
+      /* Thumb height is 1.5rem (24px), so half is 0.75rem (12px) */
+      @apply border-y-[0.75rem] border-y-transparent;
+      justify-self: center;
+
+      &[data-fill-start="true"] {
+        @apply border-b-accent;
+      }
+
+      &[data-fill-end="true"] {
+        @apply border-t-accent;
+      }
+    }
+
+    .slider__fill,
+    .slider__thumb {
+      @apply w-full;
+    }
+
+    .slider__thumb {
+      @apply left-1/2;
+
+      /* Thumb height + border height */
+      height: calc(1.5rem + 0.25rem);
+
+      &::after {
+        width: 1rem;
+        height: 1.5rem;
+      }
+    }
+  }
+}

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

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

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

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

package/dist/components/spinner/index.js

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

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: string;
+        current: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+    };
+}, undefined, "spinner", {
+    color: {
+        accent: string;
+        current: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: string;
+        current: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+    };
+}, undefined, "spinner", unknown, unknown, undefined>>;
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>;
+//# sourceMappingURL=spinner.styles.d.ts.map

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

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

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+const spinnerVariants = tv({
+    base: "spinner",
+    defaultVariants: {
+        color: "accent",
+        size: "md",
+    },
+    variants: {
+        color: {
+            accent: "spinner--accent",
+            current: "spinner--current",
+            danger: "spinner--danger",
+            success: "spinner--success",
+            warning: "spinner--warning",
+        },
+        size: {
+            lg: "spinner--lg",
+            md: "spinner--md",
+            sm: "spinner--sm",
+            xl: "spinner--xl",
+        },
+    },
+});
+
+export { spinnerVariants };

package/dist/components/spinner.css

@@ -0,0 +1,42 @@
+/* Base spinner styles */
+.spinner {
+  @apply pointer-events-none relative size-6 origin-center animate-spin-fast;
+}
+
+/* Size variants */
+.spinner--sm {
+  @apply size-4;
+}
+
+.spinner--md {
+  /* No styles as this is the default size */
+}
+
+.spinner--lg {
+  @apply size-8;
+}
+
+.spinner--xl {
+  @apply size-10;
+}
+
+/* Color variants */
+.spinner--current {
+  color: inherit;
+}
+
+.spinner--accent {
+  color: var(--accent);
+}
+
+.spinner--danger {
+  color: var(--danger);
+}
+
+.spinner--success {
+  color: var(--success);
+}
+
+.spinner--warning {
+  color: var(--warning);
+}

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

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

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

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

package/dist/components/surface/index.js

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

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

@@ -0,0 +1,25 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const surfaceVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+        transparent: string;
+    };
+}, undefined, "surface", {
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+        transparent: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        tertiary: string;
+        transparent: string;
+    };
+}, undefined, "surface", unknown, unknown, undefined>>;
+export type SurfaceVariants = VariantProps<typeof surfaceVariants>;
+//# sourceMappingURL=surface.styles.d.ts.map

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

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

package/dist/components/surface/surface.styles.js

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+
+const surfaceVariants = tv({
+    base: "surface",
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "surface--default",
+            secondary: "surface--secondary",
+            tertiary: "surface--tertiary",
+            transparent: "surface--transparent",
+        },
+    },
+});
+
+export { surfaceVariants };

package/dist/components/surface.css

@@ -0,0 +1,23 @@
+/* Surface component styles */
+
+/* Block */
+.surface {
+  @apply relative text-foreground;
+}
+
+/* Modifier - variant */
+.surface--transparent {
+  @apply bg-transparent;
+}
+
+.surface--default {
+  @apply bg-surface text-surface-foreground;
+}
+
+.surface--secondary {
+  @apply bg-surface-secondary text-surface-secondary-foreground;
+}
+
+.surface--tertiary {
+  @apply bg-surface-tertiary text-surface-tertiary-foreground;
+}

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

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

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

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

package/dist/components/switch/index.js

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

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

@@ -0,0 +1,58 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const switchVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    icon: string;
+    thumb: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    icon: string;
+    thumb: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    icon: string;
+    thumb: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchVariants = VariantProps<typeof switchVariants>;
+//# sourceMappingURL=switch.styles.d.ts.map

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

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

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+const switchVariants = tv({
+    defaultVariants: {
+        size: "md",
+    },
+    slots: {
+        base: "switch",
+        content: "switch__content",
+        control: "switch__control",
+        icon: "switch__icon",
+        thumb: "switch__thumb",
+    },
+    variants: {
+        size: {
+            lg: {
+                base: "switch--lg",
+            },
+            md: {
+                base: "switch--md",
+            },
+            sm: {
+                base: "switch--sm",
+            },
+        },
+    },
+});
+
+export { switchVariants };

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const switchGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    items: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    items: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    items: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchGroupVariants = VariantProps<typeof switchGroupVariants>;
+//# sourceMappingURL=switch-group.styles.d.ts.map

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

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

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

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+
+const switchGroupVariants = tv({
+    defaultVariants: {
+        orientation: "vertical",
+    },
+    slots: {
+        base: "switch-group",
+        items: "switch-group__items",
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                base: "switch-group--horizontal",
+            },
+            vertical: {
+                base: "switch-group--vertical",
+            },
+        },
+    },
+});
+
+export { switchGroupVariants };

package/dist/components/switch-group.css

@@ -0,0 +1,17 @@
+/* Switch Group styles */
+.switch-group {
+  @apply flex flex-col gap-6;
+}
+
+.switch-group__items {
+  @apply flex gap-4;
+}
+
+/* Orientation modifiers */
+.switch-group--horizontal .switch-group__items {
+  @apply flex-row;
+}
+
+.switch-group--vertical .switch-group__items {
+  @apply flex-col;
+}