@flux-ui/types 3.0.0-next.6 → 3.0.0-next.61

package/README.md

@@ -1,45 +1,39 @@
-# Flux
+# `@flux-ui/types`
 
-This repository contains the source code for the basic components that are used throughout our front-end projects. It
-targets Vue 3+. Please read the following instructions and checks in order to proceed.
+Public TypeScript types shared across the Flux UI packages.
 
-## 📦 Registry
+This package has **no build step** — it ships its TypeScript sources directly.
 
-- The UI library package is available under `@flux-ui/components`.
-- The Dashboard library package is available under `@flux-ui/dashboard`.
-- The internal package is available under `@flux-ui/internals`.
+## Highlights
 
-## ⚠️ Requirements
+| File            | Contents                                                                |
+|-----------------|-------------------------------------------------------------------------|
+| `common.ts`     | Cross-cutting types — `FluxColor`, `FluxSize`, `FluxIconName`, `FluxTo` |
+| `components.ts` | Per-component `Props`, `Emits`, and `Slots` types                       |
+| `form.ts`       | Form-related types                                                      |
+| `filter.ts`     | Filter component types                                                  |
+| `notify.ts`     | Snackbar, alert, confirm, and prompt types                              |
+| `statistics.ts` | Types for `@flux-ui/statistics`                                         |
 
-- Install Node.js ^22
-- Install pnpm using `npm i -g pnpm`.
-- Configure a new environment variable `FONTAWESOME_NPM_AUTH_TOKEN`. This should be a valid Font Awesome private npm auth token.
-- Use `pnpm install` to install the required packages.
-- Use `pnpm dev` to start a build watcher for both targets.
-- Use `pnpm build` to build a production bundle.
-- Use `pnpm link` to link the dist folder of flux to your global node_modules.
+> Component-owned types live next to their component as inline `defineProps` / `defineEmits` / `defineSlots`.
+> Only types with cross-package or cross-component reuse belong here.
 
-## 🪵 Git
+## ⭐️ Prerequisites
 
-All commit messages and branches will be in English.
+- Bun >= 1.2.13
+- Node >= 23
 
-### Branches
+## 🚀 Getting started
 
-- **Main** — Contains the latest stable release and is the exact source that is running in production.
-- **Develop** — Contains the latest staging release that is marked for deployment and is the exact source that is running on staging.
-- **Feature branches** — Any feature should have its own feature branch. Once complete, the branch should be merged into the _develop_ branch and the feature branch should be deleted.
-- **Bugfix branches** — When a bug is found, it should be fixed within a bugfix branch. Once complete the branch should be merged into the _develop_ branch and the feature branch should be deleted.
+1. Make sure the Flux monorepo is checked out.
+2. Run `bun install` in the project root.
 
-### Commit messages
+There is no build step; consumers import directly from `./src/index.ts`.
 
-Commit messages are bound to the following templates:
+## 📦 Sibling packages
 
-- `<type>: <message> `
-- `<type>(<feature>): <message>`
-- `<type>(<feature>): <message> [<issue-number>]`
-
-#### Examples
-
-- `feat(expandable): adds header slot to expandable.`
-- `feat(expandable): adds header slot to expandable. [FLUX-123]`
-- `chore: adds vue 3 build target.`
+- [`@flux-ui/components`](../components)
+- [`@flux-ui/internals`](../internals)
+- [`@flux-ui/statistics`](../statistics)
+- [`@flux-ui/dashboard`](../dashboard)
+- [`@flux-ui/application`](../application)

package/package.json

@@ -1,29 +1,20 @@
 {
     "name": "@flux-ui/types",
     "description": "Contains all public types of Flux UI packages.",
-    "version": "3.0.0-next.6",
+    "version": "3.0.0-next.61",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
-    "homepage": "https://flux.bas.dev",
+    "homepage": "https://flux-ui.dev",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/basmilius/flux.git",
-        "directory": "packages/primitives"
+        "directory": "packages/types"
     },
     "keywords": [
-        "ui library",
-        "component library",
-        "design system",
-        "vue",
-        "vue 3",
-        "ui",
-        "components",
-        "flux"
+        "flux",
+        "types"
     ],
-    "scripts": {
-        "prepublishOnly": "cp ../../README.md ."
-    },
     "exports": {
         ".": "./src/index.ts"
     },
@@ -32,16 +23,20 @@
         "provenance": true
     },
     "files": [
-        "src",
-        "tsconfig.json"
+        "src"
     ],
     "main": "./src/index.ts",
     "module": "./src/index.ts",
     "types": "./src/index.ts",
     "typings": "./src/index.ts",
     "sideEffects": false,
-    "dependencies": {},
+    "peerDependencies": {
+        "@fortawesome/fontawesome-common-types": "^7.2.0",
+        "luxon": "^3.7.2"
+    },
     "devDependencies": {
-        "@types/luxon": "^3.6.2"
+        "@fortawesome/fontawesome-common-types": "^7.2.0",
+        "@types/luxon": "^3.7.1",
+        "luxon": "^3.7.2"
     }
 }

package/src/common.ts

@@ -1,9 +1,11 @@
-import type { FontAwesome } from './font-awesome';
-import type { MaterialSymbol } from './material-symbols';
+import type { IconName as FontAwesome } from '@fortawesome/fontawesome-common-types';
 
-export type FluxIconName = FontAwesome | MaterialSymbol;
-export type FluxFontAwesomeIconName = FontAwesome;
-export type FluxMaterialIconName = MaterialSymbol;
+export type FluxIconName = FontAwesome;
+
+export type FluxAlignment =
+    | 'start'
+    | 'center'
+    | 'end';
 
 export type FluxColor =
     | 'gray'

package/src/components.ts

@@ -53,3 +53,47 @@ export type FluxSegmentedControlItemObject = {
     readonly icon?: FluxIconName;
     readonly label?: string;
 };
+
+export type FluxKanbanMoveEvent = {
+    readonly itemId: string | number;
+    readonly fromColumnId: string | number;
+    readonly toColumnId: string | number;
+    readonly beforeItemId?: string | number;
+};
+
+export type FluxKanbanMoveColumnEvent = {
+    readonly columnId: string | number;
+    readonly beforeColumnId?: string | number;
+};
+
+export type FluxTreeViewOption = {
+    readonly id: string | number;
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly children?: FluxTreeViewOption[];
+};
+
+export type FluxCommandSubAction = {
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly onActivate: () => void;
+};
+
+export type FluxCommandSourceItem = {
+    readonly id: string | number;
+    readonly label: string;
+    readonly subLabel?: string;
+    readonly icon?: FluxIconName;
+    readonly command?: string;
+    readonly subActions?: FluxCommandSubAction[];
+    readonly onActivate: () => void;
+};
+
+export type FluxCommandSource = {
+    readonly key: string;
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly tab?: boolean;
+    readonly items: FluxCommandSourceItem[];
+    readonly fetchSearch?: (query: string) => Promise<FluxCommandSourceItem[]>;
+};

package/src/filter.ts

@@ -41,6 +41,7 @@ export type FluxFilterOptionHeader = {
 };
 
 export type FluxFilterOptionItem = {
+    readonly icon?: FluxIconName;
     readonly label: string;
     readonly value: FluxFilterValueSingle;
 };
@@ -60,10 +61,54 @@ export type FluxFilterValue =
     | FluxFilterValueSingle
     | FluxFilterValueSingle[];
 
-export type FluxFilterState = {
-    get resettable(): string[];
+export type FluxFilterState = Record<string, FluxFilterValue>;
+
+export type FluxFilterSpec = {
+    readonly icon?: FluxIconName;
+    readonly label: string;
+    readonly name: string;
+};
+
+export type FluxFilterDateSpec = FluxFilterSpec;
+
+export type FluxFilterDateRangeSpec = FluxFilterSpec;
+
+export type FluxFilterOptionSpec = FluxFilterSpec & {
+    readonly options: FluxFilterOptionRow[];
+};
+
+export type FluxFilterOptionAsyncSpec = FluxFilterSpec & {
+    fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
+};
+
+export type FluxFilterOptionsSpec = FluxFilterSpec & {
+    readonly options: FluxFilterOptionRow[];
+};
+
+export type FluxFilterOptionsAsyncSpec = FluxFilterSpec & {
+    fetchOptions(ids: FluxFilterValue[]): Promise<FluxFilterOptionRow[]>;
+};
+
+export type FluxFilterRangeSpec = FluxFilterSpec & {
+    formatter?(value: number): string;
+};
+
+export type FluxFilterSpecMap = {
+    date: FluxFilterDateSpec;
+    dateRange: FluxFilterDateRangeSpec;
+    option: FluxFilterOptionSpec;
+    optionAsync: FluxFilterOptionAsyncSpec;
+    options: FluxFilterOptionsSpec;
+    optionsAsync: FluxFilterOptionsAsyncSpec;
+    range: FluxFilterRangeSpec;
+};
 
-    reset(): void;
-} & {
-    [key: string]: FluxFilterValue | Function;
+export type FluxFilterEntryMap = {
+    date: FluxFilterDateEntry;
+    dateRange: FluxFilterDateRangeEntry;
+    option: FluxFilterOptionEntry;
+    optionAsync: FluxFilterOptionEntry;
+    options: FluxFilterOptionsEntry;
+    optionsAsync: FluxFilterOptionsEntry;
+    range: FluxFilterRangeEntry;
 };

package/src/form.ts

@@ -1,8 +1,32 @@
 import type { FluxIconName } from './common';
 
+export type FluxFormInputBaseProps = {
+    readonly autoFocus?: boolean;
+    readonly disabled?: boolean;
+    readonly error?: string | null;
+    readonly isCondensed?: boolean;
+    readonly isLoading?: boolean;
+    readonly isReadonly?: boolean;
+    readonly isSecondary?: boolean;
+    readonly name?: string;
+    readonly placeholder?: string;
+};
+
+export type FluxFormTreeViewSelectOption = {
+    readonly id: string | number;
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly selectable?: boolean;
+    readonly children?: FluxFormTreeViewSelectOption[];
+};
+
+export type FluxFormTreeViewSelectValue = FluxFormTreeViewSelectValueSingle | FluxFormTreeViewSelectValueSingle[];
+export type FluxFormTreeViewSelectValueSingle = string | number;
+
 export type FluxFormSelectGroup = {
     readonly icon?: FluxIconName;
     readonly label: string;
+    readonly value?: never;
 };
 
 export type FluxFormSelectOption = {
@@ -10,6 +34,8 @@ export type FluxFormSelectOption = {
     readonly command?: string;
     readonly commandIcon?: FluxIconName;
     readonly icon?: FluxIconName;
+    readonly imageAlt?: string;
+    readonly imageSrc?: string;
     readonly label: string;
     readonly selectable?: boolean;
     readonly value: string | number | null;

package/src/index.ts

@@ -1,12 +1,11 @@
 export type {
+    FluxAlignment,
     FluxAutoCompleteType,
     FluxColor,
     FluxDirection,
-    FluxFontAwesomeIconName,
     FluxIconName,
     FluxInputMask,
     FluxInputType,
-    FluxMaterialIconName,
     FluxMaybePromise,
     FluxPressableType,
     FluxSize,
@@ -18,35 +17,55 @@ export type {
     FluxButtonProps,
     FluxButtonSize,
     FluxButtonSlots,
+    FluxCommandSource,
+    FluxCommandSourceItem,
+    FluxCommandSubAction,
     FluxFocalPointObject,
+    FluxKanbanMoveColumnEvent,
+    FluxKanbanMoveEvent,
     FluxLegendObject,
     FluxPercentageBarItemObject,
-    FluxSegmentedControlItemObject
+    FluxSegmentedControlItemObject,
+    FluxTreeViewOption
 } from './components';
 
 export type {
     FluxFilterBase,
     FluxFilterDateEntry,
     FluxFilterDateRangeEntry,
+    FluxFilterDateRangeSpec,
+    FluxFilterDateSpec,
+    FluxFilterEntryMap,
     FluxFilterItem,
+    FluxFilterOptionAsyncSpec,
     FluxFilterOptionEntry,
     FluxFilterOptionHeader,
     FluxFilterOptionItem,
     FluxFilterOptionRow,
+    FluxFilterOptionSpec,
+    FluxFilterOptionsAsyncSpec,
     FluxFilterOptionsEntry,
+    FluxFilterOptionsSpec,
     FluxFilterRangeEntry,
+    FluxFilterRangeSpec,
+    FluxFilterSpec,
+    FluxFilterSpecMap,
     FluxFilterState,
     FluxFilterValue,
     FluxFilterValueSingle
 } from './filter';
 
 export type {
+    FluxFormInputBaseProps,
     FluxFormSelectEntry,
     FluxFormSelectGroup,
     FluxFormSelectOption,
     FluxFormSelectOptions,
     FluxFormSelectValue,
-    FluxFormSelectValueSingle
+    FluxFormSelectValueSingle,
+    FluxFormTreeViewSelectOption,
+    FluxFormTreeViewSelectValue,
+    FluxFormTreeViewSelectValueSingle
 } from './form';
 
 export type {
@@ -56,3 +75,7 @@ export type {
     FluxSnackbarObject,
     FluxTooltipObject
 } from './notify';
+
+export type {
+    FluxStatisticsChange
+} from './statistics';

package/src/statistics.ts

@@ -0,0 +1,7 @@
+import type { FluxColor, FluxIconName } from './common';
+
+export type FluxStatisticsChange = {
+    readonly color?: FluxColor;
+    readonly icon?: FluxIconName;
+    readonly value: string | number;
+};