@turquoisehealth/pit-viper 2.94.2-dev.0 → 2.94.2-dev.2

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -3073,6 +3073,39 @@
   color: #121313;
   padding: 1rem;
 }
+.pv-v2 .pv-tooltip-v2-content {
+  --max-width: 320px;
+  max-width: var(--max-width);
+  width: max-content;
+  padding: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  line-height: 1.45454545;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
+  background-color: #242626;
+  color: #FFFFFF;
+}
+.pv-v2 .pv-tooltip-v2-content-small {
+  padding: 0.25rem 0.5rem;
+  font-size: 12px;
+}
+.pv-v2 .pv-tooltip[data-style=white] .pv-tooltip-v2-content {
+  background-color: white;
+  color: #121313;
+  border-color: #E3E7EA;
+}
+.pv-v2 .pv-tooltip[data-style=white] .pv-tooltip-v2-content a {
+  color: #16696D;
+}
+.pv-v2 .pv-tooltip[data-style=dark] .pv-tooltip-v2-content {
+  background-color: #242626;
+  color: #FFFFFF;
+  border-color: transparent;
+}
+.pv-v2 .pv-tooltip[data-style=dark] .pv-tooltip-v2-content a {
+  color: #E4F8F6;
+}
 .pv-v2 [class*=pv-accordion] summary,
 .pv-v2 .pv-details summary {
   list-style: none;
@@ -3271,29 +3304,10 @@
   line-height: 1.33333333;
   font-weight: 500;
 }
-.pv-v2 .pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: unset;
-  gap: 0.5rem;
-  background-color: #242626;
-  color: #FFFFFF;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  font-size: 0.75rem;
-  line-height: 1.33333333;
-  font-weight: 500;
-}
 .pv-v2 .pv-action-bar-container[data-style=white] > div {
   background-color: #FFFFFF;
   color: #121313;
 }
-.pv-v2 .pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #FFFFFF;
-  color: #121313;
-}
 .pv-v2 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #E3E7EA);

package/_site/assets/css/pit-viper-v2.css

@@ -3333,6 +3333,43 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   padding: 1rem;
 }
 
+.pv-tooltip-v2-content {
+  --max-width: 320px;
+  max-width: var(--max-width);
+  width: max-content;
+  padding: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  line-height: 1.45454545;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
+  background-color: #242626;
+  color: #FFFFFF;
+}
+
+.pv-tooltip-v2-content-small {
+  padding: 0.25rem 0.5rem;
+  font-size: 12px;
+}
+
+.pv-tooltip[data-style=white] .pv-tooltip-v2-content {
+  background-color: white;
+  color: #121313;
+  border-color: #E3E7EA;
+}
+.pv-tooltip[data-style=white] .pv-tooltip-v2-content a {
+  color: #16696D;
+}
+
+.pv-tooltip[data-style=dark] .pv-tooltip-v2-content {
+  background-color: #242626;
+  color: #FFFFFF;
+  border-color: transparent;
+}
+.pv-tooltip[data-style=dark] .pv-tooltip-v2-content a {
+  color: #E4F8F6;
+}
+
 [class*=pv-accordion] summary,
 .pv-details summary {
   list-style: none;
@@ -3541,32 +3578,11 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   font-weight: 500;
 }
 
-.pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: unset;
-  gap: 0.5rem;
-  background-color: #242626;
-  color: #FFFFFF;
-  padding: 0.5rem 0.75rem;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  font-size: 0.75rem;
-  line-height: 1.33333333;
-  font-weight: 500;
-}
-
 .pv-action-bar-container[data-style=white] > div {
   background-color: #FFFFFF;
   color: #121313;
 }
 
-.pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #FFFFFF;
-  color: #121313;
-}
-
 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #E3E7EA);

package/_site/assets/css/pit-viper.css

@@ -3338,6 +3338,43 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   padding: 1rem;
 }
 
+.pv-tooltip-v2-content {
+  --max-width: 320px;
+  max-width: var(--max-width);
+  width: max-content;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.42857143;
+  box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.1), 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
+  background-color: #011214;
+  color: #FFFFFF;
+}
+
+.pv-tooltip-v2-content-small {
+  padding: 0.5rem 0.25rem;
+  font-size: 12px;
+}
+
+.pv-tooltip[data-style=white] .pv-tooltip-v2-content {
+  background-color: white;
+  color: #02363D;
+  border-color: #DCDFE4;
+}
+.pv-tooltip[data-style=white] .pv-tooltip-v2-content a {
+  color: #176F6F;
+}
+
+.pv-tooltip[data-style=dark] .pv-tooltip-v2-content {
+  background-color: #011214;
+  color: #FFFFFF;
+  border-color: transparent;
+}
+.pv-tooltip[data-style=dark] .pv-tooltip-v2-content a {
+  color: #A8E6E1;
+}
+
 [class*=pv-accordion] summary,
 .pv-details summary {
   list-style: none;
@@ -3546,32 +3583,11 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
   font-weight: 500;
 }
 
-.pv-action-bar-container > ::slotted(*) {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  background-color: #02363D;
-  color: #FFFFFF;
-  padding: 0;
-  box-shadow: 0 8px 32px rgba(2, 54, 61, 0.24);
-  border-radius: 4px;
-  font-size: 1.125rem;
-  line-height: 1.55555555;
-  font-weight: 500;
-}
-
 .pv-action-bar-container[data-style=white] > div {
   background-color: #02363D;
   color: #02363D;
 }
 
-.pv-action-bar-container[data-style=white] > ::slotted(*) {
-  background-color: #02363D;
-  color: #02363D;
-}
-
 .pv-card {
   position: relative;
   border: 1px solid var(--card-border-color, #DCDFE4);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.94.2-dev.0",
+  "version": "2.94.2-dev.2",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {
@@ -31,6 +31,10 @@
       "types": "./pv-components/dist/vue/visualizations/components/visualizations/index.d.ts",
       "import": "./pv-components/dist/vue/visualizations/pv-components-visualizations.mjs",
       "require": "./pv-components/dist/vue/visualizations/pv-components-visualizations.js"
+    },
+    "./web_components": {
+      "types": "./pv-components/dist/src/web-components.d.ts",
+      "default": "./pv-components/dist/web/pv-components.iife.js"
     }
   },
   "scripts": {
@@ -43,6 +47,7 @@
     "prepublishOnly": "npm install && npm run test && npm run build",
     "start": "npm-run-all build:sass --parallel watch:*",
     "build": "npm-run-all build:*",
+    "postbuild": "eleventy --quiet",
     "prepare": "husky",
     "test": "npm run test --workspace=pv-components",
     "create_pr": "tsx ./scripts/createPR.ts",
@@ -63,37 +68,13 @@
   },
   "homepage": "https://github.com/turquoisehealth/pit-viper/",
   "peerDependencies": {
-    "@floating-ui/vue": "^1.1.9",
-    "@primeuix/themes": "^1.1.1",
-    "@vueuse/components": "^13.0.0",
-    "@vueuse/core": "^13.0.0",
-    "@vueuse/integrations": "^13.1.0",
     "ag-charts-enterprise": "^12.1.0",
     "ag-charts-vue3": "^12.1.0",
     "ag-grid-community": "^33.2.1",
     "ag-grid-enterprise": "^33.2.1",
-    "ag-grid-vue3": "^33.2.1",
-    "papaparse": "^5.5.2",
-    "primevue": "^4.3.5",
-    "sortablejs": "^1.15.6",
-    "vue": "^3.5.13"
+    "ag-grid-vue3": "^33.2.1"
   },
   "peerDependenciesMeta": {
-    "@floating-ui/vue": {
-      "optional": false
-    },
-    "@primeuix/themes": {
-      "optional": false
-    },
-    "@vueuse/components": {
-      "optional": false
-    },
-    "@vueuse/core": {
-      "optional": false
-    },
-    "@vueuse/integrations": {
-      "optional": false
-    },
     "ag-charts-enterprise": {
       "optional": true
     },
@@ -108,18 +89,6 @@
     },
     "ag-grid-vue3": {
       "optional": true
-    },
-    "papaparse": {
-      "optional": false
-    },
-    "primevue": {
-      "optional": false
-    },
-    "sortablejs": {
-      "optional": false
-    },
-    "vue": {
-      "optional": false
     }
   },
   "dependencies": {
@@ -138,6 +107,10 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "chokidar-cli": "^3.0.0",
+    "eslint-plugin-vue": "^9.32.0",
     "pagefind": "^1.3.0",
     "tsx": "^4.0.0"
   }

package/pv-components/dist/vue/base/components/base/PvMultiSelectButton/PvMultiSelectButton.vue.d.ts

@@ -31,7 +31,7 @@ export interface PvMultiSelectButtonProps {
     searchPlaceholder?: string;
     overlayTrigger?: boolean;
     optionsVariant?: Exclude<MenuOptionsVariant, "radio">;
-    options?: MenuOption[];
+    options: MenuOption[];
     useTeleport?: boolean;
 }
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
@@ -58,6 +58,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
     showClear: boolean;
     useTeleport: boolean;
     teleportLocation: string;
+    options: MenuOption[];
     counterPosition: "left" | "right" | "none";
     showDropdown: boolean;
     optionsVariant: Exclude<MenuOptionsVariant, "radio">;
@@ -292,7 +293,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
         searchPlaceholder?: string;
         overlayTrigger?: boolean;
         optionsVariant?: Exclude<MenuOptionsVariant, "radio">;
-        options?: MenuOption[];
+        options: MenuOption[];
         useTeleport?: boolean;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-closed"?: (() => any) | undefined;
@@ -335,7 +336,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
         searchPlaceholder?: string;
         overlayTrigger?: boolean;
         optionsVariant?: Exclude<MenuOptionsVariant, "radio">;
-        options?: MenuOption[];
+        options: MenuOption[];
         useTeleport?: boolean;
         "onDropdown-open"?: (() => any) | undefined;
         "onDropdown-closed"?: (() => any) | undefined;

package/pv-components/dist/vue/base/components/base/PvPopoverV2/PvPopoverV2.vue.d.ts

@@ -0,0 +1,46 @@
+import { PvPopoverV2Props } from './types.ts';
+import { PvAlignmentPositions } from '../baseProps.ts';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { Strategy } from '@floating-ui/utils';
+type __VLS_Props = PvPopoverV2Props;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        content?(_: {}): any;
+    };
+    refs: {
+        triggerWrapper: HTMLDivElement;
+        floating: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    delay: number;
+    position: PvAlignmentPositions;
+    disableAutoPlacement: boolean;
+    positioningStrategy: Strategy;
+    showOnHover: boolean;
+    disableInteractive: boolean;
+    disableTeleport: boolean;
+    disableClickOutsideToClose: boolean;
+    zIndex: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    triggerWrapper: HTMLDivElement;
+    floating: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/pv-components/dist/vue/base/components/base/PvPopoverV2/types.d.ts

@@ -0,0 +1,14 @@
+import { Strategy } from '@floating-ui/vue';
+import { PvAlignmentPositions } from '../baseProps.ts';
+export interface PvPopoverV2Props {
+    disableAutoPlacement?: boolean;
+    allowedAutoPlacements?: PvAlignmentPositions[];
+    position?: PvAlignmentPositions;
+    positioningStrategy?: Strategy;
+    showOnHover?: boolean;
+    disableInteractive?: boolean;
+    disableTeleport?: boolean;
+    disableClickOutsideToClose?: boolean;
+    delay?: number;
+    zIndex?: number;
+}

package/pv-components/dist/vue/base/components/base/PvSelectButton/PvSelectButton.vue.d.ts

@@ -22,7 +22,7 @@ export interface PvSelectButton {
     showSearchInput?: boolean;
     searchPlaceholder?: string;
     optionsVariant?: Exclude<MenuOptionsVariant, "checkbox">;
-    options?: MenuOption[];
+    options: MenuOption[];
     useTeleport?: boolean;
     allowDeselect?: boolean;
     counterPosition?: "left" | "right";

package/pv-components/dist/vue/base/components/base/PvTooltipV2/PvTooltipV2.vue.d.ts

@@ -0,0 +1,28 @@
+import { PvTooltipV2Props, PvTooltipSize, PvTooltipVariants } from './types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { PvAlignmentPositions } from '../baseProps';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        content?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<PvTooltipV2Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvTooltipV2Props> & Readonly<{}>, {
+    delay: number;
+    size: PvTooltipSize;
+    variant: PvTooltipVariants;
+    position: PvAlignmentPositions;
+    showOnHover: boolean;
+    disableInteractive: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/pv-components/dist/vue/base/components/base/PvTooltipV2/types.d.ts

@@ -0,0 +1,10 @@
+import { PvSize } from '../baseProps';
+import { PvPopoverV2Props } from '../PvPopoverV2/types.ts';
+export type PvTooltipVariants = "white" | "dark";
+export type PvTooltipSize = Extract<PvSize, "sm" | "md">;
+export interface PvTooltipV2Props extends PvPopoverV2Props {
+    variant?: PvTooltipVariants;
+    label?: string;
+    description?: string;
+    size?: PvTooltipSize;
+}

package/pv-components/dist/vue/base/components/base/baseProps.d.ts

@@ -13,3 +13,4 @@ export type PvTextInputColors = (typeof PvTextInputColors)[number];
 export declare const sizeMap: Record<PvSize, string>;
 export declare const PvIconSizes: readonly [undefined, 10, 12, 20, 24, 32, 64];
 export type PvIconSize = (typeof PvIconSizes)[number];
+export type PvAlignmentPositions = "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right";

package/pv-components/dist/vue/base/components/base/index.d.ts

@@ -7,6 +7,7 @@ export { default as PvPill } from './PvPill/PvPill.vue';
 export { default as PvDropdown } from './PvDropdown/PvDropdown.vue';
 export { default as PvIcon } from './PvIcon/PvIcon.vue';
 export { default as PvPopover } from './PvPopover/PvPopover.vue';
+export { default as PvPopoverV2 } from './PvPopoverV2/PvPopoverV2.vue';
 export { default as PvSegmentedControl } from './PvSegmentedControl/PvSegmentedControl.vue';
 export { default as PvTabList } from './PvTabList/PvTabList.vue';
 export { default as PvCompanyLogo } from './PvCompanyLogo/PvCompanyLogo.vue';
@@ -20,6 +21,7 @@ export { default as PvDatePicker } from './PvDatePicker/PvDatePicker.vue';
 export { default as PvDateTime } from './PvDateTime/PvDateTime.vue';
 export { default as PvDrawer } from './PvDrawer/PvDrawer.vue';
 export { default as PvTooltip } from './PvTooltip/PvTooltip.vue';
+export { default as PvTooltipV2 } from './PvTooltipV2/PvTooltipV2.vue';
 export { default as PvTabs } from './PvTabs/PvTabs.vue';
 export { default as PvBreadcrumbs } from './PvBreadcrumbs/PvBreadcrumbs.vue';
 export { default as PvMultiSelectButton } from './PvMultiSelectButton/PvMultiSelectButton.vue';