@996-design/996-ui 0.1.0

package/dist/types/tokens.d.ts

@@ -0,0 +1,266 @@
+export declare const themeToken: {
+    readonly color: {
+        readonly brand: "var(--hj-color-brand)";
+        readonly brandHover: "var(--hj-color-brand-hover)";
+        readonly brandActive: "var(--hj-color-brand-active)";
+        readonly brandWeak: "var(--hj-color-brand-weak)";
+        readonly success: "var(--hj-color-success)";
+        readonly warning: "var(--hj-color-warning)";
+        readonly info: "var(--hj-color-info)";
+        readonly danger: "var(--hj-color-danger)";
+        readonly dangerSoft: "var(--hj-color-danger-soft)";
+        readonly purchase: "var(--hj-color-purchase)";
+        readonly webPage: "var(--hj-color-web-page)";
+        readonly webBg: "var(--hj-color-web-bg)";
+        readonly webSurface: "var(--hj-color-web-surface)";
+        readonly webControl: "var(--hj-color-web-control)";
+        readonly webSurfaceRaised: "var(--hj-color-web-surface-raised)";
+        readonly webSurfaceActive: "var(--hj-color-web-surface-active)";
+        readonly webBorder: "var(--hj-color-web-border)";
+        readonly webBorderStrong: "var(--hj-color-web-border-strong)";
+        readonly webForeground: "var(--hj-color-web-foreground)";
+        readonly webForeground80: "var(--hj-color-web-foreground-80)";
+        readonly webMuted: "var(--hj-color-web-muted)";
+        readonly webSubtle: "var(--hj-color-web-subtle)";
+        readonly webDisabled: "var(--hj-color-web-disabled)";
+        readonly adminBrand: "var(--hj-color-admin-brand)";
+        readonly adminBrandHover: "var(--hj-color-admin-brand-hover)";
+        readonly adminBg: "var(--hj-color-admin-bg)";
+        readonly adminSurface: "var(--hj-color-admin-surface)";
+        readonly adminSurfaceMuted: "var(--hj-color-admin-surface-muted)";
+        readonly adminBorder: "var(--hj-color-admin-border)";
+        readonly adminBorderStrong: "var(--hj-color-admin-border-strong)";
+        readonly adminForeground: "var(--hj-color-admin-foreground)";
+        readonly adminMuted: "var(--hj-color-admin-muted)";
+    };
+    readonly radius: {
+        readonly xs: "var(--hj-radius-xs)";
+        readonly sm: "var(--hj-radius-sm)";
+        readonly md: "var(--hj-radius-md)";
+        readonly lg: "var(--hj-radius-lg)";
+    };
+    readonly button: {
+        readonly fontFamily: "var(--hj-button-font-family)";
+        readonly fontWeight: "var(--hj-button-font-weight)";
+        readonly lightFontFamily: "var(--hj-button-light-font-family)";
+        readonly lightFontWeight: "var(--hj-button-light-font-weight)";
+        readonly heightXs: "var(--hj-button-xs-height)";
+        readonly heightSm: "var(--hj-button-sm-height)";
+        readonly heightMd: "var(--hj-button-md-height)";
+        readonly heightLg: "var(--hj-button-lg-height)";
+        readonly minWidthXs: "var(--hj-button-xs-min-width)";
+        readonly minWidthSm: "var(--hj-button-sm-min-width)";
+        readonly minWidthMd: "var(--hj-button-md-min-width)";
+        readonly minWidthLg: "var(--hj-button-lg-min-width)";
+        readonly lineHeightXs: "var(--hj-button-xs-line-height)";
+        readonly lineHeightSm: "var(--hj-button-sm-line-height)";
+        readonly lineHeightMd: "var(--hj-button-md-line-height)";
+        readonly lineHeightLg: "var(--hj-button-lg-line-height)";
+        readonly primaryBg: "var(--hj-button-primary-bg)";
+        readonly primaryBgHover: "var(--hj-button-primary-bg-hover)";
+        readonly primaryBgActive: "var(--hj-button-primary-bg-active)";
+        readonly defaultBg: "var(--hj-button-default-bg)";
+        readonly defaultBgHover: "var(--hj-button-default-bg-hover)";
+        readonly defaultBgActive: "var(--hj-button-default-bg-active)";
+        readonly lightBg: "var(--hj-button-light-bg)";
+        readonly lightBgHover: "var(--hj-button-light-bg-hover)";
+        readonly lightBgActive: "var(--hj-button-light-bg-active)";
+        readonly lightBorder: "var(--hj-button-light-border)";
+        readonly lightBorderHover: "var(--hj-button-light-border-hover)";
+        readonly lightForeground: "var(--hj-button-light-fg)";
+        readonly translucentBg: "var(--hj-button-translucent-bg)";
+        readonly translucentBgHover: "var(--hj-button-translucent-bg-hover)";
+        readonly translucentBgActive: "var(--hj-button-translucent-bg-active)";
+        readonly toggleBg: "var(--hj-button-toggle-bg)";
+        readonly toggleBgHover: "var(--hj-button-toggle-bg-hover)";
+        readonly toggleBgActive: "var(--hj-button-toggle-bg-active)";
+        readonly textForeground: "var(--hj-button-text-fg)";
+        readonly textDefaultForeground: "var(--hj-button-text-default-fg)";
+        readonly groupSeparator: "var(--hj-button-group-separator)";
+    };
+    readonly iconButton: {
+        readonly defaultBorder: "var(--hj-icon-button-default-border)";
+        readonly defaultBackground: "var(--hj-icon-button-default-bg)";
+        readonly defaultForeground: "var(--hj-icon-button-default-fg)";
+        readonly defaultBorderHover: "var(--hj-icon-button-default-border-hover)";
+        readonly defaultForegroundHover: "var(--hj-icon-button-default-fg-hover)";
+        readonly primaryBorder: "var(--hj-icon-button-primary-border)";
+        readonly primaryBackground: "var(--hj-icon-button-primary-bg)";
+        readonly primaryBackgroundHover: "var(--hj-icon-button-primary-bg-hover)";
+        readonly primaryForeground: "var(--hj-icon-button-primary-fg)";
+        readonly ghostBorder: "var(--hj-icon-button-ghost-border)";
+        readonly ghostBackground: "var(--hj-icon-button-ghost-bg)";
+        readonly ghostForeground: "var(--hj-icon-button-ghost-fg)";
+        readonly ghostForegroundHover: "var(--hj-icon-button-ghost-fg-hover)";
+        readonly selectedBorder: "var(--hj-icon-button-selected-border)";
+        readonly selectedBackground: "var(--hj-icon-button-selected-bg)";
+        readonly selectedForeground: "var(--hj-icon-button-selected-fg)";
+    };
+    readonly input: {
+        readonly heightSm: "var(--hj-input-height-sm)";
+        readonly heightMd: "var(--hj-input-height-md)";
+        readonly heightLg: "var(--hj-input-height-lg)";
+        readonly paddingX: "var(--hj-input-padding-x)";
+        readonly gap: "var(--hj-input-gap)";
+        readonly fontSize: "var(--hj-input-font-size)";
+        readonly lineHeight: "var(--hj-input-line-height)";
+        readonly radius: "var(--hj-input-radius)";
+        readonly background: "var(--hj-input-bg)";
+        readonly backgroundActive: "var(--hj-input-bg-active)";
+        readonly border: "var(--hj-input-border)";
+        readonly borderActive: "var(--hj-input-border-active)";
+        readonly foreground: "var(--hj-input-fg)";
+        readonly placeholder: "var(--hj-input-placeholder)";
+        readonly icon: "var(--hj-input-icon)";
+        readonly clear: "var(--hj-input-clear)";
+        readonly addon: "var(--hj-input-addon)";
+        readonly addonBackground: "var(--hj-input-addon-bg)";
+        readonly addonForeground: "var(--hj-input-addon-fg)";
+    };
+    readonly checkbox: {
+        readonly size: "var(--hj-checkbox-size)";
+        readonly borderWidth: "var(--hj-checkbox-border-width)";
+        readonly border: "var(--hj-checkbox-border)";
+        readonly borderHover: "var(--hj-checkbox-border-hover)";
+        readonly background: "var(--hj-checkbox-bg)";
+        readonly backgroundChecked: "var(--hj-checkbox-bg-checked)";
+        readonly icon: "var(--hj-checkbox-icon)";
+        readonly label: "var(--hj-checkbox-label)";
+        readonly labelActive: "var(--hj-checkbox-label-active)";
+    };
+    readonly switch: {
+        readonly width: "var(--hj-switch-width)";
+        readonly height: "var(--hj-switch-height)";
+        readonly padding: "var(--hj-switch-padding)";
+        readonly thumbSize: "var(--hj-switch-thumb-size)";
+        readonly background: "var(--hj-switch-bg)";
+        readonly backgroundChecked: "var(--hj-switch-bg-checked)";
+        readonly thumbBackground: "var(--hj-switch-thumb-bg)";
+    };
+    readonly skeleton: {
+        readonly background: "var(--hj-skeleton-bg)";
+        readonly highlight: "var(--hj-skeleton-highlight)";
+        readonly gap: "var(--hj-skeleton-gap)";
+        readonly rowHeight: "var(--hj-skeleton-row-height)";
+        readonly rowGap: "var(--hj-skeleton-row-gap)";
+        readonly titleHeight: "var(--hj-skeleton-title-height)";
+        readonly titleMargin: "var(--hj-skeleton-title-margin)";
+        readonly radius: "var(--hj-skeleton-radius)";
+        readonly radiusSquare: "var(--hj-skeleton-radius-square)";
+        readonly sizeSm: "var(--hj-skeleton-size-sm)";
+        readonly sizeMd: "var(--hj-skeleton-size-md)";
+        readonly sizeLg: "var(--hj-skeleton-size-lg)";
+    };
+    readonly tooltip: {
+        readonly radius: "var(--hj-tooltip-radius)";
+        readonly height: "var(--hj-tooltip-height)";
+        readonly minWidth: "var(--hj-tooltip-min-width)";
+        readonly paddingX: "var(--hj-tooltip-padding-x)";
+        readonly arrowSize: "var(--hj-tooltip-arrow-size)";
+        readonly gap: "var(--hj-tooltip-gap)";
+        readonly lightBg: "var(--hj-tooltip-light-bg)";
+        readonly lightFg: "var(--hj-tooltip-light-fg)";
+        readonly darkBg: "var(--hj-tooltip-dark-bg)";
+        readonly darkFg: "var(--hj-tooltip-dark-fg)";
+        readonly shadow: "var(--hj-tooltip-shadow)";
+    };
+    readonly message: {
+        readonly height: "var(--hj-message-height)";
+        readonly radius: "var(--hj-message-radius)";
+        readonly paddingX: "var(--hj-message-padding-x)";
+        readonly gap: "var(--hj-message-gap)";
+        readonly background: "var(--hj-message-bg)";
+        readonly foreground: "var(--hj-message-fg)";
+        readonly lightBackground: "var(--hj-message-light-bg)";
+        readonly lightForeground: "var(--hj-message-light-fg)";
+        readonly actionForeground: "var(--hj-message-action-fg)";
+        readonly closeForeground: "var(--hj-message-close-fg)";
+        readonly closeForegroundHover: "var(--hj-message-close-fg-hover)";
+        readonly iconSize: "var(--hj-message-icon-size)";
+        readonly success: "var(--hj-message-success)";
+        readonly warning: "var(--hj-message-warning)";
+        readonly error: "var(--hj-message-error)";
+        readonly info: "var(--hj-message-info)";
+        readonly shadow: "var(--hj-message-shadow)";
+    };
+    readonly modal: {
+        readonly background: "var(--hj-modal-bg)";
+        readonly foreground: "var(--hj-modal-fg)";
+        readonly bodyForeground: "var(--hj-modal-body-fg)";
+        readonly paddingX: "var(--hj-modal-padding-x)";
+        readonly paddingY: "var(--hj-modal-padding-y)";
+        readonly headerHeight: "var(--hj-modal-header-height)";
+        readonly wrapPaddingY: "var(--hj-modal-wrap-padding-y)";
+        readonly closeSize: "var(--hj-modal-close-size)";
+        readonly closeInset: "var(--hj-modal-close-inset)";
+        readonly maskBackground: "var(--hj-modal-mask-bg)";
+        readonly radius: "var(--hj-modal-radius)";
+        readonly shadow: "var(--hj-modal-shadow)";
+    };
+    readonly menu: {
+        readonly background: "var(--hj-menu-bg)";
+        readonly border: "var(--hj-menu-border)";
+        readonly shadow: "var(--hj-menu-shadow)";
+        readonly itemBackground: "var(--hj-menu-item-bg)";
+        readonly itemBackgroundHover: "var(--hj-menu-item-bg-hover)";
+        readonly itemBackgroundActive: "var(--hj-menu-item-bg-active)";
+        readonly itemForeground: "var(--hj-menu-item-fg)";
+        readonly itemForegroundActive: "var(--hj-menu-item-fg-active)";
+        readonly itemMuted: "var(--hj-menu-item-muted)";
+        readonly avatarBackground: "var(--hj-menu-avatar-bg)";
+        readonly avatarForeground: "var(--hj-menu-avatar-fg)";
+        readonly divider: "var(--hj-menu-divider)";
+    };
+    readonly tabs: {
+        readonly lineForeground: "var(--hj-tabs-line-fg)";
+        readonly lineForegroundHover: "var(--hj-tabs-line-fg-hover)";
+        readonly lineForegroundActive: "var(--hj-tabs-line-fg-active)";
+        readonly lineInk: "var(--hj-tabs-line-ink)";
+        readonly cardBackground: "var(--hj-tabs-card-bg)";
+        readonly cardBackgroundHover: "var(--hj-tabs-card-bg-hover)";
+        readonly cardBackgroundActive: "var(--hj-tabs-card-bg-active)";
+        readonly cardForeground: "var(--hj-tabs-card-fg)";
+        readonly cardForegroundActive: "var(--hj-tabs-card-fg-active)";
+        readonly boxedBackground: "var(--hj-tabs-boxed-bg)";
+        readonly boxedBorder: "var(--hj-tabs-boxed-border)";
+        readonly boxedItemBorder: "var(--hj-tabs-boxed-item-border)";
+        readonly boxedForeground: "var(--hj-tabs-boxed-fg)";
+        readonly boxedForegroundHover: "var(--hj-tabs-boxed-fg-hover)";
+        readonly boxedForegroundActive: "var(--hj-tabs-boxed-fg-active)";
+        readonly boxedIndicatorBackground: "var(--hj-tabs-boxed-indicator-bg)";
+        readonly boxedIndicatorBorder: "var(--hj-tabs-boxed-indicator-border)";
+        readonly boxedIndicatorShadow: "var(--hj-tabs-boxed-indicator-shadow)";
+    };
+    readonly shadow: {
+        readonly sm: "var(--hj-shadow-sm)";
+        readonly md: "var(--hj-shadow-md)";
+        readonly lg: "var(--hj-shadow-lg)";
+    };
+    readonly spacing: {
+        readonly xs: "var(--hj-spacing-xs)";
+        readonly sm: "var(--hj-spacing-sm)";
+        readonly md: "var(--hj-spacing-md)";
+        readonly lg: "var(--hj-spacing-lg)";
+        readonly xl: "var(--hj-spacing-xl)";
+    };
+    readonly zIndex: {
+        readonly dropdown: "var(--hj-z-dropdown)";
+        readonly sticky: "var(--hj-z-sticky)";
+        readonly modal: "var(--hj-z-modal)";
+        readonly toast: "var(--hj-z-toast)";
+    };
+    readonly motion: {
+        readonly durationFast: "var(--hj-motion-duration-fast)";
+        readonly durationNormal: "var(--hj-motion-duration-normal)";
+        readonly durationSlow: "var(--hj-motion-duration-slow)";
+        readonly easeIn: "var(--hj-motion-ease-in)";
+        readonly easeOut: "var(--hj-motion-ease-out)";
+        readonly easeInOut: "var(--hj-motion-ease-in-out)";
+        readonly easeOutCirc: "var(--hj-motion-ease-out-circ)";
+        readonly easeInOutCirc: "var(--hj-motion-ease-in-out-circ)";
+        readonly deadline: "var(--hj-motion-deadline)";
+    };
+};
+export type ThemeToken = typeof themeToken;
+export type CssVarName = `--hj-${string}`;
+export declare function cssVar(name: CssVarName, fallback?: string): string;

package/dist/types/utils/cn.d.ts

@@ -0,0 +1,3 @@
+type ClassValue = string | false | null | undefined;
+export declare function cn(...values: readonly ClassValue[]): string;
+export {};

package/dist/types/utils/slots.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from "react";
+export type SlotClassNames<TSlot extends string> = Partial<Record<TSlot, string>>;
+export type SlotStyles<TSlot extends string> = Partial<Record<TSlot, CSSProperties>>;
+export declare function slotClass<TSlot extends string>(classNames: SlotClassNames<TSlot> | undefined, slot: TSlot, ...defaults: readonly (string | false | null | undefined)[]): string;
+export declare function slotStyle<TSlot extends string>(styles: SlotStyles<TSlot> | undefined, slot: TSlot, defaults?: CSSProperties): CSSProperties;

package/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "@996-design/996-ui",
+  "version": "0.1.0",
+  "private": false,
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.js"
+    },
+    "./legacy": {
+      "types": "./dist/types/legacy-index.d.ts",
+      "import": "./dist/esm/legacy-index.js",
+      "require": "./dist/cjs/legacy-index.cjs",
+      "default": "./dist/esm/legacy-index.js"
+    },
+    "./pro": {
+      "types": "./dist/types/pro/index.d.ts",
+      "import": "./dist/esm/pro/index.js",
+      "require": "./dist/cjs/pro/index.cjs",
+      "default": "./dist/esm/pro/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "style": "./dist/styles.css",
+  "dependencies": {
+    "@rc-component/cascader": "~1.17.0",
+    "@rc-component/checkbox": "~2.0.0",
+    "@rc-component/collapse": "~1.2.0",
+    "@rc-component/dialog": "~1.10.0",
+    "@rc-component/drawer": "~1.4.2",
+    "@rc-component/dropdown": "~1.0.3",
+    "@rc-component/form": "~1.8.5",
+    "@rc-component/image": "~1.9.0",
+    "@rc-component/input": "~1.3.1",
+    "@rc-component/input-number": "~1.6.2",
+    "@rc-component/menu": "~1.4.1",
+    "@rc-component/motion": "^1.3.3",
+    "@rc-component/mutate-observer": "^2.0.1",
+    "@rc-component/notification": "~2.0.7",
+    "@rc-component/mentions": "~1.10.0",
+    "@rc-component/pagination": "~1.4.0",
+    "@rc-component/picker": "~1.11.0",
+    "@rc-component/progress": "~1.0.2",
+    "@rc-component/qrcode": "~2.0.0",
+    "@rc-component/rate": "~1.0.1",
+    "@rc-component/resize-observer": "^1.1.2",
+    "@rc-component/select": "~1.8.2",
+    "@rc-component/segmented": "~1.3.0",
+    "@rc-component/slider": "~1.1.1",
+    "@rc-component/steps": "~1.2.2",
+    "@rc-component/switch": "~1.0.3",
+    "@rc-component/table": "~1.10.4",
+    "@rc-component/tabs": "~1.11.0",
+    "@rc-component/tooltip": "~1.4.0",
+    "@rc-component/tour": "~2.4.0",
+    "@rc-component/trigger": "^3.10.0",
+    "@rc-component/tree": "~1.3.2",
+    "@rc-component/tree-select": "~1.11.0",
+    "@rc-component/upload": "~1.1.1",
+    "@rc-component/util": "^1.11.1",
+    "dayjs": "^1.11.11",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "@996-design/996-antd": "6.5.1",
+    "@996-design/996-color": "0.1.0",
+    "@996-design/996-color-picker": "3.1.1",
+    "@996-design/996-icons": "6.3.2",
+    "@996-design/996-motion": "0.1.0",
+    "@996-design/996-slick": "2.0.0",
+    "@996-design/996-style": "0.1.0",
+    "@996-design/996-tokens": "0.1.0",
+    "@996-design/996-utils": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "4.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "4.3.2",
+    "typescript": "^6.0.0",
+    "vite": "5.2.14"
+  },
+  "description": "Public React component and theme entry point for 996 Design",
+  "keywords": [
+    "996-design",
+    "react",
+    "components",
+    "design-system"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "check": "tsc -p tsconfig.json && bun -e \"await import('./src/index.ts')\" && bun ../../scripts/check-996-design-source-parity.ts && bun ../../scripts/check-996-design-toolchain-parity.ts && bun ../../scripts/check-996-design-demo-parity.ts && bun ../../scripts/check-996-design-demo-copy.ts && bun ../../scripts/check-996-design-brand-boundary.ts && bun ../../scripts/check-996-design-component-coverage.ts && bun ../../scripts/check-996-design-architecture.ts && bun ../../scripts/check-996-design-publish.ts",
+    "check:browser": "node ../../scripts/check-996-design-browser.mjs",
+    "build": "bun ../../scripts/build-996-design-source-package.ts",
+    "dev": "vite --config demo/vite.config.ts --host 0.0.0.0 --port 5174 --strictPort",
+    "build:demo": "vite build --config demo/vite.config.ts",
+    "ux:qa": "bun scripts/run-ux-crop-qa.ts",
+    "ux:rect": "bun scripts/run-ux-rect-qa.ts"
+  }
+}