@televet/kibble-ui 4.0.0-beta.8 → 4.0.0-beta.80

package/dist/types/theme/tokens/sizes/sizes.config.d.ts

@@ -0,0 +1,81 @@
+export declare const sizeTokens: {
+    container: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+        xl: {
+            value: string;
+        };
+    };
+    xs: {
+        value: string;
+    };
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
+        value: string;
+    };
+    "2xl": {
+        value: string;
+    };
+    "3xl": {
+        value: string;
+    };
+    "4xl": {
+        value: string;
+    };
+    "5xl": {
+        value: string;
+    };
+    "6xl": {
+        value: string;
+    };
+    "7xl": {
+        value: string;
+    };
+    "8xl": {
+        value: string;
+    };
+    "2xs": {
+        value: string;
+    };
+    "3xs": {
+        value: string;
+    };
+    max: {
+        value: string;
+    };
+    min: {
+        value: string;
+    };
+    full: {
+        value: string;
+    };
+};
+export declare const breakpointTokens: {
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
+        value: string;
+    };
+};

package/dist/types/theme/tokens/sizes/sizes.records.d.ts

@@ -0,0 +1,3 @@
+import { BreakpointSize, Size } from './sizes.types';
+export declare const sizes: Record<Size, string>;
+export declare const breakpointSizes: Record<BreakpointSize, string>;

package/dist/types/theme/tokens/sizes/sizes.types.d.ts

@@ -0,0 +1,2 @@
+export type BreakpointSize = "sm" | "md" | "lg" | "xl";
+export type Size = "max" | "min" | "full" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";

package/dist/types/theme/tokens/spacing/index.d.ts

@@ -1 +1 @@
-export * from './spacing.types.js';
+export * from './spacing.types';

package/dist/types/theme/tokens/spacing/spacing.config.d.ts

@@ -0,0 +1,101 @@
+export declare const spacingTokens: {
+    3: {
+        value: string;
+    };
+    4: {
+        value: string;
+    };
+    5: {
+        value: string;
+    };
+    6: {
+        value: string;
+    };
+    7: {
+        value: string;
+    };
+    8: {
+        value: string;
+    };
+    9: {
+        value: string;
+    };
+    10: {
+        value: string;
+    };
+    px: {
+        value: string;
+    };
+    1: {
+        value: string;
+    };
+    2: {
+        value: string;
+    };
+    12: {
+        value: string;
+    };
+    14: {
+        value: string;
+    };
+    16: {
+        value: string;
+    };
+    20: {
+        value: string;
+    };
+    24: {
+        value: string;
+    };
+    28: {
+        value: string;
+    };
+    32: {
+        value: string;
+    };
+    36: {
+        value: string;
+    };
+    40: {
+        value: string;
+    };
+    44: {
+        value: string;
+    };
+    48: {
+        value: string;
+    };
+    52: {
+        value: string;
+    };
+    56: {
+        value: string;
+    };
+    60: {
+        value: string;
+    };
+    64: {
+        value: string;
+    };
+    72: {
+        value: string;
+    };
+    80: {
+        value: string;
+    };
+    96: {
+        value: string;
+    };
+    0.5: {
+        value: string;
+    };
+    1.5: {
+        value: string;
+    };
+    2.5: {
+        value: string;
+    };
+    3.5: {
+        value: string;
+    };
+};

package/dist/types/theme/tokens/spacing/spacing.records.d.ts

@@ -0,0 +1,2 @@
+import { Space } from './spacing.types';
+export declare const spacing: Record<Space, string>;

package/dist/types/theme/tokens/spacing/spacing.types.d.ts

@@ -0,0 +1 @@
+export type Space = "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96";

package/dist/types/theme/tokens/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transitions.types.js';
+export * from './transitions.types';

package/dist/types/theme/tokens/transitions/transitions.config.d.ts

@@ -0,0 +1,34 @@
+export declare const transitionDurationTokens: {
+    normal: {
+        value: string;
+    };
+    faster: {
+        value: string;
+    };
+    fast: {
+        value: string;
+    };
+    slow: {
+        value: string;
+    };
+    slower: {
+        value: string;
+    };
+    "ultra-fast": {
+        value: string;
+    };
+    "ultra-slow": {
+        value: string;
+    };
+};
+export declare const transitionEasingTokens: {
+    "ease-in": {
+        value: string;
+    };
+    "ease-in-out": {
+        value: string;
+    };
+    "ease-out": {
+        value: string;
+    };
+};

package/dist/types/theme/tokens/transitions/transitions.records.d.ts

@@ -0,0 +1,3 @@
+import { TransitionDuration, TransitionEasing } from './transitions.types';
+export declare const transitionEasings: Record<TransitionEasing, string>;
+export declare const transitionDurations: Record<TransitionDuration, string>;

package/dist/types/theme/tokens/transitions/transitions.types.d.ts

@@ -0,0 +1,2 @@
+export type TransitionDuration = "ultra-fast" | "faster" | "fast" | "normal" | "slow" | "slower" | "ultra-slow";
+export type TransitionEasing = "ease-in" | "ease-out" | "ease-in-out";

package/dist/types/theme/tokens/typography/index.d.ts

@@ -1 +1 @@
-export * from './typography.types.js';
+export * from './typography.types';

package/dist/types/theme/tokens/typography/typography.config.d.ts

@@ -0,0 +1,130 @@
+export declare const fontTokens: {
+    heading: {
+        value: string;
+    };
+    body: {
+        value: string;
+    };
+    mono: {
+        value: string;
+    };
+};
+export declare const fontSizeTokens: {
+    xs: {
+        value: string;
+    };
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
+        value: string;
+    };
+    "2xl": {
+        value: string;
+    };
+    "3xl": {
+        value: string;
+    };
+    "4xl": {
+        value: string;
+    };
+    "5xl": {
+        value: string;
+    };
+    "6xl": {
+        value: string;
+    };
+    "7xl": {
+        value: string;
+    };
+    "8xl": {
+        value: string;
+    };
+    "9xl": {
+        value: string;
+    };
+};
+export declare const fontWeightTokens: {
+    normal: {
+        value: string;
+    };
+    semibold: {
+        value: string;
+    };
+    bold: {
+        value: string;
+    };
+};
+export declare const lineHeightTokens: {
+    normal: {
+        value: string;
+    };
+    none: {
+        value: string;
+    };
+    shorter: {
+        value: string;
+    };
+    short: {
+        value: string;
+    };
+    base: {
+        value: string;
+    };
+    tall: {
+        value: string;
+    };
+    taller: {
+        value: string;
+    };
+    3: {
+        value: string;
+    };
+    4: {
+        value: string;
+    };
+    5: {
+        value: string;
+    };
+    6: {
+        value: string;
+    };
+    7: {
+        value: string;
+    };
+    8: {
+        value: string;
+    };
+    9: {
+        value: string;
+    };
+    10: {
+        value: string;
+    };
+};
+export declare const letterSpacingTokens: {
+    normal: {
+        value: string;
+    };
+    tighter: {
+        value: string;
+    };
+    tight: {
+        value: string;
+    };
+    wide: {
+        value: string;
+    };
+    wider: {
+        value: string;
+    };
+    widest: {
+        value: string;
+    };
+};

package/dist/types/theme/tokens/typography/typography.records.d.ts

@@ -0,0 +1,6 @@
+import { Font, FontSize, FontWeight, LetterSpacing, LineHeight } from './typography.types';
+export declare const fonts: Record<Font, string>;
+export declare const fontSizes: Record<FontSize, string>;
+export declare const fontWeights: Record<FontWeight, number>;
+export declare const lineHeights: Record<LineHeight, string | number>;
+export declare const letterSpacings: Record<LetterSpacing, string>;

package/dist/types/theme/tokens/typography/typography.types.d.ts

@@ -0,0 +1,5 @@
+export type Font = "heading" | "body" | "mono";
+export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
+export type FontWeight = "normal" | "semibold" | "bold";
+export type LineHeight = "normal" | "none" | "shorter" | "short" | "base" | "tall" | "taller" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+export type LetterSpacing = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest";

package/dist/types/theme/tokens/utils/transformToTokens.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Transforms an object of key-value pairs into a new object where each value
+ * is wrapped in an object with a `value` property. Numbers are converted to strings.
+ *
+ * @template T - A record with string keys and string or number values.
+ * @param {T} input - The input object to transform.
+ * @returns {{ [K in keyof T]: { value: string } }} - The transformed object.
+ */
+export declare const transformToTokens: <T extends Record<string, string | number>>(input: T) => { [K in keyof T]: {
+    value: string;
+}; };

package/dist/types/theme/tokens/zIndices/index.d.ts

@@ -1 +1 @@
-export * from './zIndices.types.js';
+export * from './zIndices.types';

package/dist/types/theme/tokens/zIndices/zIndices.config.d.ts

@@ -0,0 +1,44 @@
+export declare const zIndexTokens: {
+    base: {
+        value: string;
+    };
+    popover: {
+        value: string;
+    };
+    toast: {
+        value: string;
+    };
+    tooltip: {
+        value: string;
+    };
+    overlay: {
+        value: string;
+    };
+    sticky: {
+        value: string;
+    };
+    auto: {
+        value: string;
+    };
+    banner: {
+        value: string;
+    };
+    hide: {
+        value: string;
+    };
+    docked: {
+        value: string;
+    };
+    dropdown: {
+        value: string;
+    };
+    modal: {
+        value: string;
+    };
+    skipLink: {
+        value: string;
+    };
+    tooltipExtra: {
+        value: string;
+    };
+};

package/dist/types/theme/tokens/zIndices/zIndices.records.d.ts

@@ -0,0 +1,2 @@
+import { ZIndex } from './zIndices.types';
+export declare const zIndices: Record<ZIndex, string | number>;

package/dist/types/theme/tokens/zIndices/zIndices.types.d.ts

@@ -0,0 +1 @@
+export type ZIndex = "hide" | "auto" | "base" | "docked" | "dropdown" | "sticky" | "banner" | "overlay" | "modal" | "popover" | "skipLink" | "toast" | "tooltip" | "tooltipExtra";

package/dist/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,15 +1,43 @@
 {
   "name": "@televet/kibble-ui",
   "description": "Kibble Design System by Otto",
-  "version": "4.0.0-beta.8",
+  "version": "4.0.0-beta.80",
   "type": "module",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
+  "bin": {
+    "kibble-generate-theme": "./dist/esm/cli/generate-theme-types.js",
+    "kibble-postinstall": "./dist/esm/cli/postinstall.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "dist/esm/cli"
   ],
   "sideEffects": false,
+  "scripts": {
+    "build": "npm run generate:theme && npm run generate:icons && npm run generate:logos && npm run build:documentation && tsc -b && tsc -p tsconfig.cli.json && vite build && chmod +x ./dist/esm/cli/*.js",
+    "build:documentation": "storybook build -o docs --quiet",
+    "build-storybook": "npm run generate:icons && npm run generate:logos && storybook build",
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "create:component": "npx plop component",
+    "deploy": "gh-pages -d dist",
+    "format": "npx prettier --write --parser typescript '**/*.{ts,tsx}'",
+    "generate:icons": "npx rimraf src/components/Icon/generated && npx @svgr/cli src/assets/icons --config-file svgr.config.mjs",
+    "generate:logos": "npx rimraf src/components/Logo/generated && npx @svgr/cli src/assets/logos --config-file svgr-logo.config.mjs",
+    "generate:theme": "npx @chakra-ui/cli typegen ./src/theme/theme.config.ts",
+    "lint": "eslint --fix ./src/",
+    "predeploy": "npm run build",
+    "prepare": "husky",
+    "publishBeta": "npm run build && npm publish --tag beta",
+    "start": "npm run generate:icons & npm run generate:logos & npm run theme:watch & storybook dev -p 6006",
+    "test-storybook": "npm run generate:icons && npm run generate:logos && vitest --project=storybook",
+    "theme:watch": "chakra typegen ./src/theme/theme.config.ts --watch"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.0.0"
+  },
   "exports": {
     ".": {
       "import": {
@@ -31,6 +59,26 @@
         "default": "./dist/cjs/theme/index.cjs"
       }
     },
+    "./theme/*": {
+      "import": {
+        "types": "./dist/types/theme/*.d.ts",
+        "default": "./dist/esm/theme/*.js"
+      },
+      "require": {
+        "types": "./dist/types/theme/*.d.ts",
+        "default": "./dist/cjs/theme/*.cjs"
+      }
+    },
+    "./chakra": {
+      "import": {
+        "types": "./dist/types/chakra/index.d.ts",
+        "default": "./dist/esm/chakra/index.js"
+      },
+      "require": {
+        "types": "./dist/types/chakra/index.d.ts",
+        "default": "./dist/cjs/chakra/index.cjs"
+      }
+    },
     "./*": {
       "import": {
         "types": "./dist/types/components/*/index.d.ts",
@@ -83,25 +131,6 @@
     },
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "npm run generate:theme && npm run generate:icons && npm run build:documentation && tsc -b && vite build",
-    "build:documentation": "storybook build -o docs --quiet",
-    "build-storybook": "npm run generate:icons && storybook build",
-    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
-    "create:component": "npx plop component",
-    "deploy": "gh-pages -d build",
-    "format": "npx prettier --write --parser typescript '**/*.{ts,tsx}'",
-    "generate:icons": "npx rimraf src/components/Icon/generated && npx @svgr/cli src/assets/icons --config-file svgr.config.mjs",
-    "generate:theme": "npx @chakra-ui/cli typegen ./src/theme/theme.config.ts",
-    "lint": "eslint --fix ./src/",
-    "predeploy": "npm run build",
-    "prepare": "husky",
-    "publishBeta": "npm run build && npm publish --tag beta",
-    "start": "npm run generate:icons & npm run theme:watch & storybook dev -p 6006",
-    "test-storybook": "test-storybook",
-    "test:watch": "test-storybook --watch",
-    "theme:watch": "chakra typegen ./src/theme/theme.config.ts --watch"
-  },
   "lint-staged": {
     "*.{ts,tsx}": [
       "npm run format",
@@ -114,56 +143,57 @@
     ]
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^3.14.2",
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chakra-ui/cli": "^3.19.2",
+    "@chromatic-com/storybook": "^4.0.0",
+    "@emotion/react": "^11.14.0",
     "@eslint/js": "^9.21.0",
-    "@storybook/addon-a11y": "^8.6.11",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.11",
-    "@storybook/addon-themes": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
+    "@storybook/addon-a11y": "^9.0.1",
+    "@storybook/addon-docs": "^9.0.1",
+    "@storybook/addon-onboarding": "^9.0.1",
+    "@storybook/addon-themes": "^9.0.1",
+    "@storybook/addon-vitest": "^9.0.1",
+    "@storybook/react-vite": "^9.0.1",
     "@storybook/test-runner": "^0.22.0",
     "@televet/prettier-config": "^1.0.1",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.0.10",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
     "chromatic": "^11.27.0",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.1",
     "gh-pages": "^6.3.0",
     "globals": "^15.15.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.0",
+    "playwright": "^1.52.0",
     "plop": "^4.0.1",
     "prettier": "^3.5.3",
     "rollup-plugin-visualizer": "^5.14.0",
-    "storybook": "^8.6.11",
+    "storybook": "^9.0.1",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",
     "vite-plugin-dts": "^4.5.3",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.14.0",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
     "react": "^19.0.0"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.14.2",
+    "@chakra-ui/react": "^3.19.2",
     "@datepicker-react/hooks": "^2.8.4",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@emotion/react": "^11.14.0",
     "next-themes": "^0.4.6"
   }
 }

package/dist/chunks/alert.types-Bnf8isvq.js

@@ -1,2 +0,0 @@
-"use strict";const t=require("./vendor-D-x6W6ez.js"),h=require("react"),f=require("./heading.component-CExbjSBi.js"),g=require("./icon.component-Bmtf4XKw.js"),b=require("./text.component-CBa_saMP.js"),d=require("./button.component-Dufh_y5v.js"),s=require("./chakra-DmF8Cxqs.js"),A={error:"warningSign",warning:"warningSign",success:"checkmark",info:"infoCircle",default:"infoCircle"},E={default:"default",error:"danger",info:"info",success:"success",warning:"warning"},c=({buttonPosition:e,buttonText:i,status:o,...a})=>t.jsxRuntimeExports.jsx(s.Box,{className:"Alert__Button","data-testid":"kibble-alert-button",...e==="bottomLeft"&&{pt:2,pb:1},children:t.jsxRuntimeExports.jsx(d.Button,{size:"xs",variant:o==="default"?"primary":"secondary",w:"max-content",...a,children:i})}),_=({buttonProps:e,description:i,descriptionProps:o,hideCloseButton:a=!1,hideIcon:x=!1,iconProps:u,onClose:j,onContrast:n=!1,status:r="success",title:l,titleProps:p,...R})=>{const m=e?.buttonPosition==="topRight"?s.Flex:h.Fragment;return t.jsxRuntimeExports.jsxs(s.AlertRoot,{className:"Alert","data-testid":"kibble-alert",...R,variant:r,hideIcon:x,onContrast:n,children:[!x&&t.jsxRuntimeExports.jsx(s.AlertIndicator,{className:"Alert__Icon","data-testid":"kibble-alert-icon",children:t.jsxRuntimeExports.jsx(g.Icon,{variant:n?"onContrast":E[r],name:u?.name||A[r],size:"lg",...u})}),t.jsxRuntimeExports.jsxs(s.AlertContent,{className:"Alert__Content","data-testid":"kibble-alert-content",children:[l&&t.jsxRuntimeExports.jsxs(m,{justifyContent:"space-between",children:[t.jsxRuntimeExports.jsx(s.AlertTitle,{className:"Alert__Title","data-testid":"kibble-alert-title",children:t.jsxRuntimeExports.jsx(f.WrappedHeading,{size:"sm",variant:n?"onContrast":"default",...p,children:l})}),e?.buttonPosition==="topRight"&&t.jsxRuntimeExports.jsx(c,{status:r,onContrast:n,...e})]}),i&&t.jsxRuntimeExports.jsxs(m,{justifyContent:"space-between",children:[t.jsxRuntimeExports.jsx(s.AlertDescription,{className:"Alert__Description","data-testid":"kibble-alert-description",children:typeof i=="string"?t.jsxRuntimeExports.jsx(b.WrappedText,{size:"md",variant:n?"onContrast":"default",...o,children:i}):i}),e?.buttonPosition==="topRight"&&!l&&t.jsxRuntimeExports.jsx(c,{status:r,onContrast:n,...e})]}),e?.buttonPosition==="bottomLeft"&&t.jsxRuntimeExports.jsx(c,{status:r,onContrast:n,...e})]}),!a&&t.jsxRuntimeExports.jsx(d.Button,{iconName:"close",size:"xs",variant:"ghostNeutral",onContrast:n,onClick:j})]})},k=["topRight","bottomLeft"];exports.Alert=_;exports.alertButtonPositions=k;
-//# sourceMappingURL=alert.types-Bnf8isvq.js.map