design-system-next 2.7.41 → 2.7.43

package/dist/package.json.d.ts

@@ -0,0 +1,94 @@
+declare const _default: {
+  "name": "design-system-next",
+  "private": false,
+  "version": "2.7.43",
+  "main": "./dist/design-system-next.js",
+  "module": "./dist/design-system-next.js",
+  "repository": {
+    "type": "git",
+    "url": "https://dev.azure.com/sproutphil/Sprout%20Design%20System/_git/Sprout%20Design%20System%20Next"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "dist/",
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/design-system-next.js",
+      "require": "./dist/design-system-next.js"
+    },
+    "./style.css": "./dist/main.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "watch-build": "vue-tsc && vite build --watch",
+    "types": "vue-tsc",
+    "preview": "vite preview",
+    "lint:script": "eslint \"**/*.{js,ts,vue}\"",
+    "lint:style": "stylelint \"**/*.{vue,css}\"",
+    "fix:style": "stylelint --fix \"**/*.{vue,css}\"",
+    "lint": "npm run lint:script && npm run lint:style",
+    "prepublishOnly": "npm run build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs",
+    "docs:preview": "vitepress preview docs",
+    "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
+  },
+  "dependencies": {
+    "@cloudinary/url-gen": "^1.21.0",
+    "@eslint/js": "^9.17.0",
+    "@iconify-icons/ph": "^1.2.5",
+    "@iconify/vue": "^4.3.0",
+    "classnames": "^2.5.1",
+    "countries-list": "^3.1.1",
+    "dayjs": "^1.11.13",
+    "floating-vue": "^5.2.2",
+    "libphonenumber-js": "^1.12.5",
+    "pinia": "^2.3.1",
+    "stylelint": "^16.12.0",
+    "stylelint-config-recess-order": "^5.1.1",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "typescript-eslint": "^8.19.1",
+    "vite-plugin-sass": "^0.1.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@stylistic/stylelint-plugin": "^3.1.1",
+    "@types/node": "^22.10.5",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "rollup-plugin-gzip": "^4.0.1",
+    "sass-embedded": "^1.83.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.7.2",
+    "unplugin-vue-components": "^28.0.0",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitepress": "^1.5.0",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
+  }
+}
+;
+
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.7.41",
+  "version": "2.7.43",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/components/accordion/accordion.vue

@@ -53,13 +53,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue';
+import { Icon } from '@iconify/vue';
+
 import { accordionPropTypes } from './accordion';
 import { useAccordion } from './use-accordion';
+
 import SprCollapsible from '@/components/collapsible/collapsible.vue';
-import { Icon } from '@iconify/vue';
 import SprButton from '@/components/button/button.vue';
 
 const props = defineProps(accordionPropTypes);
+
 const { collapsedState, toggleCollapse, setClickedIndex, clearIndex, clickedIndex } = useAccordion(props);
 </script>

package/src/components/calendar-cell/calendar-cell.vue

@@ -21,12 +21,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
 import { Icon } from '@iconify/vue';
-import SprStatus from '@/components/status/status.vue';
+
 import { calendarCellPropTypes, calendarCellEmitTypes } from './calendar-cell';
 import { useCalendarCell } from './use-calendar-cell';
 
+import SprStatus from '@/components/status/status.vue';
+
 const props = defineProps(calendarCellPropTypes);
 const emit = defineEmits(calendarCellEmitTypes);
 

package/src/components/collapsible/collapsible.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
 import { collapsiblePropTypes, collapsibleEmitTypes } from './collapsible';
 import { useCollapsible } from './use-collapsible';
 

package/src/components/date-picker/date-picker.ts

@@ -128,7 +128,7 @@ export type MinMaxYearType = {
 
 export const datePickerEmitTypes = {
   'update:modelValue': (value: string) => typeof value === 'string',
-  getInputValue: (value: string) => typeof value === 'string',
+  getInputValue: (value: string | null) => value === null || typeof value === 'string',
   getDateFormats: (value: Record<string, string>) => {
     return (
       typeof value === 'object' &&

package/src/components/date-picker/date-picker.vue

@@ -170,13 +170,16 @@
                       'spr-text-color-brand-base': calendarTabIsTodayIndicator(day) && !calendarTabIsSelectedDate(day),
 
                       // Active Month Dates - only apply if not selected and not today
-                      'spr-text-color-strong': calendarTabIsActiveMonthDates(day) && !calendarTabIsSelectedDate(day) && !calendarTabIsTodayIndicator(day),
+                      'spr-text-color-strong':
+                        calendarTabIsActiveMonthDates(day) &&
+                        !calendarTabIsSelectedDate(day) &&
+                        !calendarTabIsTodayIndicator(day),
 
                       // Inactive Month Dates (Past/Future)
                       'spr-text-color-disabled': calendarTabIsInactiveMonthDates(day),
 
                       // Selected Date
-                      'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-cursor-pointer spr-text-white-50 !spr-text-white-50 active:spr-scale-95':
+                      'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-cursor-pointer !spr-text-white-50 active:spr-scale-95':
                         calendarTabIsSelectedDate(day),
 
                       // Unselected Date

package/src/components/date-picker/use-date-picker.ts

@@ -615,7 +615,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     if (modelValue.value) {
       // First try to parse with the specified format, then try default format as fallback
       let formattedDate = dayjs(modelValue.value, format.value);
-      
+
       // If the date is not valid with the specified format, try with the default format
       if (!formattedDate.isValid()) {
         formattedDate = dayjs(modelValue.value, 'MM-DD-YYYY');
@@ -655,7 +655,11 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
         emitDateFormats();
 
         // Use the specified format for the input value
-        emit('getInputValue', formattedDate.format(format.value));
+        if (!monthInput.value && !dateInput.value && !yearInput.value) {
+          emit('getInputValue', null);
+        } else {
+          emit('getInputValue', formattedDate.format(format.value));
+        }
       } else {
         console.error(`Error: Could not parse date "${modelValue.value}" with format "${format.value}"`);
       }
@@ -879,10 +883,13 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     // Format the date according to the format prop
     const dateObj = dayjs(`${emittedMonth}-${dateInput.value}-${yearInput.value}`, 'MM-DD-YYYY');
-    
+
     // Use the specified format for the input value
-    emit('getInputValue', dateObj.format(format.value));
-    
+    if (!monthInput.value && !dateInput.value && !yearInput.value) {
+      emit('getInputValue', null);
+    } else {
+      emit('getInputValue', dateObj.format(format.value));
+    }
   };
 
   const emitMonthList = () => {