@ropav/styles 0.3.0

package/src/components/textarea/textarea.styles.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const textAreaVariants = tv({
+  base: "textarea",
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "textarea--full-width",
+    },
+    variant: {
+      primary: "textarea--primary",
+      secondary: "textarea--secondary",
+    },
+  },
+});
+
+export type TextAreaVariants = VariantProps<typeof textAreaVariants>;

package/src/components/textfield/index.ts

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

package/src/components/textfield/textfield.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const textFieldVariants = tv({
+  base: "textfield",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "textfield--full-width",
+    },
+  },
+});
+
+export type TextFieldVariants = VariantProps<typeof textFieldVariants>;

package/src/components/time-field/index.ts

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

package/src/components/time-field/time-field.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const timeFieldVariants = tv({
+  base: "time-field",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "time-field--full-width",
+    },
+  },
+});
+
+export type TimeFieldVariants = VariantProps<typeof timeFieldVariants>;

package/src/components/toast/index.ts

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

package/src/components/toast/toast.styles.ts

@@ -0,0 +1,67 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const toastVariants = tv({
+  defaultVariants: {
+    placement: "bottom",
+    variant: "default",
+  },
+  slots: {
+    action: "toast__action",
+    close: "toast__close-button",
+    content: "toast__content",
+    description: "toast__description",
+    indicator: "toast__indicator",
+    region: "toast-region",
+    title: "toast__title",
+    toast: "toast",
+  },
+  variants: {
+    placement: {
+      bottom: {
+        region: "toast-region--bottom",
+        toast: "toast--bottom",
+      },
+      "bottom end": {
+        region: "toast-region--bottom-end",
+        toast: "toast--bottom-end",
+      },
+      "bottom start": {
+        region: "toast-region--bottom-start",
+        toast: "toast--bottom-start",
+      },
+      top: {
+        region: "toast-region--top",
+        toast: "toast--top",
+      },
+      "top end": {
+        region: "toast-region--top-end",
+        toast: "toast--top-end",
+      },
+      "top start": {
+        region: "toast-region--top-start",
+        toast: "toast--top-start",
+      },
+    },
+    variant: {
+      accent: {
+        toast: "toast--accent",
+      },
+      danger: {
+        toast: "toast--danger",
+      },
+      default: {
+        toast: "toast--default",
+      },
+      success: {
+        toast: "toast--success",
+      },
+      warning: {
+        toast: "toast--warning",
+      },
+    },
+  },
+});
+
+export type ToastVariants = VariantProps<typeof toastVariants>;

package/src/components/toggle-button/index.ts

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

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

@@ -0,0 +1,28 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const toggleButtonVariants = tv({
+  base: "toggle-button",
+  defaultVariants: {
+    isIconOnly: false,
+    size: "md",
+    variant: "default",
+  },
+  variants: {
+    isIconOnly: {
+      true: "toggle-button--icon-only",
+    },
+    size: {
+      lg: "toggle-button--lg",
+      md: "toggle-button--md",
+      sm: "toggle-button--sm",
+    },
+    variant: {
+      default: "toggle-button--default",
+      ghost: "toggle-button--ghost",
+    },
+  },
+});
+
+export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;

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

@@ -0,0 +1 @@
+export * from "./toggle-button-group.styles";

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/components/typography/index.ts

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

package/src/components/typography/typography.styles.ts

@@ -0,0 +1,50 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const typographyVariants = tv({
+  defaultVariants: {
+    align: "start",
+    color: "default",
+    type: "body",
+  },
+  slots: {
+    base: "typography",
+    prose: "typography-prose",
+  },
+  variants: {
+    align: {
+      center: "typography--align-center",
+      end: "typography--align-end",
+      justify: "typography--align-justify",
+      start: "typography--align-start",
+    },
+    color: {
+      default: "typography--color-default",
+      muted: "typography--color-muted",
+    },
+    truncate: {
+      true: "typography--truncate",
+    },
+    type: {
+      body: "typography--body",
+      "body-sm": "typography--body-sm",
+      "body-xs": "typography--body-xs",
+      code: "typography--code",
+      h1: "typography--h1",
+      h2: "typography--h2",
+      h3: "typography--h3",
+      h4: "typography--h4",
+      h5: "typography--h5",
+      h6: "typography--h6",
+    },
+    weight: {
+      bold: "typography--weight-bold",
+      medium: "typography--weight-medium",
+      normal: "typography--weight-normal",
+      semibold: "typography--weight-semibold",
+    },
+  },
+});
+
+export type TypographyVariants = VariantProps<typeof typographyVariants>;

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)]";