@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,430 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @file headless-ui.tsx
|
|
9
|
+
* @description Headless UI / shadcn/ui compatibility layer for @nice2dev/icons
|
|
10
|
+
*
|
|
11
|
+
* Provides seamless integration with:
|
|
12
|
+
* - Radix UI components (via asChild pattern)
|
|
13
|
+
* - Headless UI components
|
|
14
|
+
* - shadcn/ui design system
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* // With shadcn/ui Button
|
|
19
|
+
* import { Button } from '@/components/ui/button';
|
|
20
|
+
* import { NtdSettings } from '@nice2dev/icons';
|
|
21
|
+
* import { forwardRefIcon } from '@nice2dev/icons/headless-ui';
|
|
22
|
+
*
|
|
23
|
+
* const SettingsIcon = forwardRefIcon(NtdSettings);
|
|
24
|
+
*
|
|
25
|
+
* <Button variant="ghost" size="icon" asChild>
|
|
26
|
+
* <SettingsIcon className="h-4 w-4" />
|
|
27
|
+
* </Button>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @version 1.0.0
|
|
31
|
+
* @since 2026-03
|
|
32
|
+
* @license MIT
|
|
33
|
+
*/
|
|
34
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
35
|
+
SLOT IMPLEMENTATION
|
|
36
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
37
|
+
/**
|
|
38
|
+
* Simple Slot implementation for asChild pattern.
|
|
39
|
+
* Compatible with Radix UI's Slot component behavior.
|
|
40
|
+
*/
|
|
41
|
+
const Slot = React.forwardRef(({ children, ...props }, forwardedRef) => {
|
|
42
|
+
if (!React.isValidElement(children)) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
return React.cloneElement(children, {
|
|
46
|
+
...props,
|
|
47
|
+
...children.props,
|
|
48
|
+
ref: forwardedRef,
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
Slot.displayName = 'Slot';
|
|
52
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
53
|
+
FORWARD REF WRAPPER
|
|
54
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
55
|
+
/**
|
|
56
|
+
* Wraps a NtdIcon component with forwardRef for Headless UI / Radix compatibility.
|
|
57
|
+
* Supports the asChild pattern used by shadcn/ui and Radix primitives.
|
|
58
|
+
*
|
|
59
|
+
* @param IconComponent - The NtdIcon component to wrap
|
|
60
|
+
* @param displayName - Optional display name for debugging
|
|
61
|
+
* @returns A forwardRef-wrapped icon component
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```tsx
|
|
65
|
+
* import { NtdUser, NtdSettings } from '@nice2dev/icons';
|
|
66
|
+
* import { forwardRefIcon } from '@nice2dev/icons/headless-ui';
|
|
67
|
+
*
|
|
68
|
+
* // Create ref-compatible versions
|
|
69
|
+
* const UserIcon = forwardRefIcon(NtdUser);
|
|
70
|
+
* const SettingsIcon = forwardRefIcon(NtdSettings, 'SettingsIcon');
|
|
71
|
+
*
|
|
72
|
+
* // Use with Radix UI / shadcn
|
|
73
|
+
* <DropdownMenu.Trigger asChild>
|
|
74
|
+
* <SettingsIcon className="h-5 w-5" />
|
|
75
|
+
* </DropdownMenu.Trigger>
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
function forwardRefIcon(IconComponent, displayName) {
|
|
79
|
+
const WrappedIcon = React.forwardRef(({ asChild, children, ...props }, ref) => {
|
|
80
|
+
if (asChild && React.isValidElement(children)) {
|
|
81
|
+
return React.createElement(Slot, { ref, ...props }, children);
|
|
82
|
+
}
|
|
83
|
+
return React.createElement(IconComponent, { ...props, ref });
|
|
84
|
+
});
|
|
85
|
+
WrappedIcon.displayName = displayName || IconComponent.displayName || 'NtdIcon';
|
|
86
|
+
return WrappedIcon;
|
|
87
|
+
}
|
|
88
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
89
|
+
SHADCN/UI PRESET
|
|
90
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
91
|
+
/**
|
|
92
|
+
* shadcn/ui icon size presets matching their button sizes
|
|
93
|
+
*/
|
|
94
|
+
const SHADCN_ICON_SIZES = {
|
|
95
|
+
default: '1rem', // 16px - matches default button text
|
|
96
|
+
sm: '0.875rem', // 14px - matches sm button
|
|
97
|
+
lg: '1.125rem', // 18px - matches lg button
|
|
98
|
+
icon: '1rem', // 16px - for icon-only buttons
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* shadcn/ui color tokens mapping
|
|
102
|
+
*/
|
|
103
|
+
const SHADCN_COLOR_TOKENS = {
|
|
104
|
+
foreground: 'hsl(var(--foreground))',
|
|
105
|
+
mutedForeground: 'hsl(var(--muted-foreground))',
|
|
106
|
+
primary: 'hsl(var(--nice-color-primary))',
|
|
107
|
+
primaryForeground: 'hsl(var(--primary-foreground))',
|
|
108
|
+
secondary: 'hsl(var(--secondary))',
|
|
109
|
+
secondaryForeground: 'hsl(var(--secondary-foreground))',
|
|
110
|
+
accent: 'hsl(var(--nice-color-accent))',
|
|
111
|
+
accentForeground: 'hsl(var(--accent-foreground))',
|
|
112
|
+
destructive: 'hsl(var(--destructive))',
|
|
113
|
+
destructiveForeground: 'hsl(var(--destructive-foreground))',
|
|
114
|
+
};
|
|
115
|
+
/**
|
|
116
|
+
* Creates shadcn/ui themed icon props
|
|
117
|
+
*
|
|
118
|
+
* @param variant - shadcn button variant
|
|
119
|
+
* @param size - shadcn button size
|
|
120
|
+
* @returns Props object for the icon
|
|
121
|
+
*/
|
|
122
|
+
function getShadcnIconProps(variant = 'default', size = 'default') {
|
|
123
|
+
const colorMap = {
|
|
124
|
+
default: SHADCN_COLOR_TOKENS.primaryForeground,
|
|
125
|
+
destructive: SHADCN_COLOR_TOKENS.destructiveForeground,
|
|
126
|
+
outline: SHADCN_COLOR_TOKENS.foreground,
|
|
127
|
+
secondary: SHADCN_COLOR_TOKENS.secondaryForeground,
|
|
128
|
+
ghost: SHADCN_COLOR_TOKENS.foreground,
|
|
129
|
+
link: SHADCN_COLOR_TOKENS.primary,
|
|
130
|
+
};
|
|
131
|
+
return {
|
|
132
|
+
size: SHADCN_ICON_SIZES[size],
|
|
133
|
+
color: colorMap[variant] || SHADCN_COLOR_TOKENS.foreground,
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Preset shadcn/ui className utilities for icons
|
|
138
|
+
*/
|
|
139
|
+
const shadcnIconClasses = {
|
|
140
|
+
/** Standard icon in button */
|
|
141
|
+
button: 'h-4 w-4',
|
|
142
|
+
/** Icon with right margin (before text) */
|
|
143
|
+
buttonLeft: 'mr-2 h-4 w-4',
|
|
144
|
+
/** Icon with left margin (after text) */
|
|
145
|
+
buttonRight: 'ml-2 h-4 w-4',
|
|
146
|
+
/** Small icon */
|
|
147
|
+
sm: 'h-3.5 w-3.5',
|
|
148
|
+
/** Large icon */
|
|
149
|
+
lg: 'h-5 w-5',
|
|
150
|
+
/** Icon-only button */
|
|
151
|
+
iconOnly: 'h-4 w-4',
|
|
152
|
+
/** Navigation menu icon */
|
|
153
|
+
nav: 'h-4 w-4 shrink-0',
|
|
154
|
+
/** Dropdown menu icon */
|
|
155
|
+
dropdown: 'mr-2 h-4 w-4',
|
|
156
|
+
/** Alert/toast icon */
|
|
157
|
+
alert: 'h-4 w-4',
|
|
158
|
+
/** Badge icon */
|
|
159
|
+
badge: 'h-3 w-3',
|
|
160
|
+
/** Card header icon */
|
|
161
|
+
card: 'h-5 w-5 text-muted-foreground',
|
|
162
|
+
/** Spinner/loading */
|
|
163
|
+
spinner: 'h-4 w-4 animate-spin',
|
|
164
|
+
};
|
|
165
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
166
|
+
RADIX UI HELPERS
|
|
167
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
168
|
+
/**
|
|
169
|
+
* Creates an icon component compatible with Radix UI primitives.
|
|
170
|
+
* Automatically handles ref forwarding and asChild pattern.
|
|
171
|
+
*
|
|
172
|
+
* @param IconComponent - The NtdIcon component
|
|
173
|
+
* @param defaultProps - Default props to apply
|
|
174
|
+
* @returns Radix-compatible icon component
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* ```tsx
|
|
178
|
+
* import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
179
|
+
* import { NtdChevronDown } from '@nice2dev/icons';
|
|
180
|
+
* import { createRadixIcon } from '@nice2dev/icons/headless-ui';
|
|
181
|
+
*
|
|
182
|
+
* const ChevronIcon = createRadixIcon(NtdChevronDown, {
|
|
183
|
+
* className: 'h-4 w-4 text-muted-foreground'
|
|
184
|
+
* });
|
|
185
|
+
*
|
|
186
|
+
* <DropdownMenu.Trigger>
|
|
187
|
+
* Options <ChevronIcon />
|
|
188
|
+
* </DropdownMenu.Trigger>
|
|
189
|
+
* ```
|
|
190
|
+
*/
|
|
191
|
+
function createRadixIcon(IconComponent, defaultProps = {}) {
|
|
192
|
+
const RadixIcon = React.forwardRef((props, ref) => {
|
|
193
|
+
const mergedProps = { ...defaultProps, ...props };
|
|
194
|
+
return React.createElement(IconComponent, { ...mergedProps, ref });
|
|
195
|
+
});
|
|
196
|
+
RadixIcon.displayName = `Radix${IconComponent.displayName || 'Icon'}`;
|
|
197
|
+
return RadixIcon;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* HOC that adds Radix UI state-based styling to icons.
|
|
201
|
+
* Supports data-state attributes for open/closed states.
|
|
202
|
+
*
|
|
203
|
+
* @param IconComponent - The icon component to enhance
|
|
204
|
+
* @returns Enhanced icon with state-aware styling
|
|
205
|
+
*
|
|
206
|
+
* @example
|
|
207
|
+
* ```tsx
|
|
208
|
+
* const StateAwareChevron = withRadixState(NtdChevronDown);
|
|
209
|
+
*
|
|
210
|
+
* // Automatically rotates when parent has data-state="open"
|
|
211
|
+
* <Collapsible.Trigger>
|
|
212
|
+
* <StateAwareChevron />
|
|
213
|
+
* </Collapsible.Trigger>
|
|
214
|
+
* ```
|
|
215
|
+
*/
|
|
216
|
+
function withRadixState(IconComponent) {
|
|
217
|
+
const StateIcon = React.forwardRef(({ className, style, ...props }, ref) => {
|
|
218
|
+
const stateStyles = {
|
|
219
|
+
transition: 'transform 200ms ease',
|
|
220
|
+
...style,
|
|
221
|
+
};
|
|
222
|
+
// Add CSS for data-state rotation
|
|
223
|
+
const stateClassName = `${className || ''} data-[state=open]:rotate-180`.trim();
|
|
224
|
+
return React.createElement(IconComponent, {
|
|
225
|
+
...props,
|
|
226
|
+
ref,
|
|
227
|
+
className: stateClassName,
|
|
228
|
+
style: stateStyles,
|
|
229
|
+
});
|
|
230
|
+
});
|
|
231
|
+
StateIcon.displayName = `StateAware${IconComponent.displayName || 'Icon'}`;
|
|
232
|
+
return StateIcon;
|
|
233
|
+
}
|
|
234
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
235
|
+
HEADLESS UI HELPERS
|
|
236
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
237
|
+
/**
|
|
238
|
+
* Transition presets for Headless UI Transition component with icons.
|
|
239
|
+
*/
|
|
240
|
+
const headlessTransitions = {
|
|
241
|
+
/** Fade in/out */
|
|
242
|
+
fade: {
|
|
243
|
+
enter: 'transition-opacity duration-150 ease-out',
|
|
244
|
+
enterFrom: 'opacity-0',
|
|
245
|
+
enterTo: 'opacity-100',
|
|
246
|
+
leave: 'transition-opacity duration-100 ease-in',
|
|
247
|
+
leaveFrom: 'opacity-100',
|
|
248
|
+
leaveTo: 'opacity-0',
|
|
249
|
+
},
|
|
250
|
+
/** Scale up/down */
|
|
251
|
+
scale: {
|
|
252
|
+
enter: 'transition-transform duration-150 ease-out',
|
|
253
|
+
enterFrom: 'scale-75',
|
|
254
|
+
enterTo: 'scale-100',
|
|
255
|
+
leave: 'transition-transform duration-100 ease-in',
|
|
256
|
+
leaveFrom: 'scale-100',
|
|
257
|
+
leaveTo: 'scale-75',
|
|
258
|
+
},
|
|
259
|
+
/** Rotate */
|
|
260
|
+
rotate: {
|
|
261
|
+
enter: 'transition-transform duration-200 ease-out',
|
|
262
|
+
enterFrom: 'rotate-0',
|
|
263
|
+
enterTo: 'rotate-180',
|
|
264
|
+
leave: 'transition-transform duration-200 ease-in',
|
|
265
|
+
leaveFrom: 'rotate-180',
|
|
266
|
+
leaveTo: 'rotate-0',
|
|
267
|
+
},
|
|
268
|
+
/** Spin (for loading) */
|
|
269
|
+
spin: {
|
|
270
|
+
enter: 'animate-spin',
|
|
271
|
+
enterFrom: '',
|
|
272
|
+
enterTo: '',
|
|
273
|
+
leave: '',
|
|
274
|
+
leaveFrom: '',
|
|
275
|
+
leaveTo: '',
|
|
276
|
+
},
|
|
277
|
+
};
|
|
278
|
+
/**
|
|
279
|
+
* Creates a Headless UI compatible icon with transition support.
|
|
280
|
+
*
|
|
281
|
+
* @param IconComponent - The icon component
|
|
282
|
+
* @param transition - Transition preset name
|
|
283
|
+
* @returns Icon component with transition classes
|
|
284
|
+
*/
|
|
285
|
+
function createHeadlessIcon(IconComponent, transition = 'fade') {
|
|
286
|
+
const HeadlessIcon = ({ show = true, className, ...props }) => {
|
|
287
|
+
const t = headlessTransitions[transition];
|
|
288
|
+
const transitionClass = show ? `${t.enter} ${t.enterTo}` : `${t.leave} ${t.leaveTo}`;
|
|
289
|
+
return React.createElement(IconComponent, {
|
|
290
|
+
...props,
|
|
291
|
+
className: `${className || ''} ${transitionClass}`.trim(),
|
|
292
|
+
});
|
|
293
|
+
};
|
|
294
|
+
HeadlessIcon.displayName = `Headless${IconComponent.displayName || 'Icon'}`;
|
|
295
|
+
return HeadlessIcon;
|
|
296
|
+
}
|
|
297
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
298
|
+
ICON BUTTON PRESETS
|
|
299
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
300
|
+
/**
|
|
301
|
+
* Props generator for common icon button patterns in shadcn/ui.
|
|
302
|
+
*/
|
|
303
|
+
const iconButtonPresets = {
|
|
304
|
+
/**
|
|
305
|
+
* Close button (X icon)
|
|
306
|
+
*/
|
|
307
|
+
close: {
|
|
308
|
+
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',
|
|
309
|
+
size: 16,
|
|
310
|
+
},
|
|
311
|
+
/**
|
|
312
|
+
* Chevron (accordion, collapsible)
|
|
313
|
+
*/
|
|
314
|
+
chevron: {
|
|
315
|
+
className: 'h-4 w-4 shrink-0 transition-transform duration-200',
|
|
316
|
+
'data-chevron': true,
|
|
317
|
+
},
|
|
318
|
+
/**
|
|
319
|
+
* Menu trigger
|
|
320
|
+
*/
|
|
321
|
+
menuTrigger: {
|
|
322
|
+
className: 'h-5 w-5',
|
|
323
|
+
strokeWidth: 1.5,
|
|
324
|
+
},
|
|
325
|
+
/**
|
|
326
|
+
* Navigation item icon
|
|
327
|
+
*/
|
|
328
|
+
navItem: {
|
|
329
|
+
className: 'mr-2 h-4 w-4 shrink-0',
|
|
330
|
+
},
|
|
331
|
+
/**
|
|
332
|
+
* Sidebar icon
|
|
333
|
+
*/
|
|
334
|
+
sidebar: {
|
|
335
|
+
className: 'h-4 w-4',
|
|
336
|
+
strokeWidth: 2,
|
|
337
|
+
},
|
|
338
|
+
/**
|
|
339
|
+
* Toast icon
|
|
340
|
+
*/
|
|
341
|
+
toast: {
|
|
342
|
+
className: 'h-5 w-5',
|
|
343
|
+
},
|
|
344
|
+
/**
|
|
345
|
+
* Dialog icon
|
|
346
|
+
*/
|
|
347
|
+
dialog: {
|
|
348
|
+
className: 'h-4 w-4 opacity-70',
|
|
349
|
+
},
|
|
350
|
+
};
|
|
351
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
352
|
+
UTILITY FUNCTIONS
|
|
353
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
354
|
+
/**
|
|
355
|
+
* Merges icon props with shadcn/ui defaults.
|
|
356
|
+
*
|
|
357
|
+
* @param props - User-provided props
|
|
358
|
+
* @param preset - Preset name from iconButtonPresets
|
|
359
|
+
* @returns Merged props
|
|
360
|
+
*/
|
|
361
|
+
function mergeIconProps(props, preset) {
|
|
362
|
+
const presetProps = iconButtonPresets[preset];
|
|
363
|
+
return {
|
|
364
|
+
...presetProps,
|
|
365
|
+
...props,
|
|
366
|
+
className: `${presetProps.className || ''} ${props.className || ''}`.trim(),
|
|
367
|
+
};
|
|
368
|
+
}
|
|
369
|
+
/**
|
|
370
|
+
* Creates a className string for icons based on variant and size.
|
|
371
|
+
*
|
|
372
|
+
* @param options - Styling options
|
|
373
|
+
* @returns Tailwind className string
|
|
374
|
+
*/
|
|
375
|
+
function getIconClassName(options = {}) {
|
|
376
|
+
const { variant = 'default', size = 'md', interactive = false, spinning = false } = options;
|
|
377
|
+
const sizeMap = {
|
|
378
|
+
xs: 'h-3 w-3',
|
|
379
|
+
sm: 'h-3.5 w-3.5',
|
|
380
|
+
md: 'h-4 w-4',
|
|
381
|
+
lg: 'h-5 w-5',
|
|
382
|
+
xl: 'h-6 w-6',
|
|
383
|
+
};
|
|
384
|
+
const variantMap = {
|
|
385
|
+
default: '',
|
|
386
|
+
muted: 'text-muted-foreground',
|
|
387
|
+
primary: 'text-primary',
|
|
388
|
+
destructive: 'text-destructive',
|
|
389
|
+
};
|
|
390
|
+
const classes = [
|
|
391
|
+
sizeMap[size],
|
|
392
|
+
variantMap[variant],
|
|
393
|
+
interactive && 'transition-colors hover:text-foreground cursor-pointer',
|
|
394
|
+
spinning && 'animate-spin',
|
|
395
|
+
].filter(Boolean);
|
|
396
|
+
return classes.join(' ');
|
|
397
|
+
}
|
|
398
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
399
|
+
EXPORTS
|
|
400
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
401
|
+
var headlessUi = {
|
|
402
|
+
forwardRefIcon,
|
|
403
|
+
createRadixIcon,
|
|
404
|
+
withRadixState,
|
|
405
|
+
createHeadlessIcon,
|
|
406
|
+
getShadcnIconProps,
|
|
407
|
+
mergeIconProps,
|
|
408
|
+
getIconClassName,
|
|
409
|
+
Slot,
|
|
410
|
+
SHADCN_ICON_SIZES,
|
|
411
|
+
SHADCN_COLOR_TOKENS,
|
|
412
|
+
shadcnIconClasses,
|
|
413
|
+
headlessTransitions,
|
|
414
|
+
iconButtonPresets,
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
exports.SHADCN_COLOR_TOKENS = SHADCN_COLOR_TOKENS;
|
|
418
|
+
exports.SHADCN_ICON_SIZES = SHADCN_ICON_SIZES;
|
|
419
|
+
exports.Slot = Slot;
|
|
420
|
+
exports.createHeadlessIcon = createHeadlessIcon;
|
|
421
|
+
exports.createRadixIcon = createRadixIcon;
|
|
422
|
+
exports.default = headlessUi;
|
|
423
|
+
exports.forwardRefIcon = forwardRefIcon;
|
|
424
|
+
exports.getIconClassName = getIconClassName;
|
|
425
|
+
exports.getShadcnIconProps = getShadcnIconProps;
|
|
426
|
+
exports.headlessTransitions = headlessTransitions;
|
|
427
|
+
exports.iconButtonPresets = iconButtonPresets;
|
|
428
|
+
exports.mergeIconProps = mergeIconProps;
|
|
429
|
+
exports.shadcnIconClasses = shadcnIconClasses;
|
|
430
|
+
exports.withRadixState = withRadixState;
|
package/dist/cjs/iconMetadata.js
CHANGED
package/dist/cjs/iconStyles.js
CHANGED
package/dist/cjs/icons/ai.js
CHANGED
package/dist/cjs/icons/brand.js
CHANGED
package/dist/cjs/icons/files.js
CHANGED
package/dist/cjs/icons/food.js
CHANGED
package/dist/cjs/icons/fun.js
CHANGED
package/dist/cjs/icons/gaming.js
CHANGED
package/dist/cjs/icons/health.js
CHANGED
package/dist/cjs/icons/index.js
CHANGED
package/dist/cjs/icons/legal.js
CHANGED
package/dist/cjs/icons/media.js
CHANGED
package/dist/cjs/icons/saas.js
CHANGED
package/dist/cjs/icons/shapes.js
CHANGED
package/dist/cjs/icons/social.js
CHANGED
package/dist/cjs/icons/sports.js
CHANGED
package/dist/cjs/icons/travel.js
CHANGED
package/dist/cjs/icons/ui.js
CHANGED
package/dist/cjs/index.js
CHANGED
package/dist/cjs/resolver.js
CHANGED