@punkbit/cui 0.0.247-rc.2

package/dist/utils/mergeRefs.d.ts

@@ -0,0 +1 @@
+export declare const mergeRefs: <T = HTMLElement>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>) => React.RefCallback<T>;

package/dist/utils/test-utils.d.ts

@@ -0,0 +1,58 @@
+import { ThemeName } from '../theme';
+declare const renderCUI: (children: React.ReactNode, theme?: ThemeName) => {
+    rerender: (rerenderChildren: React.ReactNode) => void;
+    container: HTMLElement;
+    baseElement: HTMLElement;
+    debug: (baseElement?: import('react-dom/client').Container | (Element | Document) | Array<import('react-dom/client').Container | (Element | Document)>, maxLength?: number, options?: import('pretty-format').OptionsReceived) => void;
+    unmount: () => void;
+    asFragment: () => DocumentFragment;
+    getByLabelText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByLabelText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByLabelText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByLabelText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByLabelText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByLabelText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByPlaceholderText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement;
+    getAllByPlaceholderText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    queryByPlaceholderText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByPlaceholderText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    findByPlaceholderText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByPlaceholderText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').SelectorMatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByAltText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement;
+    getAllByAltText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    queryByAltText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByAltText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    findByAltText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByAltText: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTitle: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement;
+    getAllByTitle: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    queryByTitle: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTitle: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    findByTitle: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTitle: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByDisplayValue: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement;
+    getAllByDisplayValue: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    queryByDisplayValue: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByDisplayValue: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    findByDisplayValue: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByDisplayValue: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByRole: (role: import('@testing-library/dom').ByRoleMatcher, options?: import('@testing-library/dom').ByRoleOptions | undefined) => HTMLElement;
+    getAllByRole: (role: import('@testing-library/dom').ByRoleMatcher, options?: import('@testing-library/dom').ByRoleOptions | undefined) => HTMLElement[];
+    queryByRole: (role: import('@testing-library/dom').ByRoleMatcher, options?: import('@testing-library/dom').ByRoleOptions | undefined) => HTMLElement | null;
+    queryAllByRole: (role: import('@testing-library/dom').ByRoleMatcher, options?: import('@testing-library/dom').ByRoleOptions | undefined) => HTMLElement[];
+    findByRole: (role: import('@testing-library/dom').ByRoleMatcher, options?: import('@testing-library/dom').ByRoleOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByRole: (role: import('@testing-library/dom').ByRoleMatcher, options?: import('@testing-library/dom').ByRoleOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTestId: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement;
+    getAllByTestId: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    queryByTestId: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTestId: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined) => HTMLElement[];
+    findByTestId: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTestId: (id: import('@testing-library/dom').Matcher, options?: import('@testing-library/dom').MatcherOptions | undefined, waitForElementOptions?: import('@testing-library/dom').waitForOptions | undefined) => Promise<HTMLElement[]>;
+};
+export { renderCUI };

package/dist/utils/truncate.d.ts

@@ -0,0 +1,13 @@
+/**
+ * truncateFilename
+ *
+ * On occasion, we may be dealing with filenames - which could be very large
+ * and not practical to display in the user interface. This utility func
+ * ensures that we return a name that looks recognisable and fits the
+ * component using the data.
+ *
+ * @param filename
+ * @param maxLength
+ * @param delimiter
+ */
+export declare const truncateFilename: (filename: string, maxLength?: number, delimiter?: string) => string;

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@punkbit/cui",
+  "version": "0.0.247-rc.2",
+  "type": "module",
+  "license": "Apache-2.0",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/click-ui.es.js",
+      "require": "./dist/click-ui.umd.js"
+    },
+    "./bundled": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/click-ui.bundled.es.js",
+      "require": "./dist/click-ui.bundled.umd.js"
+    }
+  },
+  "main": "./dist/click-ui.umd.js",
+  "module": "./dist/click-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && vite build && bun build:bundled",
+    "build:bundled": "vite build -- bundled",
+    "build-storybook": "storybook build",
+    "build:watch": "watch 'bun build' ./src",
+    "chromatic": "bunx chromatic",
+    "dev": "vite",
+    "generate-tokens": "node build-tokens.js && prettier --write \"src/theme/tokens/*.ts\" --config .prettierrc",
+    "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
+    "prettify": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
+    "prettier:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
+    "preview": "vite preview",
+    "publish:click-ui": "bun test && bun build && bun npm publish",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "watch": "vitest --watch"
+  },
+  "dependencies": {
+    "@h6s/calendar": "2.0.1",
+    "@radix-ui/react-accordion": "1.1.2",
+    "@radix-ui/react-avatar": "1.0.4",
+    "@radix-ui/react-checkbox": "1.0.4",
+    "@radix-ui/react-context-menu": "2.1.5",
+    "@radix-ui/react-dialog": "1.0.5",
+    "@radix-ui/react-dismissable-layer": "1.0.5",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-hover-card": "1.0.7",
+    "@radix-ui/react-popover": "1.0.7",
+    "@radix-ui/react-popper": "1.1.3",
+    "@radix-ui/react-radio-group": "1.1.3",
+    "@radix-ui/react-separator": "1.0.3",
+    "@radix-ui/react-switch": "1.0.2",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-toast": "1.1.5",
+    "@radix-ui/react-tooltip": "1.0.7",
+    "lodash": "^4.17.21",
+    "react-sortablejs": "^6.1.4",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "sortablejs": "^1.15.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-links": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@tokens-studio/sd-transforms": "^1.2.0",
+    "@types/lodash-es": "^4.17.7",
+    "@types/node": "^24.10.1",
+    "@types/react": "18.3.2",
+    "@types/react-dom": "18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/react-window": "^1.8.8",
+    "@types/sortablejs": "^1.15.2",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^8",
+    "@typescript-eslint/parser": "^8",
+    "@vitejs/plugin-react": "^5.1.2",
+    "babel-plugin-styled-components": "^2.1.4",
+    "chromatic": "^13.3.4",
+    "date-fns": "4.1.0",
+    "dayjs": "1.11.13",
+    "eslint": "^9",
+    "eslint-plugin-prefer-arrow-functions": "^3.3.2",
+    "eslint-plugin-react-hooks": "^5",
+    "eslint-plugin-react-refresh": "0.4.7",
+    "eslint-plugin-storybook": "^10.0.7",
+    "globals": "^16.5.0",
+    "jsdom": "^24.0.0",
+    "prettier": "3.7.4",
+    "prop-types": "^15.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "storybook": "^10.0.7",
+    "storybook-addon-pseudo-states": "^10.0.7",
+    "style-dictionary": "^5.0.0",
+    "styled-components": "prerelease",
+    "stylis": "^4.3.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.8",
+    "watch": "^1.0.2"
+  },
+  "peerDependencies": {
+    "dayjs": "^1.11.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": ">= 5"
+  },
+  "resolutions": {
+    "@types/react": "18.3.2",
+    "@types/react-dom": "18.3.0"
+  },
+  "packageManager": "yarn@4.5.3",
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}