@nubitio/ui 0.5.20 → 0.5.23

package/dist/index.cjs

@@ -1010,6 +1010,78 @@ const Badge = ({ variant = "primary", size = "md", outlined = false, pill = true
 	});
 };
 //#endregion
+//#region packages/ui/FeatureGate.tsx
+function FeatureGate({ featureKey, children, enabled = false, behavior = "lock", planBadge = "Pro", upgradeMessage, upgradeUrl = "/settings", lockTooltip = "Esta función no está disponible en tu plan actual." }) {
+	if (enabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "feature-gate",
+		children
+	});
+	if (behavior === "upgrade") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UpgradeGate, {
+		planBadge,
+		upgradeMessage,
+		upgradeUrl,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "feature-gate--locked",
+		title: lockTooltip,
+		"aria-label": lockTooltip,
+		role: "presentation",
+		children
+	});
+}
+function UpgradeGate({ planBadge, upgradeMessage, upgradeUrl, children }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const message = upgradeMessage ?? `Esta función requiere el plan ${planBadge}. Actualiza tu plan para desbloquearla.`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "feature-gate--upgrade",
+		onBlur: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false);
+		},
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				role: "button",
+				tabIndex: 0,
+				className: "feature-gate__badge",
+				"aria-expanded": open,
+				onClick: (e) => {
+					e.stopPropagation();
+					setOpen((prev) => !prev);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						setOpen((prev) => !prev);
+					}
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+					variant: "primary",
+					size: "sm",
+					pill: true,
+					children: planBadge
+				})
+			}),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "feature-gate__prompt",
+				role: "dialog",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+						icon: "ph ph-x",
+						label: "Cerrar",
+						onClick: () => setOpen(false)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: message }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						href: upgradeUrl,
+						children: "Ver planes"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
 //#region packages/ui/Skeleton.tsx
 const fmtSize = (v) => v === void 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
 const Skeleton = ({ variant = "rect", width, height, lines = 1, className }) => {
@@ -2611,6 +2683,7 @@ exports.Drawer = Drawer;
 exports.EN_UI_STRINGS = EN_UI_STRINGS;
 exports.ES_UI_STRINGS = ES_UI_STRINGS;
 exports.EmptyState = EmptyState;
+exports.FeatureGate = FeatureGate;
 exports.FileDropzone = FileDropzone;
 exports.FormField = FormField;
 exports.IconButton = IconButton;

package/dist/index.d.cts

@@ -368,6 +368,28 @@ declare const SettingsPanel: ({
   onClose: _onClose
 }: SettingsPanelProps) => React$1.JSX.Element;
 //#endregion
+//#region packages/ui/FeatureGate.d.ts
+interface FeatureGateProps {
+  featureKey: string;
+  children: React$1.ReactNode;
+  enabled?: boolean;
+  behavior?: 'lock' | 'upgrade';
+  planBadge?: string;
+  upgradeMessage?: string;
+  upgradeUrl?: string;
+  lockTooltip?: string;
+}
+declare function FeatureGate({
+  featureKey,
+  children,
+  enabled,
+  behavior,
+  planBadge,
+  upgradeMessage,
+  upgradeUrl,
+  lockTooltip
+}: FeatureGateProps): React$1.JSX.Element;
+//#endregion
 //#region packages/ui/Badge.d.ts
 type BadgeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
 type BadgeSize = 'sm' | 'md';
@@ -879,4 +901,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FeatureGate, type FeatureGateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.d.mts

@@ -368,6 +368,28 @@ declare const SettingsPanel: ({
   onClose: _onClose
 }: SettingsPanelProps) => React$1.JSX.Element;
 //#endregion
+//#region packages/ui/FeatureGate.d.ts
+interface FeatureGateProps {
+  featureKey: string;
+  children: React$1.ReactNode;
+  enabled?: boolean;
+  behavior?: 'lock' | 'upgrade';
+  planBadge?: string;
+  upgradeMessage?: string;
+  upgradeUrl?: string;
+  lockTooltip?: string;
+}
+declare function FeatureGate({
+  featureKey,
+  children,
+  enabled,
+  behavior,
+  planBadge,
+  upgradeMessage,
+  upgradeUrl,
+  lockTooltip
+}: FeatureGateProps): React$1.JSX.Element;
+//#endregion
 //#region packages/ui/Badge.d.ts
 type BadgeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
 type BadgeSize = 'sm' | 'md';
@@ -879,4 +901,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FeatureGate, type FeatureGateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.mjs

@@ -986,6 +986,78 @@ const Badge = ({ variant = "primary", size = "md", outlined = false, pill = true
 	});
 };
 //#endregion
+//#region packages/ui/FeatureGate.tsx
+function FeatureGate({ featureKey, children, enabled = false, behavior = "lock", planBadge = "Pro", upgradeMessage, upgradeUrl = "/settings", lockTooltip = "Esta función no está disponible en tu plan actual." }) {
+	if (enabled) return /* @__PURE__ */ jsx("div", {
+		className: "feature-gate",
+		children
+	});
+	if (behavior === "upgrade") return /* @__PURE__ */ jsx(UpgradeGate, {
+		planBadge,
+		upgradeMessage,
+		upgradeUrl,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "feature-gate--locked",
+		title: lockTooltip,
+		"aria-label": lockTooltip,
+		role: "presentation",
+		children
+	});
+}
+function UpgradeGate({ planBadge, upgradeMessage, upgradeUrl, children }) {
+	const [open, setOpen] = useState(false);
+	const message = upgradeMessage ?? `Esta función requiere el plan ${planBadge}. Actualiza tu plan para desbloquearla.`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "feature-gate--upgrade",
+		onBlur: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false);
+		},
+		children: [
+			children,
+			/* @__PURE__ */ jsx("span", {
+				role: "button",
+				tabIndex: 0,
+				className: "feature-gate__badge",
+				"aria-expanded": open,
+				onClick: (e) => {
+					e.stopPropagation();
+					setOpen((prev) => !prev);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						setOpen((prev) => !prev);
+					}
+				},
+				children: /* @__PURE__ */ jsx(Badge, {
+					variant: "primary",
+					size: "sm",
+					pill: true,
+					children: planBadge
+				})
+			}),
+			open && /* @__PURE__ */ jsxs("div", {
+				className: "feature-gate__prompt",
+				role: "dialog",
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "ph ph-x",
+						label: "Cerrar",
+						onClick: () => setOpen(false)
+					}),
+					/* @__PURE__ */ jsx("p", { children: message }),
+					/* @__PURE__ */ jsx("a", {
+						href: upgradeUrl,
+						children: "Ver planes"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
 //#region packages/ui/Skeleton.tsx
 const fmtSize = (v) => v === void 0 ? void 0 : typeof v === "number" ? `${v}px` : v;
 const Skeleton = ({ variant = "rect", width, height, lines = 1, className }) => {
@@ -2567,4 +2639,4 @@ function Timeline({ variant = "stepper", orientation = "vertical", title, descri
 	});
 }
 //#endregion
-export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FileDropzone, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FeatureGate, FileDropzone, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/style.css

@@ -1401,6 +1401,36 @@ html[data-density=compact] .nb-badge--sm {
   min-height: 14px;
   padding: 0 var(--space-1);
 }
+.feature-gate--locked {
+  opacity: 0.55;
+  pointer-events: none;
+  filter: grayscale(0.2);
+}
+
+.feature-gate--upgrade {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.feature-gate__badge {
+  cursor: pointer;
+}
+
+.feature-gate__prompt {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 20;
+  margin-top: 0.5rem;
+  min-width: 220px;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background: var(--surface-elevated, #fff);
+  border: 1px solid var(--border-subtle, #e5e7eb);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
 @keyframes nb-skeleton-shimmer {
   0% {
     background-position: 200% 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/ui",
-  "version": "0.5.20",
+  "version": "0.5.23",
   "type": "module",
   "description": "Visual primitives and theme system for the Nubit admin stack (dialogs, cards, toolbar, light/dark theme).",
   "license": "MIT",