@threlte/flex 0.0.5 → 0.0.7

package/dist/Box/Box.svelte

@@ -1,19 +1,25 @@
-<script>import { HierarchicalObject, T } from '@threlte/core';
+<script>import { HierarchicalObject, T, createRawEventDispatcher } from '@threlte/core';
 import { onDestroy } from 'svelte';
 import { Group } from 'three';
 import { useFlex } from '../Flex/context';
 import { createNodeContext } from '../nodes/context';
+import { createUseDimensionsContext } from '../hooks/useDimensions';
 export let order = undefined;
 let _class = '';
 export { _class as class };
-const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser } = useFlex();
+const dispatch = createRawEventDispatcher();
+/**
+ * Create the context for `useDimensions`
+ */
+const dimensionsContext = createUseDimensionsContext();
+const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser, reflow } = useFlex();
 export const group = new Group();
 export const contentGroup = new Group();
 group.userData.isNode = true;
 export const { node } = createNodeContext(order);
 addNode(node, group, $$restProps);
-updateNodeProps(node, { ...classParser?.(_class), ...$$restProps }, true);
-$: updateNodeProps(node, { ...classParser?.(_class), ...$$restProps });
+updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps }, true);
+$: updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps });
 onDestroy(() => {
     removeNode(node);
 });
@@ -38,6 +44,12 @@ onEvent('reflow:after', () => {
     getContentGroup().position[$mainAxis] = computedWidth / 2;
     getContentGroup().position[$crossAxis] = -computedHeight / 2;
     getContentGroup().position[$depthAxis] = 0;
+    dimensionsContext.width.set(computedWidth);
+    dimensionsContext.height.set(computedHeight);
+    dispatch('reflow', {
+        width: computedWidth,
+        height: computedHeight
+    });
 });
 </script>
 
@@ -62,6 +74,7 @@ onEvent('reflow:after', () => {
   }}
 >
   <slot
+    {reflow}
     width={computedWidth}
     height={computedHeight}
   />

package/dist/Box/Box.svelte.d.ts

@@ -6,10 +6,16 @@ type BoxProps = NodeProps & {
   class?: string
 }
 
-type BoxEvents = {}
+type BoxEvents = {
+  reflow: {
+    width: number
+    height: number
+  }
+}
 
 type BoxSlots = {
   default: {
+    reflow: () => void
     width: number
     height: number
   }

package/dist/Flex/Flex.svelte

@@ -15,7 +15,13 @@ const component = forwardEventHandlers();
     {...$$restProps}
     bind:this={$component}
     let:reflow
+    let:width
+    let:height
   >
-    <slot {reflow} />
+    <slot
+      {reflow}
+      {width}
+      {height}
+    />
   </InnerFlex>
 {/if}

package/dist/Flex/Flex.svelte.d.ts

@@ -10,6 +10,8 @@ type FlexEvents = ComponentEvents<InnerFlex>
 type FlexSlots = {
   default: {
     reflow: () => void
+    width: number
+    height: number
   }
 }
 

package/dist/Flex/InnerFlex.svelte

@@ -8,6 +8,7 @@ import { getRootShift } from '../lib/getRootShift';
 import { applyNodeProps } from '../lib/props';
 import { createNodeContext } from '../nodes/context';
 import { createFlexContext } from './context';
+import { createUseDimensionsContext } from '../hooks/useDimensions';
 export let yoga;
 export let width = 1;
 export let height = 1;
@@ -22,6 +23,10 @@ const rootGroup = new Group();
 rootGroup.userData.isNode = true;
 const boundingBox = new Box3();
 const vec3 = new Vector3();
+/**
+ * Create the context for `useDimensions`
+ */
+const { width: computedWidth, height: computedHeight } = createUseDimensionsContext();
 /**
  * Reflowing inside useFrame automatically batches reflows to 1 per frame.
  */
@@ -68,9 +73,11 @@ const { start: reflow, stop } = useFrame(() => {
         maxY = Math.max(maxY, top + height);
     }
     flexContext.emit('reflow:after');
+    computedWidth.set((maxX - minX) / scaleFactor);
+    computedHeight.set((maxY - minY) / scaleFactor);
     dispatch('reflow', {
-        width: (maxX - minX) / scaleFactor,
-        height: (maxY - minY) / scaleFactor
+        width: computedWidth.current,
+        height: computedHeight.current
     });
     stop();
 }, { autostart: false });
@@ -120,18 +127,25 @@ const flexContext = createFlexContext({
 const { mainAxis, crossAxis, depthAxis } = flexContext;
 const { node: rootNode } = createNodeContext();
 $: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
-$: applyNodeProps(rootNode, { ...classParser?.(_class), ...$$restProps }, scaleFactor), reflow();
-$: flexContext.rootWidth.set(width), flexContext.reflow('Updated root width');
-$: flexContext.rootHeight.set(height), flexContext.reflow('Updated root height');
-$: flexContext.mainAxis.set(plane[0]), flexContext.reflow('Updated main axis');
-$: flexContext.crossAxis.set(plane[1]), flexContext.reflow('Updated cross axis');
-$: flexContext.depthAxis.set(getDepthAxis(plane)), flexContext.reflow('Updated depth axis');
-$: flexContext.scaleFactor.set(scaleFactor), flexContext.reflow('Updated scale factor');
+$: {
+    applyNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps }, scaleFactor);
+    reflow();
+}
+$: flexContext.rootWidth.set(width), flexContext.reflow();
+$: flexContext.rootHeight.set(height), flexContext.reflow();
+$: flexContext.mainAxis.set(plane[0]), flexContext.reflow();
+$: flexContext.crossAxis.set(plane[1]), flexContext.reflow();
+$: flexContext.depthAxis.set(getDepthAxis(plane)), flexContext.reflow();
+$: flexContext.scaleFactor.set(scaleFactor), flexContext.reflow();
 onDestroy(() => {
     rootNode.free();
 });
 </script>
 
 <T is={rootGroup}>
-  <slot {reflow} />
+  <slot
+    {reflow}
+    width={$computedWidth}
+    height={$computedHeight}
+  />
 </T>

package/dist/Flex/InnerFlex.svelte.d.ts

@@ -24,6 +24,8 @@ type InnerFlexEvents = {
 type InnerFlexSlots = {
   default: {
     reflow: () => void
+    width: number
+    height: number
   }
 }
 

package/dist/Flex/context.d.ts

@@ -25,7 +25,7 @@ export type FlexContextData = {
     rootGroup: Group;
     rootWidth: CurrentWritable<number>;
     rootHeight: CurrentWritable<number>;
-    reflow: (msg?: string) => void;
+    reflow: () => void;
     classParser?: ClassParser;
 };
 export type FlexContext = FlexContextData & Emitter<FlexContextEvents> & {

package/dist/hooks/useDimensions.d.ts

@@ -0,0 +1,50 @@
+import { type CurrentWritable } from '@threlte/core';
+type UseDimensionsContext = {
+    width: CurrentWritable<number>;
+    height: CurrentWritable<number>;
+};
+export declare const flexContextName = "__threlte-flex-dimensions";
+/**
+ * Creates a context for useDimensions.
+ */
+export declare const createUseDimensionsContext: () => UseDimensionsContext;
+/**
+ * The hook `useDimensions` can be used to retrieve the computed width and
+ * height of a `<Flex>` or `<Box>` component as
+ * [CurrentWritable](https://threlte.xyz/docs/reference/core/utilities#currentwritable)
+ * stores.
+ *
+ * ## Usage
+ *
+ * ### In a `<Flex>` component
+ *
+ * Because there's no viewport to measure, the width and height of a `<Flex>`
+ * component need to be set manually. Nevertheless, the dimensions of the
+ * contents of the `<Flex>` component will be measured after a layout reflow and
+ * can be retrieved using `useDimensions` in a direct child component to
+ * `<Flex>`.
+ *
+ * ### In a `<Box>` component
+ *
+ * By default `@threlte/flex` controls elements position only. In some cases you
+ * may want to control element sizing too. Since `@threlte/flex` has no
+ * information about how the inner content size works, you need to set your
+ * content size manually. You can do this by using `useDimensions` hook in a
+ * direct child component to `<Box>`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *  import { useDimensions } from '@threlte/flex'
+ *
+ *  const { width, height } = useDimensions()
+ * </script>
+ *
+ * <T.Mesh scale.x={$width} scale.y={$height}>
+ *   <T.BoxGeometry />
+ *   <T.MeshBasicMaterial color="red" />
+ * </T.Mesh>
+ * ```
+ */
+export declare const useDimensions: () => UseDimensionsContext;
+export {};

package/dist/hooks/useDimensions.js

@@ -0,0 +1,59 @@
+import { getContext, setContext } from 'svelte';
+import { currentWritable } from '@threlte/core';
+export const flexContextName = '__threlte-flex-dimensions';
+/**
+ * Creates a context for useDimensions.
+ */
+export const createUseDimensionsContext = () => {
+    const context = {
+        width: currentWritable(0),
+        height: currentWritable(0)
+    };
+    setContext(flexContextName, context);
+    return context;
+};
+/**
+ * The hook `useDimensions` can be used to retrieve the computed width and
+ * height of a `<Flex>` or `<Box>` component as
+ * [CurrentWritable](https://threlte.xyz/docs/reference/core/utilities#currentwritable)
+ * stores.
+ *
+ * ## Usage
+ *
+ * ### In a `<Flex>` component
+ *
+ * Because there's no viewport to measure, the width and height of a `<Flex>`
+ * component need to be set manually. Nevertheless, the dimensions of the
+ * contents of the `<Flex>` component will be measured after a layout reflow and
+ * can be retrieved using `useDimensions` in a direct child component to
+ * `<Flex>`.
+ *
+ * ### In a `<Box>` component
+ *
+ * By default `@threlte/flex` controls elements position only. In some cases you
+ * may want to control element sizing too. Since `@threlte/flex` has no
+ * information about how the inner content size works, you need to set your
+ * content size manually. You can do this by using `useDimensions` hook in a
+ * direct child component to `<Box>`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *  import { useDimensions } from '@threlte/flex'
+ *
+ *  const { width, height } = useDimensions()
+ * </script>
+ *
+ * <T.Mesh scale.x={$width} scale.y={$height}>
+ *   <T.BoxGeometry />
+ *   <T.MeshBasicMaterial color="red" />
+ * </T.Mesh>
+ * ```
+ */
+export const useDimensions = () => {
+    const context = getContext(flexContextName);
+    if (!context) {
+        throw new Error('useDimensions must be used within a <Flex> component');
+    }
+    return context;
+};

package/dist/hooks/useReflow.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The hook useReflow allows you to manually request a [layout
+ * reflow](https://threlte.xyz/docs/reference/flex/flex#layout-reflow), for
+ * instance when a [`<Text>`](https://threlte.xyz/docs/reference/extras/text)
+ * component finished synchronizing or when a model has loaded into view and
+ * there’s no easy access to the reflow slot prop of the components `<Flex>` or
+ * `<Box>` because of component composition. Calls to`reflow` will be limited to
+ * once per frame, so it’s safe to call it from multiple components at a time.
+ */
+export declare const useReflow: () => () => void;

package/dist/hooks/useReflow.js

@@ -0,0 +1,18 @@
+import { getContext } from 'svelte';
+import { flexContextName } from '../Flex/context';
+/**
+ * The hook useReflow allows you to manually request a [layout
+ * reflow](https://threlte.xyz/docs/reference/flex/flex#layout-reflow), for
+ * instance when a [`<Text>`](https://threlte.xyz/docs/reference/extras/text)
+ * component finished synchronizing or when a model has loaded into view and
+ * there’s no easy access to the reflow slot prop of the components `<Flex>` or
+ * `<Box>` because of component composition. Calls to`reflow` will be limited to
+ * once per frame, so it’s safe to call it from multiple components at a time.
+ */
+export const useReflow = () => {
+    const flexContext = getContext(flexContextName);
+    if (!flexContext) {
+        throw new Error('useReflow must be used within a <Flex> component');
+    }
+    return flexContext.reflow;
+};

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export { default as Flex } from './Flex/Flex.svelte';
 export type { NodeProps } from './lib/props';
 export { createClassParser } from './parsers/createClassParser';
 export { tailwindParser } from './parsers/tailwindParser';
+export { useReflow } from './hooks/useReflow';
+export { useDimensions } from './hooks/useDimensions';

package/dist/index.js

@@ -3,3 +3,6 @@ export { default as Flex } from './Flex/Flex.svelte';
 // parsers
 export { createClassParser } from './parsers/createClassParser';
 export { tailwindParser } from './parsers/tailwindParser';
+// hooks
+export { useReflow } from './hooks/useReflow';
+export { useDimensions } from './hooks/useDimensions';

package/dist/lib/props.d.ts

@@ -1,6 +1,6 @@
 import type { Align, FlexDirection, Justify, Node, Wrap } from 'yoga-layout';
 export type FlexPlane = 'xy' | 'yz' | 'xz';
-export type ClassParser = (className: string) => NodeProps;
+export type ClassParser = (className: string, props: NodeProps) => NodeProps;
 export type Axis = 'x' | 'y' | 'z';
 /**
  * This map provides the prop setters as well as the types for the props. The

package/dist/parsers/createClassParser.d.ts

@@ -1,8 +1,8 @@
-import type { NodeProps } from '../lib/props';
+import type { ClassParser } from '../lib/props';
 /**
  * This function is a type helper for creating a class parser. A class parser is
  * a function that takes a class name and returns a NodeProps object. This can
  * be used to create Tailwind-like class names that resolve to yoga-layout
  * props.
  */
-export declare const createClassParser: (callback: (className: string) => NodeProps) => (className: string) => NodeProps;
+export declare const createClassParser: (callback: ClassParser) => ClassParser;

package/dist/parsers/tailwindParser.d.ts

@@ -1,2 +1 @@
-import type { NodeProps } from '../lib/props';
-export declare const tailwindParser: (className: string) => NodeProps;
+export declare const tailwindParser: import("../lib/props").ClassParser;

package/dist/parsers/tailwindParser.js

@@ -1,6 +1,5 @@
 import { createClassParser } from './createClassParser';
-export const tailwindParser = createClassParser((string) => {
-    const styles = {};
+export const tailwindParser = createClassParser((string, props) => {
     const classes = string.split(' ').map((className) => className.trim());
     const parseNumericOrAutoOrPercentageValue = (value) => {
         if (value === 'auto') {
@@ -37,141 +36,141 @@ export const tailwindParser = createClassParser((string) => {
         // padding
         if (className.startsWith('p-')) {
             const [, value] = className.split('-');
-            styles.padding = parseNumericOrPercentageValue(value);
+            props.padding = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('px-')) {
             const [, value] = className.split('-');
-            styles.paddingLeft = parseNumericOrPercentageValue(value);
-            styles.paddingRight = parseNumericOrPercentageValue(value);
+            props.paddingLeft = parseNumericOrPercentageValue(value);
+            props.paddingRight = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('py-')) {
             const [, value] = className.split('-');
-            styles.paddingTop = parseNumericOrPercentageValue(value);
-            styles.paddingBottom = parseNumericOrPercentageValue(value);
+            props.paddingTop = parseNumericOrPercentageValue(value);
+            props.paddingBottom = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pt-')) {
             const [, value] = className.split('-');
-            styles.paddingTop = parseNumericOrPercentageValue(value);
+            props.paddingTop = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pr-')) {
             const [, value] = className.split('-');
-            styles.paddingRight = parseNumericOrPercentageValue(value);
+            props.paddingRight = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pb-')) {
             const [, value] = className.split('-');
-            styles.paddingBottom = parseNumericOrPercentageValue(value);
+            props.paddingBottom = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('pl-')) {
             const [, value] = className.split('-');
-            styles.paddingLeft = parseNumericOrPercentageValue(value);
+            props.paddingLeft = parseNumericOrPercentageValue(value);
         }
         // margin
         if (className.startsWith('m-')) {
             const [, value] = className.split('-');
-            styles.margin = parseNumericOrAutoOrPercentageValue(value);
+            props.margin = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mx-')) {
             const [, value] = className.split('-');
-            styles.marginLeft = parseNumericOrAutoOrPercentageValue(value);
-            styles.marginRight = parseNumericOrAutoOrPercentageValue(value);
+            props.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+            props.marginRight = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('my-')) {
             const [, value] = className.split('-');
-            styles.marginTop = parseNumericOrAutoOrPercentageValue(value);
-            styles.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+            props.marginTop = parseNumericOrAutoOrPercentageValue(value);
+            props.marginBottom = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mt-')) {
             const [, value] = className.split('-');
-            styles.marginTop = parseNumericOrAutoOrPercentageValue(value);
+            props.marginTop = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mr-')) {
             const [, value] = className.split('-');
-            styles.marginRight = parseNumericOrAutoOrPercentageValue(value);
+            props.marginRight = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('mb-')) {
             const [, value] = className.split('-');
-            styles.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+            props.marginBottom = parseNumericOrAutoOrPercentageValue(value);
         }
         if (className.startsWith('ml-')) {
             const [, value] = className.split('-');
-            styles.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+            props.marginLeft = parseNumericOrAutoOrPercentageValue(value);
         }
         // width
         if (className.startsWith('w-')) {
             const [, value] = className.split('-');
-            styles.width = parseNumericOrAutoOrPercentageValue(value);
+            props.width = parseNumericOrAutoOrPercentageValue(value);
         }
         // height
         if (className.startsWith('h-')) {
             const [, value] = className.split('-');
-            styles.height = parseNumericOrAutoOrPercentageValue(value);
+            props.height = parseNumericOrAutoOrPercentageValue(value);
         }
         // flex-basis
         if (className.startsWith('basis-')) {
             const [, value] = className.split('-');
-            styles.flexBasis = parseNumericOrAutoOrPercentageValue(value);
+            props.flexBasis = parseNumericOrAutoOrPercentageValue(value);
         }
         // flex-grow
         if (className.startsWith('grow-')) {
             const [, value] = className.split('-');
-            styles.flexGrow = Number(value);
+            props.flexGrow = Number(value);
         }
         // flex-shrink
         if (className.startsWith('shrink-')) {
             const [, value] = className.split('-');
-            styles.flexShrink = Number(value);
+            props.flexShrink = Number(value);
         }
         // flex-direction
         if (className.startsWith('flex-')) {
             // first the flex direction
             switch (className) {
                 case 'flex-row':
-                    styles.flexDirection = 'Row';
+                    props.flexDirection = 'Row';
                     break;
                 case 'flex-row-reverse':
-                    styles.flexDirection = 'RowReverse';
+                    props.flexDirection = 'RowReverse';
                     break;
                 case 'flex-col':
-                    styles.flexDirection = 'Column';
+                    props.flexDirection = 'Column';
                     break;
                 case 'flex-col-reverse':
-                    styles.flexDirection = 'ColumnReverse';
+                    props.flexDirection = 'ColumnReverse';
                     break;
                 case 'flex-wrap':
-                    styles.flexWrap = 'Wrap';
+                    props.flexWrap = 'Wrap';
                     break;
                 case 'flex-wrap-reverse':
-                    styles.flexWrap = 'WrapReverse';
+                    props.flexWrap = 'WrapReverse';
                     break;
                 case 'flex-nowrap':
-                    styles.flexWrap = 'NoWrap';
+                    props.flexWrap = 'NoWrap';
                     break;
                 default:
                     // flex shorthand
                     const [, value] = className.split('-');
-                    styles.flex = Number(value);
+                    props.flex = Number(value);
             }
         }
         // justify-content
         if (className.startsWith('justify-')) {
             switch (className) {
                 case 'justify-start':
-                    styles.justifyContent = 'FlexStart';
+                    props.justifyContent = 'FlexStart';
                     break;
                 case 'justify-end':
-                    styles.justifyContent = 'FlexEnd';
+                    props.justifyContent = 'FlexEnd';
                     break;
                 case 'justify-center':
-                    styles.justifyContent = 'Center';
+                    props.justifyContent = 'Center';
                     break;
                 case 'justify-between':
-                    styles.justifyContent = 'SpaceBetween';
+                    props.justifyContent = 'SpaceBetween';
                     break;
                 case 'justify-around':
-                    styles.justifyContent = 'SpaceAround';
+                    props.justifyContent = 'SpaceAround';
                     break;
                 case 'justify-evenly':
-                    styles.justifyContent = 'SpaceEvenly';
+                    props.justifyContent = 'SpaceEvenly';
                     break;
             }
         }
@@ -179,19 +178,19 @@ export const tailwindParser = createClassParser((string) => {
         if (className.startsWith('items-')) {
             switch (className) {
                 case 'items-start':
-                    styles.alignItems = 'FlexStart';
+                    props.alignItems = 'FlexStart';
                     break;
                 case 'items-end':
-                    styles.alignItems = 'FlexEnd';
+                    props.alignItems = 'FlexEnd';
                     break;
                 case 'items-center':
-                    styles.alignItems = 'Center';
+                    props.alignItems = 'Center';
                     break;
                 case 'items-baseline':
-                    styles.alignItems = 'Baseline';
+                    props.alignItems = 'Baseline';
                     break;
                 case 'items-stretch':
-                    styles.alignItems = 'Stretch';
+                    props.alignItems = 'Stretch';
                     break;
             }
         }
@@ -199,28 +198,28 @@ export const tailwindParser = createClassParser((string) => {
         if (className.startsWith('content-')) {
             switch (className) {
                 case 'content-normal':
-                    styles.alignContent = 'Auto';
+                    props.alignContent = 'Auto';
                     break;
                 case 'content-start':
-                    styles.alignContent = 'FlexStart';
+                    props.alignContent = 'FlexStart';
                     break;
                 case 'content-end':
-                    styles.alignContent = 'FlexEnd';
+                    props.alignContent = 'FlexEnd';
                     break;
                 case 'content-center':
-                    styles.alignContent = 'Center';
+                    props.alignContent = 'Center';
                     break;
                 case 'content-between':
-                    styles.alignContent = 'SpaceBetween';
+                    props.alignContent = 'SpaceBetween';
                     break;
                 case 'content-around':
-                    styles.alignContent = 'SpaceAround';
+                    props.alignContent = 'SpaceAround';
                     break;
                 case 'content-stretch':
-                    styles.alignContent = 'Stretch';
+                    props.alignContent = 'Stretch';
                     break;
                 case 'content-baseline':
-                    styles.alignContent = 'Baseline';
+                    props.alignContent = 'Baseline';
                     break;
             }
         }
@@ -228,73 +227,73 @@ export const tailwindParser = createClassParser((string) => {
         if (className.startsWith('self-')) {
             switch (className) {
                 case 'self-auto':
-                    styles.alignSelf = 'Auto';
+                    props.alignSelf = 'Auto';
                     break;
                 case 'self-start':
-                    styles.alignSelf = 'FlexStart';
+                    props.alignSelf = 'FlexStart';
                     break;
                 case 'self-end':
-                    styles.alignSelf = 'FlexEnd';
+                    props.alignSelf = 'FlexEnd';
                     break;
                 case 'self-center':
-                    styles.alignSelf = 'Center';
+                    props.alignSelf = 'Center';
                     break;
                 case 'self-stretch':
-                    styles.alignSelf = 'Stretch';
+                    props.alignSelf = 'Stretch';
                     break;
                 case 'self-baseline':
-                    styles.alignSelf = 'Baseline';
+                    props.alignSelf = 'Baseline';
                     break;
             }
         }
         // Gaps
         if (className.startsWith('gap-x-')) {
             const [, value] = className.split('-');
-            styles.gapColumn = Number(value);
+            props.gapColumn = Number(value);
         }
         else if (className.startsWith('gap-y-')) {
             const [, value] = className.split('-');
-            styles.gapRow = Number(value);
+            props.gapRow = Number(value);
         }
         else if (className.startsWith('gap-')) {
             const [, value] = className.split('-');
-            styles.gap = Number(value);
+            props.gap = Number(value);
         }
         // Position
         if (className.startsWith('top-')) {
             const [, value] = className.split('-');
-            styles.top = parseNumericOrPercentageValue(value);
+            props.top = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('right-')) {
             const [, value] = className.split('-');
-            styles.right = parseNumericOrPercentageValue(value);
+            props.right = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('bottom-')) {
             const [, value] = className.split('-');
-            styles.bottom = parseNumericOrPercentageValue(value);
+            props.bottom = parseNumericOrPercentageValue(value);
         }
         if (className.startsWith('left-')) {
             const [, value] = className.split('-');
-            styles.left = parseNumericOrPercentageValue(value);
+            props.left = parseNumericOrPercentageValue(value);
         }
         // aspect ratio
         if (className.startsWith('aspect-')) {
             switch (className) {
                 case 'aspect-square':
-                    styles.aspectRatio = 1;
+                    props.aspectRatio = 1;
                     break;
                 case 'aspect-landscape':
-                    styles.aspectRatio = 16 / 9;
+                    props.aspectRatio = 16 / 9;
                     break;
                 case 'aspect-portrait':
-                    styles.aspectRatio = 9 / 16;
+                    props.aspectRatio = 9 / 16;
                     break;
                 default:
                     const [, value] = className.split('-');
                     const [width, height] = value.split('/');
-                    styles.aspectRatio = Number(width) / Number(height);
+                    props.aspectRatio = Number(width) / Number(height);
             }
         }
     });
-    return styles;
+    return props;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
@@ -27,8 +27,8 @@
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.3.6",
-    "@threlte/core": "6.0.8",
-    "@threlte/extras": "5.7.0"
+    "@threlte/core": "6.0.9",
+    "@threlte/extras": "6.0.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",