@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.26

package/dist/components/forms/Input/Input.theme.js

@@ -8,17 +8,15 @@ const inputTheme = {
     // Base container styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Input group styles - no focus-within (focus is managed via JS for contentStart/contentEnd compatibility)
-    inputGroupStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+    inputGroupStyle: "relative flex rounded-[var(--form-radius)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
         "bg-white transition-all " +
-        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)]",
+        "dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:bg-[var(--color-neutral-900)]",
     // JS-driven focus ring (applied when isFocused is true)
-    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+    inputGroupFocusStyle: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+        "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
     // JS-driven focus ring for invalid state
-    inputGroupFocusInvalidStyle: "outline-2 outline-[var(--color-danger)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-danger)]/10 " +
-        "dark:outline-[var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
+    inputGroupFocusInvalidStyle: "shadow-[inset_0_0_0_2px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+        "dark:shadow-[inset_0_0_0_2px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
     // Base input styles - extends common form control with design tokens
     baseStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3`,
     // Size variants - composed from atomic tokens
@@ -31,8 +29,8 @@ const inputTheme = {
     states: {
         default: formsBaseTheme.states.default,
         disabled: formsBaseTheme.states.disabled,
-        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] " +
-            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] " +
+            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Helper text styles with state handling
     helperText: formsBaseTheme.helperText,
@@ -67,7 +65,7 @@ const inputTheme = {
     // Number input controls
     numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
     numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
-        "text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] " +
+        "text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] " +
         "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
         "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",

package/dist/components/forms/Mention/Mention.theme.js

@@ -10,9 +10,9 @@ const mentionTheme = {
     // Input group container with outline and focus ring
     inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
     // JS-driven focus ring (applied when editable div is focused)
-    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
+    inputGroupFocusStyle: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] " +
         "ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+        "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
     // Base editable div styles
     editableStyle: `${formsBaseTheme.controlBaseStyle} whitespace-pre-wrap break-words overflow-y-auto cursor-text`,
     // Size variants
@@ -35,7 +35,7 @@ const mentionTheme = {
         "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-400)]/10",
     // Avatar image
     suggestionAvatarStyle: "size-7 rounded-full object-cover shrink-0 " +
-        "bg-[var(--color-background-tertiary)] dark:bg-[var(--color-neutral-700)]",
+        "bg-[var(--color-surface-sunken)] dark:bg-[var(--color-neutral-700)]",
     // Avatar fallback (initials circle)
     suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-xs font-medium " +
         "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +

package/dist/components/forms/Radio/Radio.theme.js

@@ -9,7 +9,7 @@ const radioTheme = {
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        "dark:bg-[var(--color-background-tertiary)] " +
+        "dark:bg-[var(--color-surface-raised)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-white " +
         // Checked state - dark

package/dist/components/forms/RichTextEditor/RichTextEditor.d.ts

@@ -1,3 +1,21 @@
 import React from "react";
 import { RichTextEditorProps } from "./RichTextEditor.types";
+import type { FontFamilyOption } from "./RichTextEditor.types";
+/**
+ * Curated default list of font families shipped with the editor.
+ * The `Default` entry clears the inline font-family. The rest are popular
+ * Google Fonts chosen for broad weight coverage. Each stack ends in a sensible
+ * fallback so text stays readable while the font is loading.
+ */
+export declare const DEFAULT_FONT_FAMILY_OPTIONS: FontFamilyOption[];
+/**
+ * Lazily injects a Google Fonts `<link rel="stylesheet">` for the given family.
+ * Idempotent: each family is requested at most once per page lifetime.
+ * SSR-safe (no-ops when `document` is undefined).
+ *
+ * @example
+ * import { loadGoogleFont } from "@flikk/ui";
+ * loadGoogleFont("Inter");
+ */
+export declare const loadGoogleFont: (family: string, weights?: number[]) => void;
 export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;