@bcc-code/component-library-vue 0.0.0-dev.1f2ce94

package/dist-types/contexts.d.ts

@@ -0,0 +1,52 @@
+export declare enum COLORS {
+    BRAND = "brand",
+    NEUTRAL = "neutral",
+    DANGER = "danger",
+    WARNING = "warning",
+    SUCCESS = "success",
+    INFO = "info",
+    GRAY = "gray",
+    BLUE = "blue",
+    TEAL = "teal",
+    GREEN = "green",
+    BROWN = "brown",
+    YELLOW = "yellow",
+    ORANGE = "orange",
+    RED = "red",
+    PURPLE = "purple",
+    MAGENTA = "magenta"
+}
+export declare enum LEVELS {
+    SUBTLEST = "subtlest",
+    SUBTLER = "subtler",
+    SUBTLE = "subtle",
+    BOLD = "bold",
+    BOLDER = "bolder",
+    BOLDEST = "boldest"
+}
+/** Colors that have all level variants (default, bolder, boldest, etc.). */
+type FullLevelColors = COLORS.BRAND | COLORS.NEUTRAL;
+type AccentColors = COLORS.GRAY | COLORS.BLUE | COLORS.TEAL | COLORS.GREEN | COLORS.BROWN | COLORS.YELLOW | COLORS.ORANGE | COLORS.RED | COLORS.PURPLE | COLORS.MAGENTA;
+type Severities = COLORS.INFO | COLORS.SUCCESS | COLORS.WARNING | COLORS.DANGER;
+type SeverityLevels = LEVELS.SUBTLEST | LEVELS.BOLDER;
+/** Accent colors only have these four levels (no default, bolder, boldest). */
+type AccentLevels = LEVELS.SUBTLEST | LEVELS.SUBTLER | LEVELS.SUBTLE | LEVELS.BOLDER;
+/** Context token for color C at level L (helper to avoid ambiguous > in template literal). */
+type ContextToken<C extends COLORS, L extends LEVELS> = `${C}-${L}`;
+export type LEVELS_MAP<L extends LEVELS, C extends COLORS> = {
+    [K in L]: ContextToken<C, K>;
+};
+/**
+ * Type with only the specified context levels for all colors.
+ * For brand/neutral, any level in L is allowed.
+ * For accent colors, only levels in L that are also in AccentLevels (subtlest, subtler, subtle, bold) are allowed.
+ */
+export type ONLY_LEVELS<L extends LEVELS, C extends COLORS = COLORS> = {
+    [K in C]: LEVELS_MAP<L, K>;
+};
+/** Type with all context levels: brand/neutral have all levels, accent colors have only subtlest, subtler, subtle, bold. */
+export type ALL_LEVELS = ONLY_LEVELS<AccentLevels, AccentColors> & ONLY_LEVELS<LEVELS, FullLevelColors> & ONLY_LEVELS<SeverityLevels, Severities>;
+export declare const BCC_CONTEXTS: Readonly<ALL_LEVELS>;
+export declare const BCC_CONTEXT_LIST: readonly BCC_CONTEXT[];
+export type BCC_CONTEXT = ContextToken<AccentColors, AccentLevels> | ContextToken<FullLevelColors, LEVELS> | ContextToken<Severities, SeverityLevels> | Severities;
+export {};

package/dist-types/index.d.ts

@@ -0,0 +1,146 @@
+/**
+ * @bcc-code/component-library-vue
+ *
+ * Vue component library with PrimeVue and BCC design tokens. You only need this
+ * package: no separate Tailwind or PrimeVue install.
+ *
+ * Usage: In your main.ts file, import the library and use the setup function.
+ *  import { BccComponentLibrary } from '@bcc-code/component-library-vue';
+ *  app.use(BccComponentLibrary);
+ *
+ * For styling, you have two options:
+ * 1. Recommended (full Tailwind: utility classes + tree-shaking in your app):
+ *    - vite.config: plugins: [..., tailwindcss()] with import tailwindcss from '@tailwindcss/vite'
+ *    - Main CSS file: @import "@bcc-code/component-library-vue/theme.css";
+ *    Tailwind runs in your build and only bundles classes you use.
+ * 2. Alternative: Pre-built CSS only (no Tailwind in your app; library styles + components only):
+ *    - main.ts: import "@bcc-code/component-library-vue/style.css";
+ */
+import './style.css';
+export { default as BccPreset } from '@bcc-code/design-tokens/primevue';
+export { BCC_CONTEXTS, type BCC_CONTEXT } from './contexts';
+export { default as BccComponentLibrary } from './setup';
+export * from './types';
+export * from './components/custom';
+export * from './components/wrapped';
+export { default as BccAccordion } from 'primevue/accordion';
+export { default as BccAccordionContent } from 'primevue/accordioncontent';
+export { default as BccAccordionHeader } from 'primevue/accordionheader';
+export { default as BccAccordionPanel } from 'primevue/accordionpanel';
+export { default as BccAccordionTab } from 'primevue/accordiontab';
+export { default as BccAnimateOnScroll } from 'primevue/animateonscroll';
+export { default as BccAutoComplete } from 'primevue/autocomplete';
+export { default as BccAvatarGroup } from 'primevue/avatargroup';
+export { default as BccBadgeDirective } from 'primevue/badgedirective';
+export { default as BccBlockUI } from 'primevue/blockui';
+export { default as BccBreadcrumb } from 'primevue/breadcrumb';
+export { default as BccButtonGroup } from 'primevue/buttongroup';
+export { default as BccCard } from 'primevue/card';
+export { default as BccCarousel } from 'primevue/carousel';
+export { default as BccCascadeSelect } from 'primevue/cascadeselect';
+export { default as BccCheckboxGroup } from 'primevue/checkboxgroup';
+export { default as BccChip } from 'primevue/chip';
+export { default as BccChips } from 'primevue/chips';
+export { default as BccColorPicker } from 'primevue/colorpicker';
+export { default as BccColumn } from 'primevue/column';
+export { default as BccColumnGroup } from 'primevue/columngroup';
+export { default as BccConfig } from 'primevue/config';
+export { default as BccConfirmDialog } from 'primevue/confirmdialog';
+export { default as BccConfirmPopup } from 'primevue/confirmpopup';
+export { default as BccContextMenu } from 'primevue/contextmenu';
+export { default as BccDataTable } from 'primevue/datatable';
+export { default as BccDataView } from 'primevue/dataview';
+export { default as BccDatePicker } from 'primevue/datepicker';
+export { default as BccDeferredContent } from 'primevue/deferredcontent';
+export { default as BccDialog } from 'primevue/dialog';
+export { default as BccDivider } from 'primevue/divider';
+export { default as BccDock } from 'primevue/dock';
+export { default as BccDrawer } from 'primevue/drawer';
+export { default as BccDynamicDialog } from 'primevue/dynamicdialog';
+export { default as BccFieldset } from 'primevue/fieldset';
+export { default as BccFileUpload } from 'primevue/fileupload';
+export { default as BccFloatLabel } from 'primevue/floatlabel';
+export { default as BccFluid } from 'primevue/fluid';
+export { default as BccFocusTrap } from 'primevue/focustrap';
+export { default as BccGalleria } from 'primevue/galleria';
+export { default as BccIconField } from 'primevue/iconfield';
+export { default as BccIftaLabel } from 'primevue/iftalabel';
+export { default as BccImage } from 'primevue/image';
+export { default as BccImageCompare } from 'primevue/imagecompare';
+export { default as BccInplace } from 'primevue/inplace';
+export { default as BccInputChips } from 'primevue/inputchips';
+export { default as BccInputGroup } from 'primevue/inputgroup';
+export { default as BccInputGroupAddon } from 'primevue/inputgroupaddon';
+export { default as BccInputIcon } from 'primevue/inputicon';
+export { default as BccInputMask } from 'primevue/inputmask';
+export { default as BccInputNumber } from 'primevue/inputnumber';
+export { default as BccInputOtp } from 'primevue/inputotp';
+export { default as BccInputText } from 'primevue/inputtext';
+export { default as BccKeyFilter } from 'primevue/keyfilter';
+export { default as BccKnob } from 'primevue/knob';
+export { default as BccListbox } from 'primevue/listbox';
+export { default as BccMegaMenu } from 'primevue/megamenu';
+export { default as BccMenu } from 'primevue/menu';
+export { default as BccMenubar } from 'primevue/menubar';
+export { default as BccMeterGroup } from 'primevue/metergroup';
+export { default as BccMultiSelect } from 'primevue/multiselect';
+export { default as BccOrderList } from 'primevue/orderlist';
+export { default as BccOrganizationChart } from 'primevue/organizationchart';
+export { default as BccOverlayBadge } from 'primevue/overlaybadge';
+export { default as BccPaginator } from 'primevue/paginator';
+export { default as BccPanel } from 'primevue/panel';
+export { default as BccPanelMenu } from 'primevue/panelmenu';
+export { default as BccPassword } from 'primevue/password';
+export { default as BccPickList } from 'primevue/picklist';
+export { default as BccPopover } from 'primevue/popover';
+export { default as BccPortal } from 'primevue/portal';
+export { default as BccProgressBar } from 'primevue/progressbar';
+export { default as BccProgressSpinner } from 'primevue/progressspinner';
+export { default as BccRadioButton } from 'primevue/radiobutton';
+export { default as BccRadioButtonGroup } from 'primevue/radiobuttongroup';
+export { default as BccRating } from 'primevue/rating';
+export { default as BccRipple } from 'primevue/ripple';
+export { default as BccRow } from 'primevue/row';
+export { default as BccScrollPanel } from 'primevue/scrollpanel';
+export { default as BccScrollTop } from 'primevue/scrolltop';
+export { default as BccSelect } from 'primevue/select';
+export { default as BccSelectButton } from 'primevue/selectbutton';
+export { default as BccSkeleton } from 'primevue/skeleton';
+export { default as BccSlider } from 'primevue/slider';
+export { default as BccSpeedDial } from 'primevue/speeddial';
+export { default as BccSplitButton } from 'primevue/splitbutton';
+export { default as BccSplitter } from 'primevue/splitter';
+export { default as BccSplitterPanel } from 'primevue/splitterpanel';
+export { default as BccStep } from 'primevue/step';
+export { default as BccStepItem } from 'primevue/stepitem';
+export { default as BccStepList } from 'primevue/steplist';
+export { default as BccStepPanel } from 'primevue/steppanel';
+export { default as BccStepPanels } from 'primevue/steppanels';
+export { default as BccStepper } from 'primevue/stepper';
+export { default as BccSteps } from 'primevue/steps';
+export { default as BccStyleClass } from 'primevue/styleclass';
+export { default as BccTab } from 'primevue/tab';
+export { default as BccTabList } from 'primevue/tablist';
+export { default as BccTabMenu } from 'primevue/tabmenu';
+export { default as BccTabPanel } from 'primevue/tabpanel';
+export { default as BccTabPanels } from 'primevue/tabpanels';
+export { default as PrimevueTabs } from 'primevue/tabs';
+export { default as BccTabView } from 'primevue/tabview';
+export { default as BccTerminal } from 'primevue/terminal';
+export { default as BccTerminalService } from 'primevue/terminalservice';
+export { default as BccTextarea } from 'primevue/textarea';
+export { default as BccTieredMenu } from 'primevue/tieredmenu';
+export { default as BccTimeline } from 'primevue/timeline';
+export { default as BccToast } from 'primevue/toast';
+export { default as BccToastService } from 'primevue/toastservice';
+export { default as BccToggleSwitch } from 'primevue/toggleswitch';
+export { default as BccToolbar } from 'primevue/toolbar';
+export { default as BccTooltip } from 'primevue/tooltip';
+export { default as BccTree } from 'primevue/tree';
+export { default as BccTreeSelect } from 'primevue/treeselect';
+export { default as BccTreeTable } from 'primevue/treetable';
+export { default as BccVirtualScroller } from 'primevue/virtualscroller';
+export { useConfirm } from 'primevue/useconfirm';
+export { useDialog } from 'primevue/usedialog';
+export { useToast } from 'primevue/usetoast';
+export { default as useAnimatedNumber } from './composables/animatedNumber';

package/dist-types/setup.d.ts

@@ -0,0 +1,2 @@
+import type { App } from 'vue';
+export default function setup(app: App): void;

package/dist-types/types.d.ts

@@ -0,0 +1,4 @@
+import type { Component, FunctionalComponent, RenderFunction, VNode } from 'vue';
+export type VueComponent = string | Component | FunctionalComponent | VNode | RenderFunction;
+export type IInterval = ReturnType<typeof setInterval>;
+export type ITimeout = ReturnType<typeof setTimeout>;

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@bcc-code/component-library-vue",
+  "version": "0.0.0-dev.1f2ce94",
+  "type": "module",
+  "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
+  "repository": "https://github.com/bcc-code/bcc-design.git",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@9.15.0",
+  "files": [
+    "dist",
+    "dist-types",
+    "dist-css"
+  ],
+  "main": "./dist/component-library.umd.cjs",
+  "module": "./dist/component-library.js",
+  "types": "./dist-types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist-types/index.d.ts",
+        "default": "./dist/component-library.js"
+      },
+      "require": {
+        "types": "./dist-types/index.d.ts",
+        "default": "./dist/component-library.umd.cjs"
+      }
+    },
+    "./style.css": "./dist/index.css",
+    "./theme.css": "./dist/theme.css",
+    "./archivo-font.css": "./dist/archivo-font.css",
+    "./tailwind.css": "./dist-css/tailwind.css"
+  },
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "run-p typecheck build:types build:vite",
+    "build:vite": "rimraf dist && vite build && node scripts/build-theme-css.mjs",
+    "build:types": "rimraf dist-types && vue-tsc -p tsconfig.build.json",
+    "generate:semantic": "node scripts/restructure-semantic-primitives.mjs",
+    "generate:semantic-css": "node scripts/generate-semantic-css.mjs",
+    "generate:context-modes": "node scripts/generate-context-modes.mjs",
+    "generate:context-css": "node scripts/generate-context-css.mjs",
+    "generate": "pnpm run generate:semantic && pnpm run generate:semantic-css && pnpm run generate:context-modes && pnpm run generate:context-css",
+    "sync:primevue-icon-patches": "node scripts/sync-primevue-icon-patches.mjs",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src/**/*.ts src/**/*.vue",
+    "lint:fix": "eslint --fix src/**/*.ts src/**/*.vue",
+    "test:unit": "vitest run",
+    "release-channel": "node ./scripts/release-channel.cjs",
+    "create-version": "node ./scripts/version.cjs"
+  },
+  "dependencies": {
+    "@bcc-code/icons-vue": "^1.4.0",
+    "@primeuix/themes": "^2.0.3",
+    "@tailwindcss/vite": "^4.1.18",
+    "primevue": "^4.5.4",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@bcc-code/design-tokens": "^5.1.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@bcc-code/design-tokens": "^5.1.0",
+    "@eslint/js": "^9.39.2",
+    "@primevue/auto-import-resolver": "^4.5.4",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/vue3": "^10.0.0",
+    "@storybook/vue3-vite": "^10.0.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-vue": "^10.7.0",
+    "globals": "^17.3.0",
+    "jiti": "^2.6.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.49",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "rimraf": "^6.0.0",
+    "storybook": "^10.0.0",
+    "typescript": "~5.7.0",
+    "typescript-eslint": "^8.54.0",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.4"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@primevue/icons": "patches/@primevue__icons.patch"
+    }
+  }
+}