@rokkit/core 1.0.0-next.92 → 1.0.0-next.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.92",
+  "version": "1.0.0-next.93",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -14,16 +14,16 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/svelte": "^4.1.0",
-    "@types/ramda": "^0.29.10",
-    "@vitest/coverage-v8": "^1.3.1",
-    "@vitest/ui": "~1.3.1",
+    "@types/ramda": "^0.29.11",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/ui": "~1.4.0",
     "jsdom": "^24.0.0",
-    "svelte": "^4.2.11",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
-    "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.92",
-    "validators": "1.0.0-next.92"
+    "svelte": "^4.2.12",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7",
+    "vitest": "~1.4.0",
+    "shared-config": "1.0.0-next.93",
+    "validators": "1.0.0-next.93"
   },
   "files": [
     "src/**/*.js",
@@ -41,7 +41,7 @@
     }
   },
   "dependencies": {
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "ramda": "^0.29.1"
   },
   "scripts": {

package/src/calendar.js

@@ -18,7 +18,7 @@ export function getCalendarDays(value, holidays = [], fixed = false) {
 	holidays = holidays.map((x) => format(new Date(x), 'yyyy-MMM-dd'))
 	let days = Array.from({ length: getDaysInMonth(value) }, (_, i) => ({
 		day: i + 1,
-		offset: i == 0 ? offset : 0,
+		offset: i === 0 ? offset : 0,
 		date: new Date(year, month, i + 1)
 	})).map((x) => ({
 		...x,

package/src/colors/index.js

@@ -1,4 +1,6 @@
-import { defaultTailwindColors } from './tailwind'
+import defaultTailwindColors from './tailwind.json'
+import syntaxColorPalette from './syntax.json'
+
 export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 export const defaultPalette = [
 	'neutral',
@@ -10,8 +12,8 @@ export const defaultPalette = [
 	'danger',
 	'info'
 ]
-export * from './syntax'
 
+export const syntaxColors = syntaxColorPalette
 export const defaultColors = {
 	...defaultTailwindColors
 }

package/src/connector.js

@@ -1,8 +1,29 @@
+const nextType = {
+	child: 'sibling',
+	last: 'empty',
+	sibling: 'sibling',
+	empty: 'empty'
+}
+
+/**
+ * Constructs an array of line types based on the provided parameters.
+ *
+ * @param {boolean} hasChildren - Indicates whether the current item has children, affecting the line type for the item itself.
+ * @param {Array<string>} parentTypes - An array of types from the parent indicating the line type context.
+ * @param {string} position - The line type to use for the current position (usually 'child' or 'last').
+ * @returns {Array<string>} An array of line types.
+ */
 export function getLineTypes(hasChildren = false, parentTypes = [], position = 'child') {
-	let types = parentTypes.slice(0, -1).map((type) => {
-		return type === 'child' ? 'sibling' : type === 'last' ? 'empty' : type
-	})
-	if (parentTypes.length > 0) types.push(position)
+	// Map each parent type to a line type, except for the last element.
+	const types = parentTypes.slice(0, -1).map((type) => nextType[type])
+
+	// Append the position type for the last parent, if any.
+	if (parentTypes.length > 0) {
+		types.push(position)
+	}
+
+	// Append the line type based on whether the current item has children.
 	types.push(hasChildren ? 'icon' : 'empty')
+
 	return types
 }

package/src/mapped-list.js

@@ -1,6 +1,20 @@
 import { defaultFields } from './constants'
 import { isExpanded, hasChildren, getAttribute } from './mapping'
 import { equals } from 'ramda'
+
+function isMatch(item, attr, value) {
+	const itemValue = attr ? getAttribute(item, attr) : item
+	return equals(itemValue, value)
+}
+
+function findInChildren(item, index, fields, value, attr, position) {
+	if (hasChildren(item, fields)) {
+		return findItemByValue(value, item[fields.children], fields.fields ?? fields, attr, [
+			...position,
+			index
+		])
+	}
+}
 /**
  * Traverses the tree to find an item by value.
  * @param {Array} items - The items array.
@@ -11,30 +25,14 @@ import { equals } from 'ramda'
  */
 export function findItemByValue(value, items, fields = defaultFields, attr = null, position = []) {
 	for (let i = 0; i < items.length; i++) {
-		const item = items[i]
-
-		if (attr) {
-			if (getAttribute(item, attr) === value) {
-				return { item, position: position.concat(i), fields }
-			}
-		} else if (equals(item, value)) {
-			return { item, position: position.concat(i), fields }
+		if (isMatch(items[i], attr, value)) {
+			return { item: items[i], position: [...position, i], fields }
 		}
 
-		// If the item has children, recurse into them.
-		if (hasChildren(item, fields)) {
-			const found = findItemByValue(
-				value,
-				item[fields.children],
-				fields.fields ?? fields,
-				attr,
-				position.concat(i)
-			)
-			if (found) return found
-		}
+		const foundInChildren = findInChildren(items[i], i, fields, value, attr, position)
+		if (foundInChildren) return foundInChildren
 	}
 
-	// If the item was not found, return null.
 	return null
 }
 
@@ -63,7 +61,7 @@ export function findItemByIndexArray(indices, items, fields) {
  *
  * @param {Array<integer>} position
  * @param {Array<*>} items
- * @param {import('@rokkit/core').FieldMapping} fields
+ * @param {import('./types').FieldMapping} fields
  * @returns
  */
 export function findNearestItemBefore(position, items, fields) {
@@ -74,7 +72,7 @@ export function findNearestItemBefore(position, items, fields) {
 	let result
 	if (index > 0) {
 		index -= 1
-		if (position.length == 1) {
+		if (position.length === 1) {
 			return findLastVisibleChild(items[index], [index], fields)
 		}
 
@@ -90,7 +88,7 @@ export function findNearestItemBefore(position, items, fields) {
  *
  * @param {*} parent
  * @param {Array<integer>} position
- * @param {import('@rokkit/core').FieldMapping} fields
+ * @param {import('./types').FieldMapping} fields
  * @returns
  */
 export function findLastVisibleChild(parent, position, fields) {
@@ -197,7 +195,7 @@ function getNextSiblingOrAncestor(position, items, fields) {
 /**
  * Creates a mapped list from an items array and a fields mapping.
  * @param {Array<Object>} items - The items array.
- * @param {import('@rokkit/core').FieldMapping} fields - The fields mapping.
+ * @param {import('./types').FieldMapping} fields - The fields mapping.
  * @returns {Object} The mapped list.
  */
 export function mappedList(items, fields) {

package/src/mapping.js

@@ -10,7 +10,7 @@ import { isObject } from '.'
  * @param {import('./types.js').ComponentMap} using
  */
 export function getComponent(value, fields, using) {
-	return fields.component && typeof value == 'object'
+	return fields.component && typeof value === 'object'
 		? using[value[fields.component]] ?? using.default
 		: using.default
 }
@@ -25,7 +25,7 @@ export function getIcon(value, fields = defaultFields) {
 	if (fields.icon === undefined || typeof (value ?? '') !== 'object') return null
 	// console.log(fields.icon, fields.state, value[fields.icon][value[fields.state]])
 	const name =
-		typeof value[fields.icon] == 'object'
+		typeof value[fields.icon] === 'object'
 			? value[fields.icon][value[fields.state]]
 			: value[fields.icon]
 	return fields.iconPrefix ? [fields.iconPrefix, name].join('-') : name
@@ -52,7 +52,7 @@ export function getValue(node, fields = defaultFields) {
  * @returns {*}
  */
 export function getText(node, fields = defaultFields) {
-	let value = typeof node === 'object' && node !== null ? node[fields.text] : node
+	let value = typeof node === 'object' && node != null ? node[fields.text] : node
 
 	return value != null
 		? isObject(value)
@@ -68,7 +68,7 @@ export function getText(node, fields = defaultFields) {
  * @returns {*}
  */
 export function getAttribute(node, attr) {
-	return typeof node === 'object' && node !== null && attr != null ? node[attr] : null
+	return typeof node === 'object' && node !== null && attr !== null ? node[attr] : null
 }
 /**
  * Check if the current item is a parent
@@ -79,7 +79,7 @@ export function getAttribute(node, attr) {
  */
 export function hasChildren(item, fields) {
 	return (
-		item != null &&
+		item !== null &&
 		typeof item === 'object' &&
 		fields.children in item &&
 		Array.isArray(item[fields.children])
@@ -94,7 +94,7 @@ export function hasChildren(item, fields) {
  * @returns {boolean}
  */
 export function isExpanded(item, fields) {
-	if (item == null) return false
+	if (item === null) return false
 	if (!hasChildren(item, fields)) return false
 	if (fields.isOpen in item) {
 		return item[fields.isOpen]

package/src/string.js

@@ -47,8 +47,8 @@ export function sortByParts(a, b) {
 	const partsOfB = b.split('-')
 
 	let result = compareStrings(partsOfA[0], partsOfB[0])
-	if (result == 0) result = partsOfA.length - partsOfB.length
-	if (result == 0) result = compareStrings(a, b)
+	if (result === 0) result = partsOfA.length - partsOfB.length
+	if (result === 0) result = compareStrings(a, b)
 	return result
 }
 

package/src/theme.js

@@ -60,71 +60,130 @@ export function themeColors(modifier = 'none') {
 	colors.neutral = {
 		...colors.neutral,
 		// contrast: fn(`var(--neutral-800)`),
-		zebra: fn(`var(--neutral-zebra)`)
+		zebra: fn('var(--neutral-zebra)')
 	}
 
 	return colors
 }
 
+/**
+ * Creates an array of shade mapping objects for a given theme variant and mode.
+ * Each object represents a CSS custom property (variable) with its value set based on a provided condition.
+ *
+ * @param {string} variant - The name of the theme variant (e.g., 'primary', 'secondary').
+ * @param {'light' | 'dark'} mode - The theme mode for which the mappings are being created.
+ * @param {function(number): string} valueCondition - A function that takes a shade value and returns the color value
+ *                                                    based on the condition appropriate for light or dark mode.
+ * @returns {Array<{key: string, value: string, mode: string}>} An array of objects, where each object contains
+ *                                                              key, value, and mode properties corresponding to
+ *                                                              a CSS custom property definition.
+ */
+function createShadeMappings(variant, mode, valueCondition) {
+	return shades.map((shade) => ({
+		key: `--on-${variant}-${shade}`,
+		value: valueCondition(shade),
+		mode: mode
+	}))
+}
+
+/**
+ * Generates contrast colors for light and dark modes based on a given palette. Each color variant in the
+ * palette is mapped to either a light or dark contrast color depending on the shade's value.
+ *
+ * @param {string} [light='#ffffff'] - The default light color used when the shade is >= 500 in light mode or <= 500 in dark mode.
+ * @param {string} [dark='#000000'] - The default dark color used when the shade is < 500 in light mode or > 500 in dark mode.
+ * @param {Array<string>} [palette=defaultPalette] - An array of color variant names to generate contrast colors for.
+ * @returns {Array<Object>} An array containing contrast color rules organized by light and dark modes for each variant in the palette.
+ */
 export function contrastColors(light = '#ffffff', dark = '#000000', palette = defaultPalette) {
 	const colors = palette
 		.flatMap((variant) => [
-			shades.map((shade) => ({
-				key: `--on-${variant}-${shade}`,
-				value: shade < 500 ? dark : light,
-				mode: 'light'
-			})),
-			shades.map((shade) => ({
-				key: `--on-${variant}-${shade}`,
-				value: shade > 500 ? dark : light,
-				mode: 'dark'
-			}))
+			createShadeMappings(variant, 'light', (shade) => (shade < 500 ? dark : light)),
+			createShadeMappings(variant, 'dark', (shade) => (shade > 500 ? dark : light))
 		])
 		.reduce((acc, item) => [...acc, ...item], [])
 	return colors
 }
+/**
+ * Generates color rules for a specific theme variant, for both light and dark modes.
+ *
+ * @param {string} variant - The name of the variant to generate rules for.
+ * @param {Object} colors - The object containing color definitions.
+ * @param {Object} mapping - An object that maps variant names to color property names.
+ * @returns {Array<Object>} An array containing the color rules for both light and dark modes.
+ */
+function generateColorRules(variant, colors, mapping) {
+	return shades.flatMap((shade, index) => [
+		{
+			key: `--${variant}-${shade}`,
+			value: colors[mapping[variant]][shade],
+			mode: 'light'
+		},
+		{
+			key: `--${variant}-${shade}`,
+			value: colors[mapping[variant]][shades[shades.length - index - 1]],
+			mode: 'dark'
+		}
+	])
+}
+
+/**
+ * Filters the rules for a specific mode and transforms them into an object mapping
+ * CSS variable names to their values.
+ *
+ * @param {Array<Object>} rules - The array of rules to filter and transform.
+ * @param {'light' | 'dark'} mode - The mode to filter by.
+ * @returns {Object} An object containing the rules specific to the provided mode.
+ */
+function filterRulesByMode(rules, mode) {
+	return rules
+		.filter((rule) => rule.mode === mode)
+		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+}
 
+/**
+ * Creates a theme variant object with a given mode, a collection of color rules, and additional colors.
+ *
+ * @param {string} name - The base name for the theme variant.
+ * @param {'light' | 'dark'} mode - The mode of the theme variant.
+ * @param {Object} colors - The object containing color rules for the theme.
+ * @param {Object} extraColors - Any additional color properties for the theme.
+ * @returns {Array} An array where the first element is the theme's name and the second element
+ * is an object containing all color rules and extra properties for the theme variant.
+ */
+function createThemeVariant(name, mode, colors, extraColors) {
+	return [
+		`${name}-mode-${mode}`,
+		{
+			...colors,
+			...extraColors,
+			'--plot-background': 'var(--neutral-200)'
+		}
+	]
+}
+
+/**
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
+ *
+ * @param {string} name - The base name for the theme, defaults to 'rokkit' if not provided.
+ * @param {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
+ * @param {Object} [colors=defaultColors] - The object containing default color definitions.
+ * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
+ */
 export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
 	mapping = { ...defaultThemeMapping, ...mapping }
 	const variants = Object.keys(mapping)
-	const rules = variants
-		.flatMap((variant) => [
-			shades.map((shade) => ({
-				key: `--${variant}-${shade}`,
-				value: colors[mapping[variant]][shade],
-				mode: 'light'
-			})),
-			shades.map((shade, i) => ({
-				key: `--${variant}-${shade}`,
-				value: colors[mapping[variant]][shades[shades.length - i - 1]],
-				mode: 'dark'
-			}))
-		])
-		.reduce((acc, item) => [...acc, ...item], [])
 
-	const light = rules
-		.filter((rule) => rule.mode === 'light')
-		.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {})
-	const dark = rules
-		.filter((rule) => rule.mode === 'dark')
-		.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {})
+	const rules = variants.reduce(
+		(acc, variant) => [...acc, ...generateColorRules(variant, colors, mapping)],
+		[]
+	)
 
-	return [
-		[
-			`${name}-mode-light`,
-			{
-				...light,
-				...syntaxColors['one-dark'].light,
-				'--plot-background': 'var(--neutral-200)'
-			}
-		],
-		[
-			`${name}-mode-dark`,
-			{
-				...dark,
-				...syntaxColors['one-dark'].dark,
-				'--plot-background': 'var(--neutral-200)'
-			}
-		]
-	]
+	const lightRules = filterRulesByMode(rules, 'light')
+	const darkRules = filterRulesByMode(rules, 'dark')
+
+	const lightTheme = createThemeVariant(name, 'light', lightRules, syntaxColors['one-dark'].light)
+	const darkTheme = createThemeVariant(name, 'dark', darkRules, syntaxColors['one-dark'].dark)
+
+	return [lightTheme, darkTheme]
 }

package/src/ticks.js

@@ -19,8 +19,8 @@ export function generateTicks(
 	// majorTickStep = +majorTickStep
 	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
 	return Array.from({ length }, (_, i) => {
-		const value = i == length - 1 ? upperBound : lowerBound + minorTickStep * i
-		const major = i == 0 || i == length - 1 || i % majorTickStep == 0
+		const value = i === length - 1 ? upperBound : lowerBound + minorTickStep * i
+		const major = i === 0 || i === length - 1 || i % majorTickStep === 0
 		return {
 			value,
 			label: major ? value : '',

package/src/types.js

@@ -1,9 +1,18 @@
+/**
+ * Component map to be used to render the item.
+ * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
+ */
+
 /**
  * Options for the sort order of the column.
  *
  * @typedef {'ascending'|'descending'|'none'} SortOptions
  */
 
+/**
+ * @typedef {checked|unchecked|indeterminate} SelectionState
+ */
+
 /**
  * Options for the horizontal alignment of the column content.
  *
@@ -38,11 +47,6 @@
  * @property {FieldMapping} [fields]         Field mapping to be used on children in the next level
  */
 
-/**
- * Component map to be used to render the item.
- * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
- */
-
 /**
  * Column metadata for the table.
  *
@@ -64,11 +68,15 @@
  * Track the state of a row in the table.
  *
  * @typedef {Object} RowState
- * @property {boolean} visible - Indicates whether the node is visible (true/false).
- * @property {string} [label] - The label of the hierarchy node.
- * @property {boolean} is_parent - Indicates if this node is a parent (true/false).
- * @property {boolean} is_collapsed - Indicates whether the node is collapsed (true/false).
- * @property {number[]} levels - Array of hierarchy indices, including parent indices.
+ * @property {number} index              - The index of the node in the flat list.
+ * @property {number} depth              - The depth of the node in the hierarchy.
+ * @property {string} [value]            - The value of the hierarchy node.
+ * @property {boolean} [isHidden]        - Indicates whether the node is visible (true/false).
+ * @property {boolean} [isParent]        - Indicates if this node is a parent (true/false).
+ * @property {boolean} [isExpanded]      - Indicates whether the node is expanded (true/false).
+ * @property {number} [parentIndex]      - The index of the parent node in the flat list.
+ * @property {SelectionState} [selected] - Indicates whether the node is selected (true/false/indeterminate).
+ * @property {Array<number>} childred    - The indices of the children in the flat list.
  */
 
 /**

package/src/colors/syntax.js

@@ -1,44 +0,0 @@
-export const syntaxColors = {
-	'one-dark': {
-		dark: {
-			'--tab-size': '2',
-			// '--code-bg': 'var(--neutral-100)',
-			'--code-fill': 'var(--neutral-100)',
-			'--code-normal': '#e06c75',
-			'--code-string': '#98c379',
-			'--code-number': '#d19a66',
-			'--code-atrule': 'var(--code-string)',
-			'--code-keyword': '#c678dd',
-			'--code-comment': '#5c6370',
-			'--code-property': '#d19a66',
-			'--code-selector': 'var(--code-keyword)',
-			'--code-operator': '#56b6c2',
-			'--code-function': '#61afef',
-			'--code-gutter-marker': 'black',
-			'--code-gutter-subtle': '#999',
-			'--code-cursor': '#24292e',
-			'--code-cursor-block': 'rgba(20, 255, 20, 0.5)',
-			'--code-linenumbers': 'rgba(27, 31, 35, 0.3)'
-		},
-		light: {
-			'--tab-size': '2',
-			// '--code-bg': 'var(--neutral-100)',
-			'--code-fill': 'var(--neutral-100)',
-			'--code-normal': '#333333',
-			'--code-string': '#9D8248',
-			'--code-number': '#71A15D',
-			'--code-atrule': 'var(--code-string)',
-			'--code-keyword': '#3080B5',
-			'--code-comment': '#969896',
-			'--code-property': '#63a35c',
-			'--code-selector': 'var(--code-keyword)',
-			'--code-operator': '#bf5625',
-			'--code-function': '#a71d5d',
-			'--code-gutter-marker': 'black',
-			'--code-gutter-subtle': '#999',
-			'--code-cursor': '#24292e',
-			'--code-cursor-block': 'rgba(20, 255, 20, 0.5)',
-			'--code-linenumbers': 'rgba(27, 31, 35, 0.3)'
-		}
-	}
-}

package/src/colors/tailwind.js

@@ -1,275 +0,0 @@
-export const defaultTailwindColors = {
-	amber: {
-		50: '#fffbeb',
-		100: '#fef3c7',
-		200: '#fde68a',
-		300: '#fcd34d',
-		400: '#fbbf24',
-		500: '#f59e0b',
-		600: '#d97706',
-		700: '#b45309',
-		800: '#92400e',
-		900: '#78350f',
-		950: '#451a03'
-	},
-	blue: {
-		50: '#eff6ff',
-		100: '#dbeafe',
-		200: '#bfdbfe',
-		300: '#93c5fd',
-		400: '#60a5fa',
-		500: '#3b82f6',
-		600: '#2563eb',
-		700: '#1d4ed8',
-		800: '#1e40af',
-		900: '#1e3a8a',
-		950: '#172554'
-	},
-	cyan: {
-		50: '#ecfeff',
-		100: '#cffafe',
-		200: '#a5f3fc',
-		300: '#67e8f9',
-		400: '#22d3ee',
-		500: '#06b6d4',
-		600: '#0891b2',
-		700: '#0e7490',
-		800: '#155e75',
-		900: '#164e63',
-		950: '#083344'
-	},
-	emerald: {
-		50: '#ecfdf5',
-		100: '#d1fae5',
-		200: '#a7f3d0',
-		300: '#6ee7b7',
-		400: '#34d399',
-		500: '#10b981',
-		600: '#059669',
-		700: '#047857',
-		800: '#065f46',
-		900: '#064e3b',
-		950: '#022c22'
-	},
-	fuscia: {
-		50: '#fdf4ff',
-		100: '#fae8ff',
-		200: '#f5d0fe',
-		300: '#f0abfc',
-		400: '#e879f9',
-		500: '#d946ef',
-		600: '#c026d3',
-		700: '#a21caf',
-		800: '#86198f',
-		900: '#701a75',
-		950: '#4a044e'
-	},
-	gray: {
-		50: '#f9fafb',
-		100: '#f3f4f6',
-		200: '#e5e7eb',
-		300: '#d1d5db',
-		400: '#9ca3af',
-		500: '#6b7280',
-		600: '#4b5563',
-		700: '#374151',
-		800: '#1f2937',
-		900: '#111827',
-		950: '#00060c'
-	},
-	green: {
-		50: '#f0fdf4',
-		100: '#dcfce7',
-		200: '#bbf7d0',
-		300: '#86efac',
-		400: '#4ade80',
-		500: '#22c55e',
-		600: '#16a34a',
-		700: '#15803d',
-		800: '#166534',
-		900: '#14532d',
-		950: '#052e16'
-	},
-	indigo: {
-		50: '#eef2ff',
-		100: '#e0e7ff',
-		200: '#c7d2fe',
-		300: '#a5b4fc',
-		400: '#818cf8',
-		500: '#6366f1',
-		600: '#4f46e5',
-		700: '#4338ca',
-		800: '#3730a3',
-		900: '#312e81',
-		950: '#1e1b4b'
-	},
-	lime: {
-		50: '#f7fee7',
-		100: '#ecfccb',
-		200: '#d9f99d',
-		300: '#bef264',
-		400: '#a3e635',
-		500: '#84cc16',
-		600: '#65a30d',
-		700: '#4d7c0f',
-		800: '#3f6212',
-		900: '#365314',
-		950: '#1a2e05'
-	},
-	orange: {
-		50: '#fff7ed',
-		100: '#ffedd5',
-		200: '#fed7aa',
-		300: '#fdba74',
-		400: '#fb923c',
-		500: '#f97316',
-		600: '#ea580c',
-		700: '#c2410c',
-		800: '#9a3412',
-		900: '#7c2d12',
-		950: '#431407'
-	},
-	pink: {
-		50: '#fdf2f8',
-		100: '#fce7f3',
-		200: '#fbcfe8',
-		300: '#f9a8d4',
-		400: '#f472b6',
-		500: '#ec4899',
-		600: '#db2777',
-		700: '#be185d',
-		800: '#9d174d',
-		900: '#831843',
-		950: '#500724'
-	},
-	purple: {
-		50: '#faf5ff',
-		100: '#f3e8ff',
-		200: '#e9d5ff',
-		300: '#d8b4fe',
-		400: '#c084fc',
-		500: '#a855f7',
-		600: '#9333ea',
-		700: '#7e22ce',
-		800: '#6b21a8',
-		900: '#581c87',
-		950: '#3b0764'
-	},
-	red: {
-		50: '#fef2f2',
-		100: '#fee2e2',
-		200: '#fecaca',
-		300: '#fca5a5',
-		400: '#f87171',
-		500: '#ef4444',
-		600: '#dc2626',
-		700: '#b91c1c',
-		800: '#991b1b',
-		900: '#7f1d1d',
-		950: '#450a0a'
-	},
-	rose: {
-		50: '#fff1f2',
-		100: '#ffe4e6',
-		200: '#fecdd3',
-		300: '#fda4af',
-		400: '#fb7185',
-		500: '#f43f5e',
-		600: '#e11d48',
-		700: '#be123c',
-		800: '#9f1239',
-		900: '#881337',
-		950: '#4c0519'
-	},
-	sky: {
-		50: '#f0f9ff',
-		100: '#e0f2fe',
-		200: '#bae6fd',
-		300: '#7dd3fc',
-		400: '#38bdf8',
-		500: '#0ea5e9',
-		600: '#0284c7',
-		700: '#0369a1',
-		800: '#075985',
-		900: '#0c4a6e',
-		950: '#082f49'
-	},
-	slate: {
-		50: '#f8fafc',
-		100: '#f1f5f9',
-		200: '#e2e8f0',
-		300: '#cbd5e0',
-		400: '#94a3b8',
-		500: '#64748b',
-		600: '#475569',
-		700: '#334155',
-		800: '#1e293b',
-		900: '#0f172a',
-		950: '#020617'
-	},
-	stone: {
-		50: '#fafaf9',
-		100: '#f5f5f4',
-		200: '#e7e5e4',
-		300: '#d6d3d1',
-		400: '#a8a29e',
-		500: '#78716c',
-		600: '#57534e',
-		700: '#44403c',
-		800: '#292524',
-		900: '#1c1917',
-		950: '#0c0a09'
-	},
-	teal: {
-		50: '#f0fdfa',
-		100: '#ccfbf1',
-		200: '#99f6e4',
-		300: '#5eead4',
-		400: '#2dd4bf',
-		500: '#14b8a6',
-		600: '#0d9488',
-		700: '#0f766e',
-		800: '#115e59',
-		900: '#134e4a',
-		950: '#042f2e'
-	},
-	violet: {
-		50: '#f5f3ff',
-		100: '#ede9fe',
-		200: '#ddd6fe',
-		300: '#c4b5fd',
-		400: '#a78bfa',
-		500: '#8b5cf6',
-		600: '#7c3aed',
-		700: '#6d28d9',
-		800: '#5b21b6',
-		900: '#4c1d95',
-		950: '#2e1065'
-	},
-	yellow: {
-		50: '#fefce8',
-		100: '#fef9c3',
-		200: '#fef08a',
-		300: '#fde047',
-		400: '#facc15',
-		500: '#eab308',
-		600: '#ca8a04',
-		700: '#a16207',
-		800: '#854d0e',
-		900: '#713f12',
-		950: '#422006'
-	},
-	zinc: {
-		50: '#fafafa',
-		100: '#f4f4f5',
-		200: '#e4e4e7',
-		300: '#d4d4d8',
-		400: '#a1a1aa',
-		500: '#71717a',
-		600: '#52525b',
-		700: '#3f3f46',
-		800: '#27272a',
-		900: '#18181b',
-		950: '#000000'
-	}
-}

package/src/formatter.js

@@ -1,47 +0,0 @@
-import { identity } from 'ramda'
-
-/**
- * Creates a formatter function that formats a value according to the specified type and optional locale settings.
- * Supported types include 'default' (no formatting), 'integer', 'number', 'date', 'time', and 'currency'.
- *
- * The function is curried, which means it can be partially applied with some arguments and reused
- * to format different values with the same settings.
- *
- * @param {string} type - The type of the formatter to use (e.g., 'integer', 'number', 'date', 'time', 'currency').
- * @param {string} [language='en-US'] - Optional IETF language tag used for locale-specific formatting.
- * @param {string} [currency='USD'] - Optional currency code which is relevant when the type is 'currency'.
- * @param {number} [decimalPlaces=2] - Optional number of decimal places to show with number and currency formatting.
- * @param {number|Date} value - The value to format, it should be of a type corresponding to the formatter type.
- * @returns {*} - The formatted value as a string or the original value if formatting is not applicable.
- */
-export function createFormatter(type, language = 'en-US', decimalPlaces = 2, currency) {
-	const formatWithLocaleOptions = (options, val) => val.toLocaleString(language, options)
-	const formatCurrency = (val, currency = 'USD') =>
-		val.toLocaleString(language, {
-			style: 'currency',
-			currency,
-			minimumFractionDigits: decimalPlaces,
-			maximumFractionDigits: decimalPlaces
-		})
-
-	const formatters = {
-		integer: (val) => formatWithLocaleOptions({ maximumFractionDigits: 0 }, val), // Integer without decimals
-		number: (val) =>
-			formatWithLocaleOptions(
-				{
-					minimumFractionDigits: decimalPlaces,
-					maximumFractionDigits: decimalPlaces
-				},
-				val
-			), // Number with fixed decimal places
-		date: (val) => val.toLocaleDateString(language), // Locale-specific date format
-		time: (val) => val.toLocaleTimeString(language), // Locale-specific time format
-		currency: currency ? (val) => formatCurrency(val, currency) : formatCurrency
-		// Currency with fixed decimal places and currency symbol
-	}
-	if (type in formatters) return formatters[type]
-	return identity
-	// return propOr(identity, type, formatters)(value) // Apply the formatter based on the type
-}
-
-// export

package/src/tabular.js

@@ -1,64 +0,0 @@
-import { createFormatter } from './formatter'
-
-export function tabular(data, columns, options) {
-	const { path, separator = '/', actions } = options ?? {}
-
-	let metadata = columns
-	if (!Array.isArray(columns) || columns.length === 0) metadata = deriveColumnMetadata(data)
-
-	return {
-		data,
-		columns: metadata,
-		filter: () => {},
-		sort: () => {}
-	}
-}
-
-/**
- * Derives column metadata from the data to be used in a tabular component.
- *
- * @param {Array} data - The data to derive column metadata from.
- * @returns {Array<import('./types').ColumnMetadata>} - The derived column metadata.
- */
-export function deriveColumnMetadata(dataArray) {
-	if (dataArray.length === 0) {
-		return []
-	}
-
-	const firstRow = dataArray[0]
-	const language = navigator.language || 'en-US' // Get the browser's language or default to 'en-US'
-
-	const columns = []
-
-	for (const key in firstRow) {
-		// if (Object.prototype.hasOwnProperty.call(firstRow, key)) {
-		const dataType = typeof firstRow[key]
-		const formatter = createFormatter(dataType, language)
-		const fields = { text: key }
-
-		if (key.endsWith('_currency')) {
-			const currencyColumn = key
-			const baseColumn = key.replace(/_currency$/, '')
-
-			// Find the existing column and update its currency attribute
-			const existingColumn = columns.find((column) => column.name === baseColumn)
-			existingColumn.dataType = 'currency'
-			existingColumn.formatter = createFormatter('currency', language, 2)
-			if (existingColumn) {
-				existingColumn.fields = {
-					...existingColumn.fields,
-					currency: currencyColumn
-				}
-			}
-		} else {
-			columns.push({
-				name: key,
-				dataType: dataType,
-				fields,
-				formatter
-			})
-		}
-	}
-
-	return columns
-}