@veluai/velu 0.2.24 → 0.2.27

package/runtime/velu-ui/components/Columns.jsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import Switcher from '../primitives/Switcher.jsx';
-
-/**
- * Columns — generic column layout for heterogeneous content (Card,
- * Callout, CodeBlock, Image, plain JSX — anything). Thin wrapper over
- * the Switcher primitive, mirroring CardGroup's responsive pattern but
- * without coupling to any specific child component.
- *
- *  <Columns cols={2}>
- *    <Card title="A" />
- *    <CodeBlock language="js">{snippet}</CodeBlock>
- *  </Columns>
- *
- * Behavior:
- *  - `cols` (default 2) — max number of items in a row. Acts as
- *    Switcher's `limit`: passing more children than `cols` collapses
- *    the layout to a full vertical stack (matches CardGroup).
- *  - `min` — per-item minimum width (default --columns-min token, 18ch).
- *    The instant any one column would fall below `min`, all columns
- *    stack vertically. Driven by Switcher's count-aware threshold
- *    math; no media queries.
- *  - `space` — gap between items (default --s1).
- *
- * Want multiple items in a single column? Wrap them in a Stack:
- *
- *  <Columns cols={3}>
- *    <Card title="left" />
- *    <Stack>
- *      <Card title="middle top" />
- *      <Card title="middle bottom" />
- *    </Stack>
- *    <Callout>right</Callout>
- *  </Columns>
- */
-
-export default function Columns({
-  cols = 2,
-  space = 'var(--s1)',
-  min = 'var(--columns-min, 18ch)',
-  children,
-  className = '',
-  ...rest
-}) {
-  return (
-    <Switcher
-      className={`velu-columns ${className}`.trim()}
-      space={space}
-      min={min}
-      limit={cols}
-      {...rest}
-    >
-      {children}
-    </Switcher>
-  );
-}
+import React from 'react';
+import Switcher from '../primitives/Switcher.jsx';
+
+/**
+ * Columns — generic column layout for heterogeneous content (Card,
+ * Callout, CodeBlock, Image, plain JSX — anything). Thin wrapper over
+ * the Switcher primitive, mirroring CardGroup's responsive pattern but
+ * without coupling to any specific child component.
+ *
+ *  <Columns cols={2}>
+ *    <Card title="A" />
+ *    <CodeBlock language="js">{snippet}</CodeBlock>
+ *  </Columns>
+ *
+ * Behavior:
+ *  - `cols` (default 2) — max number of items in a row. Acts as
+ *    Switcher's `limit`: passing more children than `cols` collapses
+ *    the layout to a full vertical stack (matches CardGroup).
+ *  - `min` — per-item minimum width (default --columns-min token, 18ch).
+ *    The instant any one column would fall below `min`, all columns
+ *    stack vertically. Driven by Switcher's count-aware threshold
+ *    math; no media queries.
+ *  - `space` — gap between items (default --s1).
+ *
+ * Want multiple items in a single column? Wrap them in a Stack:
+ *
+ *  <Columns cols={3}>
+ *    <Card title="left" />
+ *    <Stack>
+ *      <Card title="middle top" />
+ *      <Card title="middle bottom" />
+ *    </Stack>
+ *    <Callout>right</Callout>
+ *  </Columns>
+ */
+
+export default function Columns({
+  cols = 2,
+  space = 'var(--s1)',
+  min = 'var(--columns-min, 18ch)',
+  children,
+  className = '',
+  ...rest
+}) {
+  return (
+    <Switcher
+      className={`velu-columns ${className}`.trim()}
+      space={space}
+      min={min}
+      limit={cols}
+      {...rest}
+    >
+      {children}
+    </Switcher>
+  );
+}