@jasonshimmy/custom-elements-runtime 1.1.1 → 1.1.2

package/dist/runtime/style.d.ts

@@ -25,6 +25,7 @@ export declare const containerVariants: MediaVariantMap;
 export declare const responsiveOrder: string[];
 export declare const containerOrder: string[];
 export declare function parseSpacing(className: string): string | null;
+export declare function parseSpaceUtility(className: string): string | null;
 export declare function hexToRgb(hex: string): string;
 export declare function parseColorClass(className: string): string | null;
 export declare function parseOpacityModifier(className: string): {

package/dist/transitions.d.ts

@@ -75,6 +75,10 @@ export interface TransitionGroupOptions extends Omit<TransitionOptions, 'show'>
     moveClass?: string;
     /** Whether to show the group (defaults to true for TransitionGroup) */
     show?: boolean;
+    /** CSS classes to apply to the wrapper element (e.g., 'flex gap-4' or 'grid grid-cols-3') */
+    class?: string;
+    /** Inline styles to apply to the wrapper element */
+    style?: string | Record<string, string>;
 }
 /**
  * Pre-defined transition presets using JIT CSS classes
@@ -206,6 +210,7 @@ export declare function Transition(options: TransitionOptions, content: VNode |
  *
  * @example
  * ```ts
+ * // Basic usage
  * ${TransitionGroup({
  *   preset: 'slide-right',
  *   tag: 'ul',
@@ -213,6 +218,22 @@ export declare function Transition(options: TransitionOptions, content: VNode |
  * }, each(items.value, (item) => html`
  *   <li key="${item.id}">${item.text}</li>
  * `))}
+ *
+ * // With flex layout
+ * ${TransitionGroup({
+ *   preset: 'fade',
+ *   class: 'flex gap-4 flex-wrap'
+ * }, each(items.value, (item) => html`
+ *   <div key="${item.id}" class="flex-shrink-0">${item.text}</div>
+ * `))}
+ *
+ * // With grid layout
+ * ${TransitionGroup({
+ *   preset: 'scale',
+ *   class: 'grid grid-cols-3 gap-4'
+ * }, each(items.value, (item) => html`
+ *   <div key="${item.id}">${item.text}</div>
+ * `))}
  * ```
  */
 export declare function TransitionGroup(options: TransitionGroupOptions, children: VNode[]): VNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jasonshimmy/custom-elements-runtime",
   "description": "A powerful, modern, and lightweight runtime for creating reactive web components with TypeScript",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "keywords": [
     "web-components",