add columns

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
     "postcss": "^8",
     "postcss-cli": "^10",
     "postcss-ts-classnames": "^0.3.0",

packages/bulma/src/columns.ts

@@ -0,0 +1,61 @@
+import { classnames } from "@trunx/classnames"
+import { BoolClassArg, boolClass } from "./bool.js"
+import { Dozen, Fraction, Gap } from "./numbers.js"
+import { BreakpointsMap } from "./responsiveness.js"
+
+export type ColumnClassArg = Pick<BoolClassArg, "isCentered"> &
+  Partial<{
+    isNarrow: boolean | BreakpointsMap<boolean>
+    offset: Exclude<Dozen, 12> | Fraction
+    size: Dozen | Fraction | BreakpointsMap<Dozen | Fraction>
+  }>
+
+export const columnClass = ({
+  isCentered,
+  isNarrow,
+  offset,
+  size,
+}: ColumnClassArg) =>
+  classnames(
+    "column",
+    boolClass({ isCentered }),
+    isNarrow === true
+      ? {
+          "is-narrow": isNarrow,
+        }
+      : isNarrow && typeof isNarrow === "object"
+      ? Object.entries(isNarrow).map(([breakpoint, enabled]) =>
+          enabled ? `is-narrow-${breakpoint}` : ""
+        )
+      : "",
+    offset ? `is-offset-${offset}` : "",
+    size
+      ? size && typeof size === "object"
+        ? Object.entries(size).map(
+            ([breakpoint, value]) => `is-${value}-${breakpoint}`
+          )
+        : `is-${size}`
+      : ""
+  )
+
+export type ColumnsClassArg = Pick<
+  BoolClassArg,
+  | "isCentered"
+  | "isDesktop"
+  | "isGapless"
+  | "isMobile"
+  | "isNarrow"
+  | "isMultiline"
+  | "isVariable"
+  | "isVcentered"
+> &
+  Partial<{
+    gap: Gap | BreakpointsMap<Gap>
+  }>
+
+export const columnsClass = ({ gap, ...bools }: ColumnsClassArg) =>
+  classnames(
+    "columns",
+    boolClass(bools),
+    typeof gap === "number" ? `is-${gap}` : undefined
+  )

packages/trunx/src/components/Column_test.ts → packages/bulma/src/columns_test.ts

@@ -1,7 +1,7 @@
 import assert from "node:assert/strict"
 import { test } from "node:test"
-import { BulmaClass } from "@trunx/bulma"
-import { columnClass, ColumnClassArg } from "./Column.js"
+import BulmaClass from "./BulmaClass.js"
+import { columnClass, ColumnClassArg } from "./columns.js"
 
 test("columnClass", () => {
   const testData: Array<{

packages/bulma/src/index.ts

@@ -1,11 +1,14 @@
+export * from "./bulma.js"
+
 export * from "./bool.js"
-export * from "./buttons.js"
 export * from "./color.js"
-export * from "./image.js"
 export * from "./layout.js"
-export * from "./miscellanea.js"
-export * from "./number.js"
+export * from "./numbers.js"
 export * from "./responsiveness.js"
 export * from "./size.js"
 export * from "./typography.js"
-export * from "./bulma.js"
+
+export * from "./buttons.js"
+export * from "./columns.js"
+export * from "./image.js"
+export * from "./miscellanea.js"

packages/bulma/src/number.ts → packages/bulma/src/numbers.ts

@@ -1,3 +1,5 @@
+export type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+
 export type HalfDozen = 1 | 2 | 3 | 4 | 5 | 6
 
 export type Dozen = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

packages/react/src/columns.tsx

@@ -0,0 +1,21 @@
+import { FC, PropsWithChildren } from "react"
+import {
+  ColumnClassArg,
+  ColumnsClassArg,
+  columnClass,
+  columnsClass,
+} from "@trunx/bulma"
+
+export type ColumnProps = ColumnClassArg
+
+export const Column: FC<PropsWithChildren<ColumnProps>> = ({
+  children,
+  ...props
+}) => <div className={columnClass(props)}>{children}</div>
+
+export type ColumnsProps = ColumnsClassArg
+
+export const Columns: FC<PropsWithChildren<ColumnsProps>> = ({
+  children,
+  ...props
+}) => <div className={columnsClass(props)}>{children}</div>

packages/react/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./buttons.js"
+export * from "./columns.js"
 export * from "./miscellanea.js"