@umbra.ui/core 0.1.0

package/src/components/inputs/Tags/types.ts

@@ -0,0 +1,346 @@
+import tinycolor from "tinycolor2";
+import * as colors from "@umbra-ui/colors";
+import { ThemeObject } from "../../../index";
+import { getThemeConfig } from "../../../theme";
+
+// Core interfaces
+export interface TagItem {
+  id: string;
+  title: string;
+  style?: TagStyleConfig;
+}
+
+// Simplified style configuration - direct CSS properties
+export interface TagStyleConfig {
+  // Direct CSS properties for full control
+  backgroundColor?: string;
+  color?: string;
+  border?: string;
+  borderRadius?: string;
+  padding?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  boxShadow?: string;
+
+  // Optional hover state
+  hover?: {
+    backgroundColor?: string;
+    color?: string;
+    border?: string;
+    transform?: string;
+    boxShadow?: string;
+  };
+
+  // Helper properties for convenience
+  size?: TagSize;
+  colorScheme?: ColorScheme; // Can still use predefined colors if desired
+}
+
+export type TagSize = "sm" | "md" | "lg";
+export type ColorScheme = SolidColorName | string; // Radix color name or hex
+
+export type SolidColorName =
+  | "gray"
+  | "mauve"
+  | "slate"
+  | "sage"
+  | "olive"
+  | "sand"
+  | "tomato"
+  | "red"
+  | "ruby"
+  | "crimson"
+  | "pink"
+  | "plum"
+  | "purple"
+  | "violet"
+  | "iris"
+  | "indigo"
+  | "blue"
+  | "cyan"
+  | "teal"
+  | "jade"
+  | "green"
+  | "grass"
+  | "bronze"
+  | "gold"
+  | "brown"
+  | "orange"
+  | "amber"
+  | "yellow"
+  | "lime"
+  | "mint"
+  | "sky";
+
+// Simplified style interface that matches CSS directly
+export interface TagStyle {
+  container: {
+    backgroundColor: string;
+    color: string;
+    border: string;
+    borderRadius: string;
+    padding: string;
+    fontSize?: string;
+    fontWeight?: string;
+    boxShadow?: string;
+  };
+  hover?: {
+    backgroundColor?: string;
+    color?: string;
+    border?: string;
+    transform?: string;
+    boxShadow?: string;
+  };
+}
+
+// Clean data interface (no callbacks)
+export interface TagData {
+  query: string;
+  allTags: TagItem[];
+  selectedTags: TagItem[];
+  matchIndex: number;
+}
+
+// Color mode detection function that uses theme or falls back to system
+export const getColorMode = (): "light" | "dark" => {
+  const config = getThemeConfig();
+  // If a theme is provided, use its color mode
+  if (config?.customThemeColorMode) {
+    return config.customThemeColorMode;
+  }
+
+  // Otherwise fall back to system preference
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+// Size presets
+const SIZE_PRESETS: Record<TagSize, { padding: string; fontSize: string }> = {
+  sm: { padding: "0.125rem 0.375rem", fontSize: "0.75rem" },
+  md: { padding: "0.235rem 0.588rem", fontSize: "0.875rem" },
+  lg: { padding: "0.375rem 0.75rem", fontSize: "1rem" },
+};
+
+// Helper to get Radix colors based on color mode
+const getRadixColor = (
+  colorName: SolidColorName,
+  step: number,
+  alpha = false
+): string => {
+  const isDark = getColorMode() === "dark";
+  const colorKey = isDark ? `${colorName}Dark` : colorName;
+  const alphaKey = alpha ? "A" : "";
+  const colorScale = (colors as any)[`${colorKey}${alphaKey}`];
+
+  if (!colorScale) {
+    console.warn(`Color scale ${colorKey}${alphaKey} not found`);
+    return "#808080";
+  }
+
+  const stepKey = `${colorName}${alphaKey}${step}`;
+  return colorScale[stepKey] || "#808080";
+};
+
+// Check if a string is a valid Radix color name
+const isRadixColor = (color: string): color is SolidColorName => {
+  const radixColors: SolidColorName[] = [
+    "gray",
+    "mauve",
+    "slate",
+    "sage",
+    "olive",
+    "sand",
+    "tomato",
+    "red",
+    "ruby",
+    "crimson",
+    "pink",
+    "plum",
+    "purple",
+    "violet",
+    "iris",
+    "indigo",
+    "blue",
+    "cyan",
+    "teal",
+    "jade",
+    "green",
+    "grass",
+    "bronze",
+    "gold",
+    "brown",
+    "orange",
+    "amber",
+    "yellow",
+    "lime",
+    "mint",
+    "sky",
+  ];
+  return radixColors.includes(color as SolidColorName);
+};
+
+// Default style values
+const DEFAULT_STYLE: TagStyle = {
+  container: {
+    backgroundColor: "var(--default-tag-background-color)",
+    color: "var(--default-tag-color)",
+    border: "1px solid var(--default-tag-border)",
+    borderRadius: "var(--default-tag-border-radius)",
+    padding: "var(--default-tag-padding)",
+    fontSize: "var(--default-tag-font-size)",
+    fontWeight: "var(--default-tag-font-weight)",
+  },
+  hover: {
+    backgroundColor: "var(--default-tag-hover-background-color)",
+  },
+};
+
+// Generate default style from color scheme
+const generateDefaultStyleFromColor = (colorScheme: string): TagStyle => {
+  if (isRadixColor(colorScheme)) {
+    // Use Radix color scale
+    return {
+      container: {
+        backgroundColor: getRadixColor(colorScheme, 5, true),
+        color: getRadixColor(colorScheme, 11),
+        border: `1px solid ${getRadixColor(colorScheme, 7)}`,
+        borderRadius: "0.375rem",
+        padding: SIZE_PRESETS.md.padding,
+        fontSize: SIZE_PRESETS.md.fontSize,
+      },
+      hover: {
+        backgroundColor: getRadixColor(colorScheme, 5, true),
+      },
+    };
+  } else {
+    // Use custom hex color
+    const baseColor = tinycolor(colorScheme);
+    const isDark = getColorMode() === "dark";
+
+    return {
+      container: {
+        backgroundColor: isDark
+          ? baseColor.setAlpha(0.2).toRgbString()
+          : baseColor.setAlpha(0.15).toRgbString(),
+        color: isDark
+          ? baseColor.lighten(20).toHexString()
+          : baseColor.darken(20).toHexString(),
+        border: `1px solid ${baseColor.setAlpha(0.3).toRgbString()}`,
+        borderRadius: "0.375rem",
+        padding: SIZE_PRESETS.md.padding,
+        fontSize: SIZE_PRESETS.md.fontSize,
+      },
+      hover: {
+        backgroundColor: isDark
+          ? baseColor.setAlpha(0.3).toRgbString()
+          : baseColor.setAlpha(0.25).toRgbString(),
+      },
+    };
+  }
+};
+
+// Main style generation function - much simpler!
+export const generateTagStyle = (config: TagStyleConfig = {}): TagStyle => {
+  let baseStyle: TagStyle = { ...DEFAULT_STYLE };
+
+  // If a color scheme is provided, generate default colors from it
+  if (config.colorScheme) {
+    baseStyle = generateDefaultStyleFromColor(config.colorScheme);
+  }
+
+  // Apply size preset if provided
+  if (config.size) {
+    const sizeConfig = SIZE_PRESETS[config.size];
+    baseStyle.container.padding = sizeConfig.padding;
+    baseStyle.container.fontSize = sizeConfig.fontSize;
+  }
+
+  // Direct CSS property overrides - these take precedence
+  const style: TagStyle = {
+    container: {
+      ...baseStyle.container,
+      backgroundColor:
+        config.backgroundColor ?? baseStyle.container.backgroundColor,
+      color: config.color ?? baseStyle.container.color,
+      border: config.border ?? baseStyle.container.border,
+      borderRadius: config.borderRadius ?? baseStyle.container.borderRadius,
+      padding: config.padding ?? baseStyle.container.padding,
+      fontSize: config.fontSize ?? baseStyle.container.fontSize,
+      fontWeight: config.fontWeight ?? baseStyle.container.fontWeight,
+      boxShadow: config.boxShadow ?? baseStyle.container.boxShadow,
+    },
+    hover: config.hover
+      ? {
+          ...baseStyle.hover,
+          ...config.hover,
+        }
+      : baseStyle.hover,
+  };
+
+  return style;
+};
+
+// Helper to create tag with style
+export const createStyledTag = (
+  id: string,
+  title: string,
+  styleConfig?: TagStyleConfig
+): TagItem => ({
+  id,
+  title,
+  style: styleConfig,
+});
+
+// Preset color schemes using Radix colors
+export const COLOR_PRESETS = {
+  primary: "blue",
+  success: "green",
+  warning: "amber",
+  danger: "red",
+  info: "cyan",
+  neutral: "gray",
+} as const;
+
+// Example preset styles that developers can use or override
+export const TAG_STYLE_PRESETS = {
+  default: {
+    borderRadius: "999px",
+    padding: "0.235rem 0.588rem",
+  },
+  rounded: {
+    borderRadius: "0.375rem",
+    padding: "0.235rem 0.588rem",
+  },
+  square: {
+    borderRadius: "0",
+    padding: "0.235rem 0.588rem",
+  },
+  pill: {
+    borderRadius: "999px",
+    padding: "0.25rem 0.75rem",
+  },
+  minimal: {
+    backgroundColor: "transparent",
+    border: "none",
+    padding: "0.125rem 0.375rem",
+  },
+} as const;
+
+// Utility class for managing tag themes (simplified)
+export class TagTheme {
+  private defaultStyle: TagStyleConfig;
+
+  constructor(defaultStyle: TagStyleConfig = {}) {
+    this.defaultStyle = defaultStyle;
+  }
+
+  generateStyle(overrides?: TagStyleConfig): TagStyle {
+    return generateTagStyle({ ...this.defaultStyle, ...overrides });
+  }
+
+  // Create a tag with the theme's default style
+  createTag(id: string, title: string, overrides?: TagStyleConfig): TagItem {
+    return createStyledTag(id, title, { ...this.defaultStyle, ...overrides });
+  }
+}