@masaraxui/styles 1.0.0

package/src/components/toggle-button-group/toggle-button-group.styles.ts

@@ -0,0 +1,39 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const toggleButtonGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    isDetached: false,
+    orientation: "horizontal",
+  },
+  slots: {
+    base: "toggle-button-group",
+    separator: "toggle-button-group__separator",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "toggle-button-group--full-width",
+      },
+    },
+    isDetached: {
+      false: {},
+      true: {
+        base: "toggle-button-group--detached",
+      },
+    },
+    orientation: {
+      horizontal: {
+        base: "toggle-button-group--horizontal",
+      },
+      vertical: {
+        base: "toggle-button-group--vertical",
+      },
+    },
+  },
+});
+
+export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;

package/src/components/toolbar/index.ts

@@ -0,0 +1 @@
+export * from "./toolbar.styles";

package/src/components/toolbar/toolbar.styles.ts

@@ -0,0 +1,23 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+const toolbarVariants = tv({
+  base: "toolbar",
+  defaultVariants: {
+    isAttached: false,
+    orientation: "horizontal",
+  },
+  variants: {
+    isAttached: {
+      true: "toolbar--attached",
+    },
+    orientation: {
+      horizontal: "toolbar--horizontal",
+      vertical: "toolbar--vertical",
+    },
+  },
+});
+
+export {toolbarVariants};
+export type ToolbarVariants = VariantProps<typeof toolbarVariants>;

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./tooltip.styles";

package/src/components/tooltip/tooltip.styles.ts

@@ -0,0 +1,12 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const tooltipVariants = tv({
+  slots: {
+    base: "tooltip",
+    trigger: "tooltip__trigger",
+  },
+});
+
+export type TooltipVariants = VariantProps<typeof tooltipVariants>;

package/src/index.ts

@@ -0,0 +1,8 @@
+// Re-export tailwind-variants for convenience
+export {tv, cn, type VariantProps} from "tailwind-variants";
+
+// Export utility classes
+export * from "./utils";
+
+// Export all component variants
+export * from "./components";

package/src/utils/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Utility CSS class strings for common component patterns
+ * These are framework-agnostic and can be used with any styling approach
+ */
+
+export const focusRingClasses =
+  "focus-visible:ring-focus focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+
+export const disabledClasses =
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--disabled-opacity)]";
+
+export const ariaDisabledClasses =
+  "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-[var(--disabled-opacity)]";