@nice2dev/icons 1.1.5 → 1.1.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.
- package/CHANGELOG.md +52 -0
- package/dist/cjs/NiceDesktopIconExporter.js +0 -1
- package/dist/cjs/NiceFaviconGenerator.js +0 -1
- package/dist/cjs/NiceIconEditor.js +0 -1
- package/dist/cjs/NiceIconPicker.js +0 -1
- package/dist/cjs/NiceIconPreview.js +0 -1
- package/dist/cjs/NiceIconSetCreator.js +0 -1
- package/dist/cjs/NtdIconBadge.js +0 -1
- package/dist/cjs/NtdIconMorph.js +0 -1
- package/dist/cjs/NtdStateMorph.js +0 -1
- package/dist/cjs/advancedIconSearch.js +0 -1
- package/dist/cjs/animationControls.js +0 -1
- package/dist/cjs/client.js +33 -0
- package/dist/cjs/createIcon.js +0 -1
- package/dist/cjs/design-tokens.js +459 -0
- package/dist/cjs/figmaExport.js +0 -1
- package/dist/cjs/figmaSync.js +0 -1
- package/dist/cjs/headless-ui.js +430 -0
- package/dist/cjs/iconAnalytics.js +0 -1
- package/dist/cjs/iconMetadata.js +0 -1
- package/dist/cjs/iconStyles.js +0 -1
- package/dist/cjs/icons/accessibility.js +0 -1
- package/dist/cjs/icons/actions.js +0 -1
- package/dist/cjs/icons/ai.js +0 -1
- package/dist/cjs/icons/brand.js +0 -1
- package/dist/cjs/icons/business.js +0 -1
- package/dist/cjs/icons/devtech.js +0 -1
- package/dist/cjs/icons/ecommerce.js +0 -1
- package/dist/cjs/icons/education.js +0 -1
- package/dist/cjs/icons/files.js +0 -1
- package/dist/cjs/icons/fintech.js +0 -1
- package/dist/cjs/icons/food.js +0 -1
- package/dist/cjs/icons/fun.js +0 -1
- package/dist/cjs/icons/gaming.js +0 -1
- package/dist/cjs/icons/health.js +0 -1
- package/dist/cjs/icons/index.js +0 -1
- package/dist/cjs/icons/legal.js +0 -1
- package/dist/cjs/icons/media.js +0 -1
- package/dist/cjs/icons/navigation.js +0 -1
- package/dist/cjs/icons/omniverk.js +0 -1
- package/dist/cjs/icons/realestate.js +0 -1
- package/dist/cjs/icons/saas.js +0 -1
- package/dist/cjs/icons/science.js +0 -1
- package/dist/cjs/icons/shapes.js +0 -1
- package/dist/cjs/icons/smarthome.js +0 -1
- package/dist/cjs/icons/social.js +0 -1
- package/dist/cjs/icons/sports.js +0 -1
- package/dist/cjs/icons/sustainability.js +0 -1
- package/dist/cjs/icons/travel.js +0 -1
- package/dist/cjs/icons/ui.js +0 -1
- package/dist/cjs/icons/weather.js +0 -1
- package/dist/cjs/index.js +0 -1
- package/dist/cjs/lottieIntegration.js +0 -1
- package/dist/cjs/particleEffects.js +0 -1
- package/dist/cjs/resolver.js +0 -1
- package/dist/cjs/rsc.js +209 -0
- package/dist/cjs/sharpen.js +0 -1
- package/dist/cjs/smilAnimations.js +0 -1
- package/dist/cjs/tailwind-plugin.js +0 -1
- package/dist/cjs/types.js +0 -1
- package/dist/cjs/utilities.js +401 -0
- package/dist/cjs/variantProps.js +0 -1
- package/dist/esm/NiceDesktopIconExporter.js +0 -1
- package/dist/esm/NiceFaviconGenerator.js +0 -1
- package/dist/esm/NiceIconEditor.js +0 -1
- package/dist/esm/NiceIconPicker.js +0 -1
- package/dist/esm/NiceIconPreview.js +0 -1
- package/dist/esm/NiceIconSetCreator.js +0 -1
- package/dist/esm/NtdIconBadge.js +0 -1
- package/dist/esm/NtdIconMorph.js +0 -1
- package/dist/esm/NtdStateMorph.js +0 -1
- package/dist/esm/advancedIconSearch.js +0 -1
- package/dist/esm/animationControls.js +0 -1
- package/dist/esm/client.js +5 -0
- package/dist/esm/createIcon.js +0 -1
- package/dist/esm/design-tokens.js +446 -0
- package/dist/esm/figmaExport.js +0 -1
- package/dist/esm/figmaSync.js +0 -1
- package/dist/esm/headless-ui.js +413 -0
- package/dist/esm/iconAnalytics.js +0 -1
- package/dist/esm/iconMetadata.js +0 -1
- package/dist/esm/iconStyles.js +0 -1
- package/dist/esm/icons/accessibility.js +0 -1
- package/dist/esm/icons/actions.js +0 -1
- package/dist/esm/icons/ai.js +0 -1
- package/dist/esm/icons/brand.js +0 -1
- package/dist/esm/icons/business.js +0 -1
- package/dist/esm/icons/devtech.js +0 -1
- package/dist/esm/icons/ecommerce.js +0 -1
- package/dist/esm/icons/education.js +0 -1
- package/dist/esm/icons/files.js +0 -1
- package/dist/esm/icons/fintech.js +0 -1
- package/dist/esm/icons/food.js +0 -1
- package/dist/esm/icons/fun.js +0 -1
- package/dist/esm/icons/gaming.js +0 -1
- package/dist/esm/icons/health.js +0 -1
- package/dist/esm/icons/index.js +0 -1
- package/dist/esm/icons/legal.js +0 -1
- package/dist/esm/icons/media.js +0 -1
- package/dist/esm/icons/navigation.js +0 -1
- package/dist/esm/icons/omniverk.js +0 -1
- package/dist/esm/icons/realestate.js +0 -1
- package/dist/esm/icons/saas.js +0 -1
- package/dist/esm/icons/science.js +0 -1
- package/dist/esm/icons/shapes.js +0 -1
- package/dist/esm/icons/smarthome.js +0 -1
- package/dist/esm/icons/social.js +0 -1
- package/dist/esm/icons/sports.js +0 -1
- package/dist/esm/icons/sustainability.js +0 -1
- package/dist/esm/icons/travel.js +0 -1
- package/dist/esm/icons/ui.js +0 -1
- package/dist/esm/icons/weather.js +0 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/lottieIntegration.js +0 -1
- package/dist/esm/particleEffects.js +0 -1
- package/dist/esm/resolver.js +0 -1
- package/dist/esm/rsc.js +201 -0
- package/dist/esm/sharpen.js +0 -1
- package/dist/esm/smilAnimations.js +0 -1
- package/dist/esm/tailwind-plugin.js +0 -1
- package/dist/esm/types.js +0 -1
- package/dist/esm/utilities.js +384 -0
- package/dist/esm/variantProps.js +0 -1
- package/dist/types/headless-ui.d.ts +4 -4
- package/package.json +2 -2
|
@@ -0,0 +1,413 @@
|
|
|
1
|
+
import React, { forwardRef, createElement } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file headless-ui.tsx
|
|
5
|
+
* @description Headless UI / shadcn/ui compatibility layer for @nice2dev/icons
|
|
6
|
+
*
|
|
7
|
+
* Provides seamless integration with:
|
|
8
|
+
* - Radix UI components (via asChild pattern)
|
|
9
|
+
* - Headless UI components
|
|
10
|
+
* - shadcn/ui design system
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* // With shadcn/ui Button
|
|
15
|
+
* import { Button } from '@/components/ui/button';
|
|
16
|
+
* import { NtdSettings } from '@nice2dev/icons';
|
|
17
|
+
* import { forwardRefIcon } from '@nice2dev/icons/headless-ui';
|
|
18
|
+
*
|
|
19
|
+
* const SettingsIcon = forwardRefIcon(NtdSettings);
|
|
20
|
+
*
|
|
21
|
+
* <Button variant="ghost" size="icon" asChild>
|
|
22
|
+
* <SettingsIcon className="h-4 w-4" />
|
|
23
|
+
* </Button>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @version 1.0.0
|
|
27
|
+
* @since 2026-03
|
|
28
|
+
* @license MIT
|
|
29
|
+
*/
|
|
30
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
31
|
+
SLOT IMPLEMENTATION
|
|
32
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
33
|
+
/**
|
|
34
|
+
* Simple Slot implementation for asChild pattern.
|
|
35
|
+
* Compatible with Radix UI's Slot component behavior.
|
|
36
|
+
*/
|
|
37
|
+
const Slot = forwardRef(({ children, ...props }, forwardedRef) => {
|
|
38
|
+
if (!React.isValidElement(children)) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
return React.cloneElement(children, {
|
|
42
|
+
...props,
|
|
43
|
+
...children.props,
|
|
44
|
+
ref: forwardedRef,
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
Slot.displayName = 'Slot';
|
|
48
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
49
|
+
FORWARD REF WRAPPER
|
|
50
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
51
|
+
/**
|
|
52
|
+
* Wraps a NtdIcon component with forwardRef for Headless UI / Radix compatibility.
|
|
53
|
+
* Supports the asChild pattern used by shadcn/ui and Radix primitives.
|
|
54
|
+
*
|
|
55
|
+
* @param IconComponent - The NtdIcon component to wrap
|
|
56
|
+
* @param displayName - Optional display name for debugging
|
|
57
|
+
* @returns A forwardRef-wrapped icon component
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* ```tsx
|
|
61
|
+
* import { NtdUser, NtdSettings } from '@nice2dev/icons';
|
|
62
|
+
* import { forwardRefIcon } from '@nice2dev/icons/headless-ui';
|
|
63
|
+
*
|
|
64
|
+
* // Create ref-compatible versions
|
|
65
|
+
* const UserIcon = forwardRefIcon(NtdUser);
|
|
66
|
+
* const SettingsIcon = forwardRefIcon(NtdSettings, 'SettingsIcon');
|
|
67
|
+
*
|
|
68
|
+
* // Use with Radix UI / shadcn
|
|
69
|
+
* <DropdownMenu.Trigger asChild>
|
|
70
|
+
* <SettingsIcon className="h-5 w-5" />
|
|
71
|
+
* </DropdownMenu.Trigger>
|
|
72
|
+
* ```
|
|
73
|
+
*/
|
|
74
|
+
function forwardRefIcon(IconComponent, displayName) {
|
|
75
|
+
const WrappedIcon = forwardRef(({ asChild, children, ...props }, ref) => {
|
|
76
|
+
if (asChild && React.isValidElement(children)) {
|
|
77
|
+
return createElement(Slot, { ref, ...props }, children);
|
|
78
|
+
}
|
|
79
|
+
return createElement(IconComponent, { ...props, ref });
|
|
80
|
+
});
|
|
81
|
+
WrappedIcon.displayName = displayName || IconComponent.displayName || 'NtdIcon';
|
|
82
|
+
return WrappedIcon;
|
|
83
|
+
}
|
|
84
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
85
|
+
SHADCN/UI PRESET
|
|
86
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
87
|
+
/**
|
|
88
|
+
* shadcn/ui icon size presets matching their button sizes
|
|
89
|
+
*/
|
|
90
|
+
const SHADCN_ICON_SIZES = {
|
|
91
|
+
default: '1rem', // 16px - matches default button text
|
|
92
|
+
sm: '0.875rem', // 14px - matches sm button
|
|
93
|
+
lg: '1.125rem', // 18px - matches lg button
|
|
94
|
+
icon: '1rem', // 16px - for icon-only buttons
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* shadcn/ui color tokens mapping
|
|
98
|
+
*/
|
|
99
|
+
const SHADCN_COLOR_TOKENS = {
|
|
100
|
+
foreground: 'hsl(var(--foreground))',
|
|
101
|
+
mutedForeground: 'hsl(var(--muted-foreground))',
|
|
102
|
+
primary: 'hsl(var(--nice-color-primary))',
|
|
103
|
+
primaryForeground: 'hsl(var(--primary-foreground))',
|
|
104
|
+
secondary: 'hsl(var(--secondary))',
|
|
105
|
+
secondaryForeground: 'hsl(var(--secondary-foreground))',
|
|
106
|
+
accent: 'hsl(var(--nice-color-accent))',
|
|
107
|
+
accentForeground: 'hsl(var(--accent-foreground))',
|
|
108
|
+
destructive: 'hsl(var(--destructive))',
|
|
109
|
+
destructiveForeground: 'hsl(var(--destructive-foreground))',
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* Creates shadcn/ui themed icon props
|
|
113
|
+
*
|
|
114
|
+
* @param variant - shadcn button variant
|
|
115
|
+
* @param size - shadcn button size
|
|
116
|
+
* @returns Props object for the icon
|
|
117
|
+
*/
|
|
118
|
+
function getShadcnIconProps(variant = 'default', size = 'default') {
|
|
119
|
+
const colorMap = {
|
|
120
|
+
default: SHADCN_COLOR_TOKENS.primaryForeground,
|
|
121
|
+
destructive: SHADCN_COLOR_TOKENS.destructiveForeground,
|
|
122
|
+
outline: SHADCN_COLOR_TOKENS.foreground,
|
|
123
|
+
secondary: SHADCN_COLOR_TOKENS.secondaryForeground,
|
|
124
|
+
ghost: SHADCN_COLOR_TOKENS.foreground,
|
|
125
|
+
link: SHADCN_COLOR_TOKENS.primary,
|
|
126
|
+
};
|
|
127
|
+
return {
|
|
128
|
+
size: SHADCN_ICON_SIZES[size],
|
|
129
|
+
color: colorMap[variant] || SHADCN_COLOR_TOKENS.foreground,
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* Preset shadcn/ui className utilities for icons
|
|
134
|
+
*/
|
|
135
|
+
const shadcnIconClasses = {
|
|
136
|
+
/** Standard icon in button */
|
|
137
|
+
button: 'h-4 w-4',
|
|
138
|
+
/** Icon with right margin (before text) */
|
|
139
|
+
buttonLeft: 'mr-2 h-4 w-4',
|
|
140
|
+
/** Icon with left margin (after text) */
|
|
141
|
+
buttonRight: 'ml-2 h-4 w-4',
|
|
142
|
+
/** Small icon */
|
|
143
|
+
sm: 'h-3.5 w-3.5',
|
|
144
|
+
/** Large icon */
|
|
145
|
+
lg: 'h-5 w-5',
|
|
146
|
+
/** Icon-only button */
|
|
147
|
+
iconOnly: 'h-4 w-4',
|
|
148
|
+
/** Navigation menu icon */
|
|
149
|
+
nav: 'h-4 w-4 shrink-0',
|
|
150
|
+
/** Dropdown menu icon */
|
|
151
|
+
dropdown: 'mr-2 h-4 w-4',
|
|
152
|
+
/** Alert/toast icon */
|
|
153
|
+
alert: 'h-4 w-4',
|
|
154
|
+
/** Badge icon */
|
|
155
|
+
badge: 'h-3 w-3',
|
|
156
|
+
/** Card header icon */
|
|
157
|
+
card: 'h-5 w-5 text-muted-foreground',
|
|
158
|
+
/** Spinner/loading */
|
|
159
|
+
spinner: 'h-4 w-4 animate-spin',
|
|
160
|
+
};
|
|
161
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
162
|
+
RADIX UI HELPERS
|
|
163
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
164
|
+
/**
|
|
165
|
+
* Creates an icon component compatible with Radix UI primitives.
|
|
166
|
+
* Automatically handles ref forwarding and asChild pattern.
|
|
167
|
+
*
|
|
168
|
+
* @param IconComponent - The NtdIcon component
|
|
169
|
+
* @param defaultProps - Default props to apply
|
|
170
|
+
* @returns Radix-compatible icon component
|
|
171
|
+
*
|
|
172
|
+
* @example
|
|
173
|
+
* ```tsx
|
|
174
|
+
* import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
175
|
+
* import { NtdChevronDown } from '@nice2dev/icons';
|
|
176
|
+
* import { createRadixIcon } from '@nice2dev/icons/headless-ui';
|
|
177
|
+
*
|
|
178
|
+
* const ChevronIcon = createRadixIcon(NtdChevronDown, {
|
|
179
|
+
* className: 'h-4 w-4 text-muted-foreground'
|
|
180
|
+
* });
|
|
181
|
+
*
|
|
182
|
+
* <DropdownMenu.Trigger>
|
|
183
|
+
* Options <ChevronIcon />
|
|
184
|
+
* </DropdownMenu.Trigger>
|
|
185
|
+
* ```
|
|
186
|
+
*/
|
|
187
|
+
function createRadixIcon(IconComponent, defaultProps = {}) {
|
|
188
|
+
const RadixIcon = forwardRef((props, ref) => {
|
|
189
|
+
const mergedProps = { ...defaultProps, ...props };
|
|
190
|
+
return createElement(IconComponent, { ...mergedProps, ref });
|
|
191
|
+
});
|
|
192
|
+
RadixIcon.displayName = `Radix${IconComponent.displayName || 'Icon'}`;
|
|
193
|
+
return RadixIcon;
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* HOC that adds Radix UI state-based styling to icons.
|
|
197
|
+
* Supports data-state attributes for open/closed states.
|
|
198
|
+
*
|
|
199
|
+
* @param IconComponent - The icon component to enhance
|
|
200
|
+
* @returns Enhanced icon with state-aware styling
|
|
201
|
+
*
|
|
202
|
+
* @example
|
|
203
|
+
* ```tsx
|
|
204
|
+
* const StateAwareChevron = withRadixState(NtdChevronDown);
|
|
205
|
+
*
|
|
206
|
+
* // Automatically rotates when parent has data-state="open"
|
|
207
|
+
* <Collapsible.Trigger>
|
|
208
|
+
* <StateAwareChevron />
|
|
209
|
+
* </Collapsible.Trigger>
|
|
210
|
+
* ```
|
|
211
|
+
*/
|
|
212
|
+
function withRadixState(IconComponent) {
|
|
213
|
+
const StateIcon = forwardRef(({ className, style, ...props }, ref) => {
|
|
214
|
+
const stateStyles = {
|
|
215
|
+
transition: 'transform 200ms ease',
|
|
216
|
+
...style,
|
|
217
|
+
};
|
|
218
|
+
// Add CSS for data-state rotation
|
|
219
|
+
const stateClassName = `${className || ''} data-[state=open]:rotate-180`.trim();
|
|
220
|
+
return createElement(IconComponent, {
|
|
221
|
+
...props,
|
|
222
|
+
ref,
|
|
223
|
+
className: stateClassName,
|
|
224
|
+
style: stateStyles,
|
|
225
|
+
});
|
|
226
|
+
});
|
|
227
|
+
StateIcon.displayName = `StateAware${IconComponent.displayName || 'Icon'}`;
|
|
228
|
+
return StateIcon;
|
|
229
|
+
}
|
|
230
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
231
|
+
HEADLESS UI HELPERS
|
|
232
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
233
|
+
/**
|
|
234
|
+
* Transition presets for Headless UI Transition component with icons.
|
|
235
|
+
*/
|
|
236
|
+
const headlessTransitions = {
|
|
237
|
+
/** Fade in/out */
|
|
238
|
+
fade: {
|
|
239
|
+
enter: 'transition-opacity duration-150 ease-out',
|
|
240
|
+
enterFrom: 'opacity-0',
|
|
241
|
+
enterTo: 'opacity-100',
|
|
242
|
+
leave: 'transition-opacity duration-100 ease-in',
|
|
243
|
+
leaveFrom: 'opacity-100',
|
|
244
|
+
leaveTo: 'opacity-0',
|
|
245
|
+
},
|
|
246
|
+
/** Scale up/down */
|
|
247
|
+
scale: {
|
|
248
|
+
enter: 'transition-transform duration-150 ease-out',
|
|
249
|
+
enterFrom: 'scale-75',
|
|
250
|
+
enterTo: 'scale-100',
|
|
251
|
+
leave: 'transition-transform duration-100 ease-in',
|
|
252
|
+
leaveFrom: 'scale-100',
|
|
253
|
+
leaveTo: 'scale-75',
|
|
254
|
+
},
|
|
255
|
+
/** Rotate */
|
|
256
|
+
rotate: {
|
|
257
|
+
enter: 'transition-transform duration-200 ease-out',
|
|
258
|
+
enterFrom: 'rotate-0',
|
|
259
|
+
enterTo: 'rotate-180',
|
|
260
|
+
leave: 'transition-transform duration-200 ease-in',
|
|
261
|
+
leaveFrom: 'rotate-180',
|
|
262
|
+
leaveTo: 'rotate-0',
|
|
263
|
+
},
|
|
264
|
+
/** Spin (for loading) */
|
|
265
|
+
spin: {
|
|
266
|
+
enter: 'animate-spin',
|
|
267
|
+
enterFrom: '',
|
|
268
|
+
enterTo: '',
|
|
269
|
+
leave: '',
|
|
270
|
+
leaveFrom: '',
|
|
271
|
+
leaveTo: '',
|
|
272
|
+
},
|
|
273
|
+
};
|
|
274
|
+
/**
|
|
275
|
+
* Creates a Headless UI compatible icon with transition support.
|
|
276
|
+
*
|
|
277
|
+
* @param IconComponent - The icon component
|
|
278
|
+
* @param transition - Transition preset name
|
|
279
|
+
* @returns Icon component with transition classes
|
|
280
|
+
*/
|
|
281
|
+
function createHeadlessIcon(IconComponent, transition = 'fade') {
|
|
282
|
+
const HeadlessIcon = ({ show = true, className, ...props }) => {
|
|
283
|
+
const t = headlessTransitions[transition];
|
|
284
|
+
const transitionClass = show ? `${t.enter} ${t.enterTo}` : `${t.leave} ${t.leaveTo}`;
|
|
285
|
+
return createElement(IconComponent, {
|
|
286
|
+
...props,
|
|
287
|
+
className: `${className || ''} ${transitionClass}`.trim(),
|
|
288
|
+
});
|
|
289
|
+
};
|
|
290
|
+
HeadlessIcon.displayName = `Headless${IconComponent.displayName || 'Icon'}`;
|
|
291
|
+
return HeadlessIcon;
|
|
292
|
+
}
|
|
293
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
294
|
+
ICON BUTTON PRESETS
|
|
295
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
296
|
+
/**
|
|
297
|
+
* Props generator for common icon button patterns in shadcn/ui.
|
|
298
|
+
*/
|
|
299
|
+
const iconButtonPresets = {
|
|
300
|
+
/**
|
|
301
|
+
* Close button (X icon)
|
|
302
|
+
*/
|
|
303
|
+
close: {
|
|
304
|
+
className: 'rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
|
|
305
|
+
size: 16,
|
|
306
|
+
},
|
|
307
|
+
/**
|
|
308
|
+
* Chevron (accordion, collapsible)
|
|
309
|
+
*/
|
|
310
|
+
chevron: {
|
|
311
|
+
className: 'h-4 w-4 shrink-0 transition-transform duration-200',
|
|
312
|
+
'data-chevron': true,
|
|
313
|
+
},
|
|
314
|
+
/**
|
|
315
|
+
* Menu trigger
|
|
316
|
+
*/
|
|
317
|
+
menuTrigger: {
|
|
318
|
+
className: 'h-5 w-5',
|
|
319
|
+
strokeWidth: 1.5,
|
|
320
|
+
},
|
|
321
|
+
/**
|
|
322
|
+
* Navigation item icon
|
|
323
|
+
*/
|
|
324
|
+
navItem: {
|
|
325
|
+
className: 'mr-2 h-4 w-4 shrink-0',
|
|
326
|
+
},
|
|
327
|
+
/**
|
|
328
|
+
* Sidebar icon
|
|
329
|
+
*/
|
|
330
|
+
sidebar: {
|
|
331
|
+
className: 'h-4 w-4',
|
|
332
|
+
strokeWidth: 2,
|
|
333
|
+
},
|
|
334
|
+
/**
|
|
335
|
+
* Toast icon
|
|
336
|
+
*/
|
|
337
|
+
toast: {
|
|
338
|
+
className: 'h-5 w-5',
|
|
339
|
+
},
|
|
340
|
+
/**
|
|
341
|
+
* Dialog icon
|
|
342
|
+
*/
|
|
343
|
+
dialog: {
|
|
344
|
+
className: 'h-4 w-4 opacity-70',
|
|
345
|
+
},
|
|
346
|
+
};
|
|
347
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
348
|
+
UTILITY FUNCTIONS
|
|
349
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
350
|
+
/**
|
|
351
|
+
* Merges icon props with shadcn/ui defaults.
|
|
352
|
+
*
|
|
353
|
+
* @param props - User-provided props
|
|
354
|
+
* @param preset - Preset name from iconButtonPresets
|
|
355
|
+
* @returns Merged props
|
|
356
|
+
*/
|
|
357
|
+
function mergeIconProps(props, preset) {
|
|
358
|
+
const presetProps = iconButtonPresets[preset];
|
|
359
|
+
return {
|
|
360
|
+
...presetProps,
|
|
361
|
+
...props,
|
|
362
|
+
className: `${presetProps.className || ''} ${props.className || ''}`.trim(),
|
|
363
|
+
};
|
|
364
|
+
}
|
|
365
|
+
/**
|
|
366
|
+
* Creates a className string for icons based on variant and size.
|
|
367
|
+
*
|
|
368
|
+
* @param options - Styling options
|
|
369
|
+
* @returns Tailwind className string
|
|
370
|
+
*/
|
|
371
|
+
function getIconClassName(options = {}) {
|
|
372
|
+
const { variant = 'default', size = 'md', interactive = false, spinning = false } = options;
|
|
373
|
+
const sizeMap = {
|
|
374
|
+
xs: 'h-3 w-3',
|
|
375
|
+
sm: 'h-3.5 w-3.5',
|
|
376
|
+
md: 'h-4 w-4',
|
|
377
|
+
lg: 'h-5 w-5',
|
|
378
|
+
xl: 'h-6 w-6',
|
|
379
|
+
};
|
|
380
|
+
const variantMap = {
|
|
381
|
+
default: '',
|
|
382
|
+
muted: 'text-muted-foreground',
|
|
383
|
+
primary: 'text-primary',
|
|
384
|
+
destructive: 'text-destructive',
|
|
385
|
+
};
|
|
386
|
+
const classes = [
|
|
387
|
+
sizeMap[size],
|
|
388
|
+
variantMap[variant],
|
|
389
|
+
interactive && 'transition-colors hover:text-foreground cursor-pointer',
|
|
390
|
+
spinning && 'animate-spin',
|
|
391
|
+
].filter(Boolean);
|
|
392
|
+
return classes.join(' ');
|
|
393
|
+
}
|
|
394
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
395
|
+
EXPORTS
|
|
396
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
397
|
+
var headlessUi = {
|
|
398
|
+
forwardRefIcon,
|
|
399
|
+
createRadixIcon,
|
|
400
|
+
withRadixState,
|
|
401
|
+
createHeadlessIcon,
|
|
402
|
+
getShadcnIconProps,
|
|
403
|
+
mergeIconProps,
|
|
404
|
+
getIconClassName,
|
|
405
|
+
Slot,
|
|
406
|
+
SHADCN_ICON_SIZES,
|
|
407
|
+
SHADCN_COLOR_TOKENS,
|
|
408
|
+
shadcnIconClasses,
|
|
409
|
+
headlessTransitions,
|
|
410
|
+
iconButtonPresets,
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
export { SHADCN_COLOR_TOKENS, SHADCN_ICON_SIZES, Slot, createHeadlessIcon, createRadixIcon, headlessUi as default, forwardRefIcon, getIconClassName, getShadcnIconProps, headlessTransitions, iconButtonPresets, mergeIconProps, shadcnIconClasses, withRadixState };
|
package/dist/esm/iconMetadata.js
CHANGED
|
@@ -512,4 +512,3 @@ function initializeIconMetadata(icons, metadata) {
|
|
|
512
512
|
}
|
|
513
513
|
|
|
514
514
|
export { ACTION_ICON_METADATA, CATEGORY_INFO, UI_ICON_METADATA, getAllIcons, getCategoryCounts, getIcon, getIconMetadata, getIconsByCategory, getSearchSuggestions, initializeIconMetadata, registerIcon, searchIcons };
|
|
515
|
-
//# sourceMappingURL=iconMetadata.js.map
|
package/dist/esm/iconStyles.js
CHANGED
|
@@ -630,4 +630,3 @@ const NtdIconGeometric = forwardRef(({ children, animate = true, duration = 8, i
|
|
|
630
630
|
NtdIconGeometric.displayName = 'NtdIconGeometric';
|
|
631
631
|
|
|
632
632
|
export { NtdIconCosmic, NtdIconFestive, NtdIconFloral, NtdIconFrost, NtdIconGeometric, NtdIconNeon, NtdIconOrganic, NtdIconPixel, NtdIconSketch, NtdIconSteampunk, NtdIconWatercolor };
|
|
633
|
-
//# sourceMappingURL=iconStyles.js.map
|
|
@@ -163,4 +163,3 @@ const accessibilityIcons = {
|
|
|
163
163
|
};
|
|
164
164
|
|
|
165
165
|
export { NtdAccessibility, NtdAssistiveTech, NtdAudioDescription, NtdBlind, NtdBraille, NtdClosedCaptions, NtdDeaf, NtdDyslexia, NtdEasyRead, NtdHearingAid, NtdScreenReader, NtdSignLanguage, NtdWheelchair, accessibilityIcons };
|
|
166
|
-
//# sourceMappingURL=accessibility.js.map
|
|
@@ -265,4 +265,3 @@ const NtdUnlock = createIcon({
|
|
|
265
265
|
});
|
|
266
266
|
|
|
267
267
|
export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdFilter, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut };
|
|
268
|
-
//# sourceMappingURL=actions.js.map
|
package/dist/esm/icons/ai.js
CHANGED
|
@@ -186,4 +186,3 @@ const aiIcons = {
|
|
|
186
186
|
};
|
|
187
187
|
|
|
188
188
|
export { NtdBrain, NtdChatbot, NtdDataset, NtdDeepLearning, NtdGradient, NtdInference, NtdMagicWand, NtdModel, NtdNeuralNetwork, NtdPrompt, NtdRobot, NtdSparkle, NtdTensor, NtdTraining, NtdVoiceAssistant, aiIcons };
|
|
189
|
-
//# sourceMappingURL=ai.js.map
|
package/dist/esm/icons/brand.js
CHANGED
|
@@ -254,4 +254,3 @@ const NtdMilestone = createIcon({
|
|
|
254
254
|
});
|
|
255
255
|
|
|
256
256
|
export { NtdBank, NtdBarcode, NtdBriefcase, NtdCalculator, NtdClipboardCheck, NtdCoins, NtdDollar, NtdInvoice, NtdKanban, NtdMilestone, NtdPercent, NtdPiggyBank, NtdPresentation, NtdReceipt, NtdStore, NtdTrendDown, NtdTrendUp, NtdWallet };
|
|
257
|
-
//# sourceMappingURL=business.js.map
|
|
@@ -395,4 +395,3 @@ const NtdSolidJsLogo = createIcon({
|
|
|
395
395
|
});
|
|
396
396
|
|
|
397
397
|
export { NtdAIBrain, NtdAstroLogo, NtdBattery, NtdBlueprint, NtdBrackets, NtdBugDev, NtdBunLogo, NtdComponent, NtdDataMesh, NtdDenoLogo, NtdDeploy, NtdFeatureFlag, NtdFlow, NtdForge, NtdGateway, NtdGitBranch, NtdGitCommit, NtdGitMerge, NtdHash, NtdNeural, NtdNextJsLogo, NtdNodes, NtdPipeline, NtdPrototype, NtdQwikLogo, NtdServer, NtdSlash, NtdSolidJsLogo, NtdSvelteLogo, NtdTauriLogo, NtdViteLogo };
|
|
398
|
-
//# sourceMappingURL=devtech.js.map
|
|
@@ -167,4 +167,3 @@ const NtdRefund = createIcon({
|
|
|
167
167
|
});
|
|
168
168
|
|
|
169
169
|
export { NtdCartAdd, NtdCartRemove, NtdCheckout, NtdCompare, NtdCoupon, NtdDiscount, NtdGiftCard, NtdInvoiceDoc, NtdPayment, NtdPromoTag, NtdRefund, NtdReturn, NtdShipping, NtdShoppingCart, NtdStorefront, NtdWishlist };
|
|
170
|
-
//# sourceMappingURL=ecommerce.js.map
|
|
@@ -207,4 +207,3 @@ const educationIcons = {
|
|
|
207
207
|
};
|
|
208
208
|
|
|
209
209
|
export { NtdBackpack, NtdBook, NtdCalculator, NtdCertificate, NtdDiploma, NtdExam, NtdFlashcard, NtdGraduationCap, NtdNotebook, NtdOnlineCourse, NtdOpenBook, NtdPen, NtdPencil, NtdQuiz, NtdSchool, NtdUniversity, NtdWebinar, educationIcons };
|
|
210
|
-
//# sourceMappingURL=education.js.map
|
package/dist/esm/icons/files.js
CHANGED
|
@@ -313,4 +313,3 @@ const NtdTruck = createIcon({
|
|
|
313
313
|
});
|
|
314
314
|
|
|
315
315
|
export { NtdActivity, NtdArchive, NtdAward, NtdBarChart, NtdCart, NtdCloud, NtdCloudDownload, NtdCloudUpload, NtdCode, NtdCoffee, NtdCpu, NtdCreditCard, NtdDatabase, NtdFile, NtdFileText, NtdFolder, NtdFolderOpen, NtdGit, NtdGrid, NtdKey, NtdLayers, NtdList, NtdMonitor, NtdPackage, NtdPieChart, NtdSmartphone, NtdTable, NtdTarget, NtdTerminal, NtdTruck, NtdZap };
|
|
316
|
-
//# sourceMappingURL=files.js.map
|
|
@@ -147,4 +147,3 @@ const NtdAirdrop = createIcon({
|
|
|
147
147
|
});
|
|
148
148
|
|
|
149
149
|
export { NtdAirdrop, NtdBitcoin, NtdBlockchain, NtdCryptoWallet, NtdDeFi, NtdEthereum, NtdExchange, NtdGasFee, NtdLedger, NtdMining, NtdNFT, NtdSmartContract, NtdStaking, NtdToken };
|
|
150
|
-
//# sourceMappingURL=fintech.js.map
|
package/dist/esm/icons/food.js
CHANGED
|
@@ -193,4 +193,3 @@ const foodIcons = {
|
|
|
193
193
|
};
|
|
194
194
|
|
|
195
195
|
export { NtdBeer, NtdBurger, NtdChefHat, NtdCocktail, NtdCoffee, NtdDelivery, NtdForkKnife, NtdHotdog, NtdPizza, NtdPlate, NtdRecipe, NtdRestaurant, NtdSoda, NtdSushi, NtdTaco, NtdWine, foodIcons };
|
|
196
|
-
//# sourceMappingURL=food.js.map
|
package/dist/esm/icons/fun.js
CHANGED
package/dist/esm/icons/gaming.js
CHANGED
|
@@ -186,4 +186,3 @@ const gamingIcons = {
|
|
|
186
186
|
};
|
|
187
187
|
|
|
188
188
|
export { NtdDice, NtdDiscord, NtdGamepad, NtdHealthBar, NtdJoystick, NtdLeaderboard, NtdPotion, NtdShield, NtdStar, NtdSword, NtdTrophy, NtdTwitch, NtdVrHeadset, NtdXpBar, NtdYoutubeLive, gamingIcons };
|
|
189
|
-
//# sourceMappingURL=gaming.js.map
|
package/dist/esm/icons/health.js
CHANGED
package/dist/esm/icons/index.js
CHANGED
|
@@ -29,4 +29,3 @@ export { NtdBasketball, NtdCycling, NtdDumbbell, NtdGolf, NtdMedal, NtdPodium, N
|
|
|
29
29
|
export { NtdAlert, NtdAlertBell, NtdFood, NtdGym, NtdInsurance, NtdLab, NtdMeal, NtdProduct, NtdProject, NtdShipment, NtdTax, NtdWorkflow } from './omniverk.js';
|
|
30
30
|
|
|
31
31
|
// Navigation
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
package/dist/esm/icons/legal.js
CHANGED
|
@@ -163,4 +163,3 @@ const legalIcons = {
|
|
|
163
163
|
};
|
|
164
164
|
|
|
165
165
|
export { NtdAudit, NtdCcpa, NtdCertified, NtdCompliance, NtdContract, NtdCookieConsent, NtdCopyright, NtdGdpr, NtdLegalDocument, NtdPatent, NtdPrivacyPolicy, NtdTermsOfService, NtdTrademark, legalIcons };
|
|
166
|
-
//# sourceMappingURL=legal.js.map
|
package/dist/esm/icons/media.js
CHANGED
|
@@ -243,4 +243,3 @@ const NtdSpline = createIcon({
|
|
|
243
243
|
});
|
|
244
244
|
|
|
245
245
|
export { NtdBluetooth, NtdBrush, NtdCamera, NtdChat, NtdImage, NtdMail, NtdMicrophone, NtdMusic, NtdNotification, NtdPalette, NtdPause, NtdPenTool, NtdPhone, NtdPlay, NtdSend, NtdSkipBack, NtdSkipForward, NtdSpline, NtdStop, NtdVideo, NtdVolume, NtdVolumeMute, NtdWifi };
|
|
246
|
-
//# sourceMappingURL=media.js.map
|
|
@@ -143,4 +143,3 @@ const NtdRefresh = createIcon({
|
|
|
143
143
|
});
|
|
144
144
|
|
|
145
145
|
export { NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdArrowUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdChevronUp, NtdClose, NtdExternalLink, NtdMenu, NtdMoreHorizontal, NtdMoreVertical, NtdRefresh };
|
|
146
|
-
//# sourceMappingURL=navigation.js.map
|
|
@@ -207,4 +207,3 @@ const realestateIcons = {
|
|
|
207
207
|
};
|
|
208
208
|
|
|
209
209
|
export { NtdApartment, NtdBathroom, NtdBedroom, NtdCondo, NtdFloorPlan, NtdForRent, NtdForSale, NtdGarage, NtdHouse, NtdKey, NtdMortgage, NtdOfficeBuilding, NtdPool, NtdSold, NtdSquareMeters, NtdVilla, NtdWarehouse, realestateIcons };
|
|
210
|
-
//# sourceMappingURL=realestate.js.map
|
package/dist/esm/icons/saas.js
CHANGED
|
@@ -203,4 +203,3 @@ const scienceIcons = {
|
|
|
203
203
|
};
|
|
204
204
|
|
|
205
205
|
export { NtdAtom, NtdBeaker, NtdDna, NtdExperiment, NtdFlask, NtdHypothesis, NtdMagnet, NtdMicroscope, NtdMolecule, NtdPeriodictable, NtdPetriDish, NtdPlanet, NtdResearch, NtdRocket, NtdTelescope, NtdTestTube, scienceIcons };
|
|
206
|
-
//# sourceMappingURL=science.js.map
|
package/dist/esm/icons/shapes.js
CHANGED
|
@@ -223,4 +223,3 @@ const NtdShuffle = createIcon({
|
|
|
223
223
|
});
|
|
224
224
|
|
|
225
225
|
export { NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMinimize, NtdMove, NtdOctagon, NtdPentagon, NtdRepeat, NtdShuffle, NtdSquare, NtdStar4, NtdTriangle };
|
|
226
|
-
//# sourceMappingURL=shapes.js.map
|
|
@@ -137,4 +137,3 @@ const NtdSmartSpeaker = createIcon({
|
|
|
137
137
|
});
|
|
138
138
|
|
|
139
139
|
export { NtdDoorbell, NtdMotionSensor, NtdRouter, NtdSmartBulb, NtdSmartCamera, NtdSmartHub, NtdSmartLock, NtdSmartPlug, NtdSmartSpeaker, NtdSmartSwitch, NtdTemperatureSensor, NtdThermostat, NtdVoiceAssistant };
|
|
140
|
-
//# sourceMappingURL=smarthome.js.map
|
package/dist/esm/icons/social.js
CHANGED
package/dist/esm/icons/sports.js
CHANGED
|
@@ -171,4 +171,3 @@ const sportsIcons = {
|
|
|
171
171
|
};
|
|
172
172
|
|
|
173
173
|
export { NtdBasketball, NtdCycling, NtdDumbbell, NtdGolf, NtdMedal, NtdPodium, NtdRunning, NtdSoccerBall, NtdStopwatch, NtdSwimming, NtdTarget, NtdTennis, NtdWhistle, NtdYoga, sportsIcons };
|
|
174
|
-
//# sourceMappingURL=sports.js.map
|
|
@@ -188,4 +188,3 @@ const sustainabilityIcons = {
|
|
|
188
188
|
};
|
|
189
189
|
|
|
190
190
|
export { NtdBiodegradable, NtdCarbonFootprint, NtdCo2, NtdCompost, NtdEcoFriendly, NtdEvCharger, NtdHydropower, NtdNetZero, NtdOrganic, NtdPlantTree, NtdRecycle, NtdSolarPanel, NtdTrashSort, NtdWildlife, NtdWindTurbine, sustainabilityIcons };
|
|
191
|
-
//# sourceMappingURL=sustainability.js.map
|
package/dist/esm/icons/travel.js
CHANGED
package/dist/esm/icons/ui.js
CHANGED
|
@@ -288,4 +288,3 @@ const NtdWireframe = createIcon({
|
|
|
288
288
|
});
|
|
289
289
|
|
|
290
290
|
export { NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe };
|
|
291
|
-
//# sourceMappingURL=ui.js.map
|
|
@@ -216,4 +216,3 @@ const NtdBug = createIcon({
|
|
|
216
216
|
});
|
|
217
217
|
|
|
218
218
|
export { NtdAnchor, NtdBug, NtdCompass, NtdDroplet, NtdFeather, NtdFire, NtdFlower, NtdLeaf, NtdMountain, NtdRain, NtdSnow, NtdSnowflake, NtdSunrise, NtdSunset, NtdThermometer, NtdThunderstorm, NtdTree, NtdUmbrella, NtdWave, NtdWind };
|
|
219
|
-
//# sourceMappingURL=weather.js.map
|
package/dist/esm/index.js
CHANGED
|
@@ -51,4 +51,3 @@ export { NtdLottieIcon, exportToLottie, lottieToIcon } from './lottieIntegration
|
|
|
51
51
|
export { NtdParticleIcon } from './particleEffects.js';
|
|
52
52
|
export { FigmaSyncManager, createFigmaSyncManager, diffIconSets } from './figmaSync.js';
|
|
53
53
|
export { NtdIconCosmic, NtdIconFestive, NtdIconFloral, NtdIconFrost, NtdIconGeometric, NtdIconNeon, NtdIconOrganic, NtdIconPixel, NtdIconSketch, NtdIconSteampunk, NtdIconWatercolor } from './iconStyles.js';
|
|
54
|
-
//# sourceMappingURL=index.js.map
|
package/dist/esm/resolver.js
CHANGED