@flikk/ui 1.0.0-beta.5 → 1.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/ai/PromptInput/PromptInput.js +1 -1
  2. package/dist/components/core/Badge/Badge.theme.js +4 -4
  3. package/dist/components/core/Button/Button.theme.js +5 -5
  4. package/dist/components/core/Calendar/Calendar.theme.js +3 -3
  5. package/dist/components/core/CommandPalette/CommandPalette.theme.js +1 -1
  6. package/dist/components/core/MenuItem/MenuItem.theme.js +2 -2
  7. package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js +1 -1
  8. package/dist/components/core/Progress/Progress.theme.js +1 -1
  9. package/dist/components/data-display/Table/TableFilter.js +1 -1
  10. package/dist/components/data-display/Timeline/Timeline.theme.js +2 -2
  11. package/dist/styles.css +1 -1
  12. package/package.json +1 -1
  13. package/src/global.scss +1 -2
  14. package/src/styles/theme.css +10 -0
  15. package/src/theme-plugin.css +9 -0
package/dist/components/ai/PromptInput/PromptInput.js CHANGED
@@ -455,7 +455,7 @@ className, textareaClassName, footerClassName, theme = {},
455
455
  e.target.value = "";
456
456
  }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, className: mergedTheme.dropzoneStyle, children: [jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)]" }), jsx("p", { className: "text-sm font-medium text-[var(--color-primary)]", children: dropzoneText })] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
457
457
  var _a;
458
- return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-white flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
458
+ return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
459
459
  }) })), jsxs("div", { className: cn("flex gap-2", variant === "simple" ? "items-end" : "items-start"), children: [jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, variant === "simple" && "!w-auto flex-1 min-w-0 justify-center", textareaClassName), style: {
460
460
  minHeight,
461
461
  maxHeight,
package/dist/components/core/Badge/Badge.theme.js CHANGED
@@ -18,13 +18,13 @@ const badgeTheme = {
18
18
  filled: {
19
19
  neutral: "bg-[var(--color-neutral-900)] text-white ring-[var(--color-border)] " +
20
20
  "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
21
- primary: "bg-[var(--color-primary)] text-white ring-[var(--color-primary-400)] " +
21
+ primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-[var(--color-primary-400)] " +
22
22
  "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
23
- success: "bg-[var(--color-success-600)] text-white ring-[var(--color-success-300)] " +
23
+ success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] ring-[var(--color-success-300)] " +
24
24
  "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
25
- warning: "bg-[var(--color-warning)] text-white ring-[var(--color-warning-300)] " +
25
+ warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] ring-[var(--color-warning-300)] " +
26
26
  "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
27
- danger: "bg-[var(--color-danger)] text-white ring-[var(--color-danger-400)] " +
27
+ danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] ring-[var(--color-danger-400)] " +
28
28
  "dark:bg-[var(--color-danger-600)] dark:ring-[var(--color-danger-400)]",
29
29
  },
30
30
  // Outline variant - transparent bg with colored border
package/dist/components/core/Button/Button.theme.js CHANGED
@@ -20,22 +20,22 @@ const buttonTheme = {
20
20
  "focus-visible:outline-[var(--color-neutral-800)] " +
21
21
  "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
22
22
  "dark:hover:bg-[var(--color-neutral-300)]",
23
- primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
23
+ primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] " +
24
24
  "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
25
25
  "focus-visible:outline-[var(--color-primary-600)] " +
26
- "dark:text-white dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
26
+ "dark:text-[var(--color-primary-contrast)] dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
27
27
  "dark:hover:bg-[var(--color-primary-500)]",
28
- success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
28
+ success: "bg-[var(--color-success)] text-[var(--color-success-contrast)] border-[var(--color-success)] " +
29
29
  "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
30
30
  "focus-visible:outline-[var(--color-success-600)] " +
31
31
  "dark:bg-[var(--color-success-700)] dark:border-[var(--color-success-700)] " +
32
32
  "dark:hover:bg-[var(--color-success-600)]",
33
- warning: "bg-[var(--color-warning)] text-white border-[var(--color-warning)] " +
33
+ warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] border-[var(--color-warning)] " +
34
34
  "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
35
35
  "focus-visible:outline-[var(--color-warning-600)] " +
36
36
  "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
37
37
  "dark:hover:bg-[var(--color-warning-500)]",
38
- danger: "bg-[var(--color-danger)] text-white border-[var(--color-danger)] " +
38
+ danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border-[var(--color-danger)] " +
39
39
  "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
40
40
  "focus-visible:outline-[var(--color-danger-600)] " +
41
41
  "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
package/dist/components/core/Calendar/Calendar.theme.js CHANGED
@@ -26,7 +26,7 @@ const calendarTheme = {
26
26
  // Hover state
27
27
  "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
28
28
  // Selected state
29
- "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white " +
29
+ "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
30
30
  "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
31
31
  // Today indicator
32
32
  "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
@@ -38,8 +38,8 @@ const calendarTheme = {
38
38
  "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
39
39
  "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
40
40
  // Range mode states
41
- "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white " +
42
- "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white " +
41
+ "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
42
+ "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
43
43
  "data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)] " +
44
44
  "dark:data-[in-range=true]:bg-[var(--color-primary-900)]/50 dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
45
45
  // Focus offset for dark mode
package/dist/components/core/CommandPalette/CommandPalette.theme.js CHANGED
@@ -18,7 +18,7 @@ const commandPaletteTheme = {
18
18
  commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
19
19
  "hover:bg-[var(--color-primary)] " +
20
20
  "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
21
- "data-[highlighted=true]:text-white " +
21
+ "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
22
22
  "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
23
23
  // Dark mode - adjust hover state
24
24
  "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
package/dist/components/core/MenuItem/MenuItem.theme.js CHANGED
@@ -13,8 +13,8 @@ const menuItemTheme = {
13
13
  "dark:hover:bg-[var(--color-neutral-700)] " +
14
14
  "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
15
15
  // Danger item styling (e.g., Delete actions)
16
- dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
17
- "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
16
+ dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
17
+ "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
18
18
  // Focus visible styling for keyboard navigation
19
19
  focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
20
20
  "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js CHANGED
@@ -13,7 +13,7 @@ const offlineIndicatorTheme = {
13
13
  toast: "px-3 py-2 rounded-[var(--radius-base)] shadow-real-lg",
14
14
  },
15
15
  offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
16
- online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-white",
16
+ online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
17
17
  icon: "size-4 flex-shrink-0",
18
18
  message: "text-xs font-medium",
19
19
  queueCount: "text-xs opacity-80 ml-1",
package/dist/components/core/Progress/Progress.theme.js CHANGED
@@ -11,7 +11,7 @@ const progressTheme = {
11
11
  // Label text styles
12
12
  labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
13
13
  // Inside label styles (when label is positioned inside the bar)
14
- insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-white tabular-nums",
14
+ insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--color-primary-contrast)] tabular-nums",
15
15
  // Size variants for track height
16
16
  sizes: {
17
17
  sm: "h-1.5",
package/dist/components/data-display/Table/TableFilter.js CHANGED
@@ -206,7 +206,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
206
206
  return true;
207
207
  return f.value != null && f.value !== "";
208
208
  }).length;
209
- return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-white text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
209
+ return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
210
210
  ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
211
211
  : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "or"
212
212
  ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
package/dist/components/data-display/Timeline/Timeline.theme.js CHANGED
@@ -19,8 +19,8 @@ const timelineTheme = {
19
19
  markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200",
20
20
  // Marker status-specific styles
21
21
  markerStatuses: {
22
- completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-white",
23
- active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-white ring-4 ring-[var(--color-primary-100)]",
22
+ completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",
23
+ active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-4 ring-[var(--color-primary-100)]",
24
24
  pending: "w-8 h-8 bg-[var(--color-background)] border-[var(--color-border)]",
25
25
  },
26
26
  // Content area - vertical