@taikai/rocket-kit 3.0.12-0 → 4.0.1

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

@@ -0,0 +1,24 @@
+/**
+ * CSS Utilities for CSS Modules migration
+ */
+/**
+ * Convert pixel values to rem units
+ * Assumes base font size of 16px
+ * @param px - Pixel value as number or string (e.g., 16 or '16px')
+ * @returns rem string (e.g., '1rem')
+ */
+export declare function rem(px: number | string): string;
+/**
+ * Make a color transparent by a given amount
+ * @param amount - 0 (fully opaque) to 1 (fully transparent)
+ * @param color - hex color string (e.g., '#ff0000' or 'ff0000')
+ * @returns rgba color string
+ */
+export declare function transparentize(amount: number, color: string): string;
+/**
+ * Convert a hex color to rgba with opacity
+ * @param color - hex color string (e.g., '#ff0000' or 'ff0000')
+ * @param alpha - opacity value 0-1
+ * @returns rgba color string
+ */
+export declare function rgba(color: string, alpha: number): string;

package/dist/utils/hooks/use-color.d.ts

@@ -1,4 +1,11 @@
-export declare const useColor: (value: string) => {
-    color: any;
-    hover: any;
-};
+export interface UseColorResult {
+    /** The actual hex color value */
+    color: string;
+    /** The hover color hex value */
+    hover: string;
+    /** CSS variable reference (e.g., "var(--purple500)") */
+    colorVar: string;
+    /** CSS variable reference for hover state */
+    hoverVar: string;
+}
+export declare const useColor: (value: string) => UseColorResult;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.12-0",
+  "version": "4.0.1",
   "name": "@taikai/rocket-kit",
   "author": "taikai",
   "description": "TAIKAI Design System",
@@ -27,12 +27,13 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint src",
+    "lint": "eslint src --ext .ts,.tsx",
     "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test:storybook": "vitest --config vitest.config.mts",
     "chromatic": "dotenv cross-var npx chromatic --project-token %CHROMATIC_PROJECT_TOKEN%"
   },
   "peerDependencies": {
@@ -40,7 +41,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint && npm run test"
+      "pre-commit": "npm run lint && npm run test"
     }
   },
   "prettier": {
@@ -65,33 +66,32 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.13.8",
+    "@babel/core": "^7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-env": "^7",
+    "@babel/preset-react": "^7",
+    "@babel/preset-typescript": "^7",
     "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-a11y": "^8.0.5",
-    "@storybook/addon-controls": "^8.0.5",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-webpack5": "^8.0.5",
-    "@storybook/theming": "^8.0.5",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.7",
     "@types/css-modules": "^1.0.5",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/react": "^17.0.3",
-    "@types/react-beautiful-dnd": "^13.1.1",
-    "@types/react-dom": "^17.0.1",
-    "@types/react-paginate": "^7.1.0",
-    "@types/styled-components": "^5.1.4",
+    "@types/react": "^18",
+    "@types/react-beautiful-dnd": "^13",
+    "@types/react-dom": "^18",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
+    "@vitest/browser": "^4.0.17",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-macros": "^3.1.0",
@@ -99,24 +99,29 @@
     "cross-var": "^1.1.0",
     "dotenv-cli": "^4.0.0",
     "eslint": "^8.55.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jest-dom": "^3.6.5",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^3.10.1",
+    "eslint-plugin-jsx-a11y": "^6",
+    "eslint-plugin-prettier": "^5",
+    "eslint-plugin-react": "^7",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-testing-library": "^6",
     "husky": "^5.1.3",
     "identity-obj-proxy": "^3.0.0",
-    "prettier": "^3.1.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
+    "playwright": "^1.57.0",
+    "prettier": "^3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-is": "^18",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^11.0.1",
-    "storybook": "^8.0.5",
+    "storybook": "^10.1.11",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
+    "tslib": "^2",
     "typescript": "^4.2.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17",
     "webpack-cli": "^5.1.4"
   },
   "publishConfig": {
@@ -124,25 +129,20 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@babel/preset-react": "^7.22.5",
-    "@types/uuid": "^8.3.4",
     "boring-avatars": "1.6.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "jest-styled-components": "^7.0.3",
+    "clsx": "^2.1.1",
     "lodash.throttle": "^4.1.1",
-    "polished": "^4.1.1",
     "react-beautiful-dnd": "^13.1.0",
-    "react-intersection-observer": "^9.5.3",
-    "react-paginate": "^7.1.3",
-    "react-player": "^2.9.0",
+    "react-intersection-observer": "^9",
+    "react-paginate": "^8.3.0",
+    "react-player": "^2",
     "react-responsive-carousel": "^3.2.18",
     "react-responsive-tabs": "^4.4.1",
-    "react-select": "^5.7.3",
-    "styled-components": "^5.2.1",
+    "react-select": "^5",
     "uuid": "^8.3.2"
   },
   "resolutions": {
-    "cliui": "^8.0.1"
+    "cliui": "^8.0.1",
+    "@eslint/eslintrc": "^2.1.4"
   }
 }

package/dist/atoms/avatar-image/styles.d.ts

@@ -1,6 +0,0 @@
-interface AvatarProps {
-    size?: number;
-    square?: boolean;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, AvatarProps, never>;
-export {};

package/dist/atoms/button/styles.d.ts

@@ -1,11 +0,0 @@
-import { ButtonColor, ButtonVariant } from './types';
-interface ButtonProps {
-    variant?: ButtonVariant;
-    rounded?: boolean;
-    color?: ButtonColor;
-    txtColor?: ButtonColor;
-    value?: String;
-    iconPosition?: 'left' | 'right';
-}
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export {};

package/dist/atoms/button-dropdown/styles.d.ts

@@ -1,5 +0,0 @@
-interface ActionsMenuInterface {
-    visibleActions: number;
-}
-export declare const ActionsMenuStyle: import("styled-components").StyledComponent<"div", any, ActionsMenuInterface, never>;
-export {};

package/dist/atoms/button-link/styles.d.ts

@@ -1,11 +0,0 @@
-import { ButtonColor, ButtonVariant } from '../button/types';
-interface ButtonStyleProps {
-    variant?: ButtonVariant;
-    rounded?: boolean;
-    color?: ButtonColor;
-    txtColor?: ButtonColor;
-    value?: String;
-    iconPosition?: 'left' | 'right';
-}
-export declare const ButtonLinkStyle: import("styled-components").StyledComponent<"a", any, ButtonStyleProps, never>;
-export {};

package/dist/atoms/checkbox/styles.d.ts

@@ -1,11 +0,0 @@
-interface CheckboxErrorProps {
-    error?: boolean;
-}
-interface CheckboxWrapperProps extends CheckboxErrorProps {
-    disabled?: boolean;
-}
-export declare const CheckboxWrapper: import("styled-components").StyledComponent<"label", any, CheckboxWrapperProps, never>;
-export declare const CheckboxLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CheckboxInput: import("styled-components").StyledComponent<"input", any, CheckboxWrapperProps, never>;
-export declare const Checkmark: import("styled-components").StyledComponent<"span", any, CheckboxErrorProps, never>;
-export {};

package/dist/atoms/checkbox-button/styles.d.ts

@@ -1,9 +0,0 @@
-interface CheckboxWrapperProps {
-    checked?: boolean;
-    disabled?: boolean;
-}
-export declare const CheckboxWrapper: import("styled-components").StyledComponent<"label", any, CheckboxWrapperProps, never>;
-export declare const CheckboxLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const CheckboxInput: import("styled-components").StyledComponent<"input", any, CheckboxWrapperProps, never>;
-export declare const Checkmark: import("styled-components").StyledComponent<"span", any, CheckboxWrapperProps, never>;
-export {};

package/dist/atoms/error-field/styles.d.ts

@@ -1,6 +0,0 @@
-import { ErrorFieldColor } from './types';
-interface ErrorStyleProps {
-    color: ErrorFieldColor;
-}
-export declare const ErrorStyle: import("styled-components").StyledComponent<"span", any, ErrorStyleProps, never>;
-export {};

package/dist/atoms/file-picker/styles.d.ts

@@ -1,6 +0,0 @@
-interface FilePickerProps {
-    error?: boolean;
-    disabled?: boolean;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, FilePickerProps, never>;
-export {};

package/dist/atoms/icon/stories/styles.d.ts

@@ -1 +0,0 @@
-export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/dist/atoms/label/styles.d.ts

@@ -1 +0,0 @@
-export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

package/dist/atoms/progress-bar/styles.d.ts

@@ -1,9 +0,0 @@
-interface ProgressBarProps {
-    progress: number;
-    value?: string;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Bar: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Progress: import("styled-components").StyledComponent<"div", any, ProgressBarProps, never>;
-export declare const Value: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/atoms/select/styles.d.ts

@@ -1,5 +0,0 @@
-interface SelectStyleProps {
-    error?: string;
-}
-export declare const SelectStyle: import("styled-components").StyledComponent<"select", any, SelectStyleProps, never>;
-export {};

package/dist/atoms/select-interactive/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectGroupLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const SingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/atoms/slideshow/styles.d.ts

@@ -1,5 +0,0 @@
-interface SlideshowProps {
-    slidesNumber: number;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, SlideshowProps, never>;
-export {};

package/dist/atoms/spinner/styles.d.ts

@@ -1,6 +0,0 @@
-interface LoadingProps {
-    fill?: string;
-    size?: string;
-}
-export declare const Loading: import("styled-components").StyledComponent<"div", any, LoadingProps, never>;
-export {};

package/dist/atoms/tag/styles.d.ts

@@ -1,8 +0,0 @@
-import { TagVariant, TagColor } from './types';
-interface TagWrapperProps {
-    variant?: TagVariant;
-    color?: TagColor;
-    txtColor?: TagColor;
-}
-export declare const TagWrapper: import("styled-components").StyledComponent<"span", any, TagWrapperProps, never>;
-export {};

package/dist/atoms/tag-number/styles.d.ts

@@ -1,7 +0,0 @@
-import { TagColor } from '../tag/types';
-interface TagWrapperProps {
-    color?: TagColor;
-    valueColor?: TagColor;
-}
-export declare const TagWrapper: import("styled-components").StyledComponent<"div", any, TagWrapperProps, never>;
-export {};

package/dist/atoms/text-area/styles.d.ts

@@ -1,10 +0,0 @@
-interface TextAreaProps {
-    height?: string;
-    error?: string;
-    minlength?: number;
-    maxlength?: number;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextAreaStyle: import("styled-components").StyledComponent<"textarea", any, TextAreaProps, never>;
-export declare const Count: import("styled-components").StyledComponent<"div", any, TextAreaProps, never>;
-export {};

package/dist/atoms/text-field/styles.d.ts

@@ -1,6 +0,0 @@
-interface InputStyleProps {
-    icon?: string;
-    error?: string;
-}
-export declare const TextFieldInputStyle: import("styled-components").StyledComponent<"input", any, InputStyleProps, never>;
-export {};

package/dist/atoms/text-field-appendix/styles.d.ts

@@ -1,10 +0,0 @@
-interface TextFieldAppendixProps {
-    error?: string;
-}
-interface AppendixProps {
-    position: 'left' | 'right';
-    error?: string;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, TextFieldAppendixProps, never>;
-export declare const Appendix: import("styled-components").StyledComponent<"div", any, AppendixProps, never>;
-export {};

package/dist/atoms/toggle/styles.d.ts

@@ -1 +0,0 @@
-export declare const Switcher: import("styled-components").StyledComponent<"fieldset", any, {}, never>;

package/dist/atoms/truncate-line/styles.d.ts

@@ -1 +0,0 @@
-export declare const TruncateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/atoms/video-player/styles.d.ts

@@ -1 +0,0 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/molecules/actions-menu/styles.d.ts

@@ -1,6 +0,0 @@
-interface ListInterface {
-    rowIndex?: number;
-}
-export declare const ActionsMenuStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const List: import("styled-components").StyledComponent<"ul", any, ListInterface, never>;
-export {};

package/dist/molecules/card-value/styles.d.ts

@@ -1 +0,0 @@
-export declare const CardValueStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/molecules/checkbox-group/styles.d.ts

@@ -1,6 +0,0 @@
-interface CheckboxGroupProps {
-    type?: 'row' | 'column';
-    error?: string;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"ul", any, CheckboxGroupProps, never>;
-export {};

package/dist/molecules/data-warning/styles.d.ts

@@ -1,5 +0,0 @@
-interface DataWarningProps {
-    type: 'login' | 'data';
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, DataWarningProps, never>;
-export {};

package/dist/molecules/empty-table/styles.d.ts

@@ -1,10 +0,0 @@
-interface BorderProps {
-    border: boolean;
-}
-export declare const EmptyTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmptyTableHead: import("styled-components").StyledComponent<"div", any, BorderProps, never>;
-export declare const EmptyTableBody: import("styled-components").StyledComponent<"div", any, BorderProps, never>;
-export declare const EmptyTableRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmptyTableCellText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmptyTableOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/molecules/error/styles.d.ts

@@ -1,5 +0,0 @@
-interface ErrorProps {
-    variant: 'default' | 'minimal';
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, ErrorProps, never>;
-export {};

package/dist/molecules/field-with-button/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Field: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/molecules/form-group/styles.d.ts

@@ -1,5 +0,0 @@
-interface WrapperProps {
-    error?: boolean;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
-export {};

package/dist/molecules/modal-footer/styles.d.ts

@@ -1 +0,0 @@
-export declare const FooterStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/molecules/note-card/styles.d.ts

@@ -1,7 +0,0 @@
-import { NoteColor } from './types';
-interface NoteCardProps {
-    color?: NoteColor;
-    buttonValue?: string;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, NoteCardProps, never>;
-export {};

package/dist/molecules/number-input-spinner/styles.d.ts

@@ -1,7 +0,0 @@
-interface NumberInputSpinnerProps {
-    max?: number;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, NumberInputSpinnerProps, never>;
-export declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
-export {};

package/dist/molecules/pagination-control/styles.d.ts

@@ -1,5 +0,0 @@
-interface PageControlProps {
-    dark?: boolean;
-}
-export declare const PaginationWrapper: import("styled-components").StyledComponent<"div", any, PageControlProps, never>;
-export {};

package/dist/molecules/radio-group/styles.d.ts

@@ -1,13 +0,0 @@
-interface WrapperProps {
-    type?: 'row' | 'column';
-    group: string;
-    error?: string;
-    disabled?: boolean;
-}
-interface ItemProps {
-    error?: string;
-    disabled?: boolean;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"ul", any, WrapperProps, never>;
-export declare const Item: import("styled-components").StyledComponent<"li", any, ItemProps, never>;
-export {};

package/dist/molecules/table/styles.d.ts

@@ -1,9 +0,0 @@
-interface TableProps {
-    border?: boolean;
-    loadingState?: boolean;
-}
-export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OverflowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Table: import("styled-components").StyledComponent<"table", any, TableProps, never>;
-export declare const SkeletonCell: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/molecules/table-dnd/styles.d.ts

@@ -1,8 +0,0 @@
-interface TableDnDProps {
-    border?: boolean;
-    layout?: 'fixed' | 'auto';
-    draggableId?: string;
-}
-export declare const Table: import("styled-components").StyledComponent<"table", any, TableDnDProps, never>;
-export declare const TableRow: import("styled-components").StyledComponent<"tr", any, TableDnDProps, never>;
-export {};

package/dist/molecules/wizard-steps/styles.d.ts

@@ -1,6 +0,0 @@
-interface WizardStepProps {
-    active?: boolean;
-}
-export declare const Steps: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const Step: import("styled-components").StyledComponent<"li", any, WizardStepProps, never>;
-export {};

package/dist/organisms/grid-container/styles.d.ts

@@ -1,6 +0,0 @@
-export interface GridProps {
-    size?: number;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GridRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GridCol: import("styled-components").StyledComponent<"div", any, GridProps, never>;

package/dist/organisms/loading-state/styles.d.ts

@@ -1,8 +0,0 @@
-interface LoadingStateProps {
-    type?: 'text' | 'card' | 'table' | 'value';
-    columnsNumber?: number;
-    center?: boolean;
-}
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
-export declare const Grid: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
-export {};

package/dist/organisms/modal/styles.d.ts

@@ -1,9 +0,0 @@
-interface ModalStyleBaseProps {
-    zIndex: number;
-    modalOverflow?: boolean;
-}
-export declare const ModalOverlay: import("styled-components").StyledComponent<"div", any, ModalStyleBaseProps, never>;
-export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, ModalStyleBaseProps, never>;
-export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, ModalStyleBaseProps, never>;
-export declare const ModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/organisms/modal-drawer/styles.d.ts

@@ -1,9 +0,0 @@
-interface ModalStyleBaseProps {
-    zIndex: number;
-}
-export declare const ModalOverlay: import("styled-components").StyledComponent<"div", any, ModalStyleBaseProps, never>;
-export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, ModalStyleBaseProps, never>;
-export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, ModalStyleBaseProps, never>;
-export declare const ModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/dist/organisms/tabs-panel/styles.d.ts

@@ -1 +0,0 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;