tide-design-system 2.5.13 → 2.5.14

package/package.json

@@ -36,6 +36,18 @@
     "vue": "^3.5.22",
     "vue-tsc": "^3.2.5"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/tide-design-system.js",
+      "types": "./dist/tide-design-system.d.ts"
+    },
+    "./css/*": "./dist/css/*",
+    "./utilities/*": "./dist/utilities/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
   "homepage": "https://tide-design-system.netlify.app",
   "license": "MIT",
   "name": "tide-design-system",
@@ -60,9 +72,8 @@
     "type-check": "vue-tsc --noEmit"
   },
   "type": "module",
-  "main": "dist/tide-design-system.js",
   "types": "dist/tide-design-system.d.ts",
-  "version": "2.5.13",
+  "version": "2.5.14",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/.eslintrc.cjs

@@ -1,119 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution');
-
-module.exports = {
-  extends: [
-    'plugin:vue/vue3-recommended',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier',
-    'plugin:storybook/recommended',
-    'plugin:import/errors',
-    'plugin:import/typescript',
-    'plugin:import/warnings',
-  ],
-  ignorePatterns: ['storybook-static/'],
-  parserOptions: {
-    ecmaVersion: 'latest',
-  },
-  root: true,
-  rules: {
-    'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
-    'import/order': [
-      'error',
-      {
-        'alphabetize': {
-          caseInsensitive: false,
-          order: 'asc',
-          orderImportKind: 'asc',
-        },
-        'groups': [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index', 'type'],
-        'newlines-between': 'always',
-      },
-    ],
-    'prettier/prettier': [
-      'warn',
-      {
-        bracketLine: false,
-        printWidth: 120,
-        quoteProps: 'consistent',
-        singleAttributePerLine: true,
-        singleQuote: true,
-        tabWidth: 2,
-        vueIndentScriptAndStyle: true,
-      },
-    ],
-    'quote-props': ['warn', 'consistent-as-needed'],
-    'sort-imports': [
-      'error',
-      {
-        allowSeparatedGroups: true,
-        ignoreDeclarationSort: true,
-        ignoreMemberSort: false,
-      },
-    ],
-    'vue/attributes-order': [
-      'warn',
-      {
-        alphabetical: true,
-        // Replicates ASCII sort order w/ special characters.
-        order: [
-          [
-            'UNIQUE', // :prop='foo'
-            'ATTR_DYNAMIC', // :class='foo'
-          ],
-          'EVENTS', // @click='getFoo'
-          [
-            'ATTR_SHORTHAND_BOOL',
-            'ATTR_STATIC',
-            'CONDITIONALS',
-            'CONTENT',
-            'DEFINITION',
-            'GLOBAL',
-            'LIST_RENDERING',
-            'OTHER_DIRECTIVES',
-            'RENDER_MODIFIERS',
-            'SLOT',
-            'TWO_WAY_BINDING',
-          ],
-        ],
-      },
-    ],
-    'vue/component-tags-order': [
-      'warn',
-      {
-        order: ['script', 'template', 'style[scoped]', 'style:not([scoped])'],
-      },
-    ],
-    'vue/html-self-closing': [
-      'error',
-      {
-        html: {
-          component: 'always',
-          normal: 'always',
-          void: 'always',
-        },
-      },
-    ],
-    'vue/multiline-html-element-content-newline': [
-      'warn',
-      {
-        ignores: ['pre', 'textarea'],
-      },
-    ],
-    'vue/script-indent': [
-      'off', // Disabled bc ESLint and Prettier's indentation rules conflict.
-      2,
-      {
-        baseIndent: 1,
-        switchCase: 1,
-      },
-    ],
-    'vue/sort-keys': ['warn', 'asc'],
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {},
-    },
-  },
-};

package/.github/workflows/publish-release.yml

@@ -1,38 +0,0 @@
-name: 'Publish Release to Github'
-
-permissions:
-  id-token: write
-  contents: write
-  issues: read
-  pull-requests: read
-
-on:
-  push:
-    tags:
-      # Will run on any tag push, can be updated with Regex if needed
-      - '**'
-
-jobs:
-  publish_release:
-    runs-on: ubuntu-latest
-    env:
-      GH_TOKEN: ${{ github.token }}
-      tag: ${{ github.ref_name }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Get PR titles from milestone for release notes
-        id: get-notes
-        run: |
-          echo "## What's New" > notes.md
-          release_notes=$(gh pr list --search "milestone:${{ env.tag }}" --state all --json title,author,number \
-          | jq -r '.[] | "- \(.title) by @\(.author.login) in #\(.number)"')
-          printf "%s\n" "${release_notes}" >> notes.md
-
-      - name: Create release
-        run: |
-          gh release create ${{ env.tag }} \
-              --notes-file notes.md \
-              --verify-tag \
-              --title ${{ env.tag }}

package/.storybook/main.ts

@@ -1,70 +0,0 @@
-import { isProduction } from '../src/utilities/storybook';
-
-import type { StorybookConfig } from '@storybook/vue3-vite';
-
-const config: StorybookConfig = {
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-essentials',
-  ],
-  docs: {
-    autodocs: 'tag',
-  },
-  framework: {
-    name: '@storybook/vue3-vite',
-    options: {},
-  },
-  stories: [
-    '../src/stories/Welcome.mdx',
-    // '../src/stories/*.stories.ts',
-
-    isProduction ? '' : '../src/stories/Demo*.stories.ts',
-    '../src/stories/Foundations*.stories.ts',
-
-    '../src/stories/TideAccordionItem.stories.ts',
-    '../src/stories/TideAlert.stories.ts',
-    '../src/stories/TideBadge.stories.ts',
-    '../src/stories/TideBadgeTrustedPartner.stories.ts',
-    '../src/stories/TideBadgeVerifiedVehicle.stories.ts',
-    '../src/stories/TideBreadCrumbs.stories.ts',
-    '../src/stories/TideButton.stories.ts',
-    '../src/stories/TideButtonIcon.stories.ts',
-    '../src/stories/TideButtonPagination.stories.ts',
-    '../src/stories/TideButtonSave.stories.ts',
-    '../src/stories/TideButtonSegmented.stories.ts',
-    '../src/stories/TideCard.stories.ts',
-    '../src/stories/TideCarousel.stories.ts',
-    '../src/stories/TideChipAction.stories.ts',
-    '../src/stories/TideChipFilter.stories.ts',
-    '../src/stories/TideChipInput.stories.ts',
-    '../src/stories/TideColumns.stories.ts',
-    '../src/stories/TideDivider.stories.ts',
-    '../src/stories/TideIcon.stories.ts',
-    '../src/stories/TideImage.stories.ts',
-    '../src/stories/TideImageBackground.stories.ts',
-    '../src/stories/TideIndicator.stories.ts',
-    '../src/stories/TideInputCheckbox.stories.ts',
-    '../src/stories/TideInputRadio.stories.ts',
-    '../src/stories/TideInputSelect.stories.ts',
-    '../src/stories/TideInputText.stories.ts',
-    '../src/stories/TideInputTextarea.stories.ts',
-    '../src/stories/TideLink.stories.ts',
-    '../src/stories/TideMenuItem.stories.ts',
-    '../src/stories/TideModal.stories.ts',
-    '../src/stories/TidePopover.stories.ts',
-    '../src/stories/TideRating.stories.ts',
-    '../src/stories/TideRealmLogo.stories.ts',
-    '../src/stories/TideSheet.stories.ts',
-    '../src/stories/TideSwitch.stories.ts',
-    '../src/stories/TideTabs.stories.ts',
-    '../src/stories/TideToaster.stories.ts',
-    // '../src/stories/TidePagination.stories.ts',
-    // '../src/stories/TideSeoLinks.stories.ts',
-  ],
-  viteFinal: async (config, { configType }) => {
-    if (config.build) config.build.sourcemap = 'inline'
-    return config;
-  },
-};
-
-export default config;

package/.storybook/preview.ts

@@ -1,256 +0,0 @@
-import { useArgs } from '@storybook/preview-api';
-
-import type { Preview } from '@storybook/vue3';
-
-import { setup } from '@storybook/vue3';
-
-import '@/assets/css/main.css';
-import '@/assets/css/reset.css';
-import '@/assets/css/storybook.css';
-
-import DemoCssUtilities from '../src/stories/DemoCssUtilities.stories';
-import DemoCssUtilitiesByTextInput from '../src/stories/DemoCssUtilitiesByTextInput.stories';
-import FoundationsGrid from '../src/stories/FoundationsGrid.stories';
-import FoundationsMargin from '../src/stories/FoundationsMargin.stories';
-import { isProduction } from '../src/utilities/storybook';
-import TideAlert from '../src/components/TideAlert.vue';
-
-const cssRoot = isProduction ? '/assets/css/realm' : '/src/assets/css/realm';
-
-const replaceRealmStyles = (realm: string) => {
-    document.getElementById('realmStyles')?.remove();
-
-    const href = `${cssRoot}/${realm}.css`;
-    const realmStyles = document.createElement('link');
-
-    realmStyles.href = href;
-    realmStyles.id = 'realmStyles';
-    realmStyles.rel = 'stylesheet';
-    document.body.append(realmStyles);
-};
-
-const preview: Preview = {
-  decorators: [
-    (story, context) => {
-      const decoratorOptOuts = [
-        DemoCssUtilities.title,
-        DemoCssUtilitiesByTextInput.title,
-        FoundationsGrid.title,
-        FoundationsMargin.title,
-      ];
-
-      const decoratorCss = decoratorOptOuts.includes(context.title) ? '' : 'tide-padding-top-2 tide-padding-x-2';
-
-      replaceRealmStyles(context.globals.realm);
-
-      return {
-        components: { story },
-        template: `<div class="${decoratorCss} tide-padding-bottom-4 ${context.globals.surfaceBg} ${context.globals.surfaceFg}"><story /></div><div class="tide-position-absolute tide-display-flex tide-axis1-end tide-right-0 tide-top-0 tide-width-full tide-pointer-events-none"><TideAlert :class="['tide-margin-1 tide-width-full']" id="do-something-alert" is-dismissible="false" is-toast="true" heading="Did something." style="opacity: 0; transition: opacity ease-in-out 300ms;" /></div>`
-      };
-    },
-    (story, context) => {
-      const [_args, updateArgs] = useArgs();
-
-      return story({ ...context, updateArgs });
-    },
-  ],
-  globalTypes: {
-    realm: {
-      description: 'Determines Realm context of dynamic CSS utilities',
-      defaultValue: 'rv',
-      toolbar: {
-        dynamicTitle: true,
-        items: [
-          {
-            title: 'Realm: Aero',
-            value: 'aero',
-          },
-          {
-            title: 'Realm: ATV',
-            value: 'atv',
-          },
-          {
-            title: 'Realm: Boatmart',
-            value: 'boatmart',
-          },
-          {
-            title: 'Realm: Cycle',
-            value: 'cycle',
-          },
-          {
-            title: 'Realm: Equipment',
-            value: 'equipment',
-          },
-          {
-            title: 'Realm: PWC',
-            value: 'pwc',
-          },
-          {
-            title: 'Realm: RV',
-            value: 'rv',
-          },
-          {
-            title: 'Realm: Snow',
-            value: 'snow',
-          },
-          {
-            title: 'Realm: Truck',
-            value: 'truck',
-          },
-        ],
-        title: 'Realm',
-      },
-    },
-    surfaceBg: {
-      description: 'Determines Background context of dynamic CSS utilities',
-      defaultValue: 'tide-bg-surface',
-      toolbar: {
-        dynamicTitle: true,
-        items: [
-          {
-            title: 'Surface: Default',
-            value: 'tide-bg-surface',
-          },
-          {
-            title: 'Surface: Variant',
-            value: 'tide-bg-surface-variant',
-          },
-          {
-            title: 'Surface: Brand',
-            value: 'tide-bg-surface-brand',
-          },
-          {
-            title: 'Surface: Accent',
-            value: 'tide-bg-surface-accent',
-          },
-          {
-            title: 'Surface: Gradient',
-            value: 'tide-bg-surface-gradient',
-          },
-          {
-            title: 'Surface: Floating',
-            value: 'tide-bg-surface-floating',
-          },
-        ],
-        title: 'Surface',
-      },
-    },
-    surfaceFg: {
-      description: 'Determines Foreground context of dynamic CSS utilities',
-      defaultValue: 'tide-on-surface',
-      toolbar: {
-        dynamicTitle: true,
-        items: [
-          {
-            title: 'On Surface: Default',
-            value: 'tide-font-on-surface',
-          },
-          {
-            title: 'On Surface: Variant',
-            value: 'tide-font-on-surface-variant',
-          },
-          {
-            title: 'On Surface: Brand',
-            value: 'tide-font-on-surface-brand',
-          },
-          {
-            title: 'On Surface: Inverse',
-            value: 'tide-font-on-surface-inverse',
-          },
-          {
-            title: 'On Surface: Variant Inverse',
-            value: 'tide-font-on-surface-variant-inverse',
-          },
-        ],
-        title: 'On Surface',
-      },
-    },
-  },
-  parameters: {
-    backgrounds: { disable: true },
-    docs: {
-      canvas: {
-        // sourceState:  'shown',
-        withToolbar: false,
-      },
-      controls: { sort: 'requiredFirst' },
-      source: { type: 'dynamic' },
-    },
-    layout: 'fullscreen',
-    options: {
-      storySort: {
-        order: [
-          'Welcome',
-          'Utilities',
-          'Components',
-          'Proof of Concept', [
-            'CSS Utilities Demo',
-            'CSS Utilities By Text Input',
-          ],
-        ],
-      },
-    },
-    toolbar: {
-      grid: { hidden: true },
-    },
-    viewport: {
-      viewports: {
-        extraSmallMin: {
-          name: 'Extra Small (iPhone 12/13 Mini)',
-          styles: {
-            width: '375px',
-            height: '812px',
-          },
-        },
-        extraSmallMax: {
-          name: 'Extra Small Max',
-          styles: {
-            width: '767px',
-            height: '100%',
-          },
-        },
-        smallMin: {
-          name: 'Small Min',
-          styles: {
-            width: '768px',
-            height: '100%',
-          },
-        },
-        smallMax: {
-          name: 'Small Max',
-          styles: {
-            width: '991px',
-            height: '100%',
-          },
-        },
-        mediumMin: {
-          name: 'Medium Min',
-          styles: {
-            width: '992px',
-            height: '100%',
-          },
-        },
-        mediumMax: {
-          name: 'Medium Max',
-          styles: {
-            width: '1231px',
-            height: '100%',
-          },
-        },
-        largeMin: {
-          name: 'Large Min',
-          styles: {
-            width: '1232px',
-            height: '100%',
-          },
-        },
-      },
-    },
-  },
-};
-
-setup((app) => {
-  app.component('TideAlert', TideAlert);
-});
-
-export default preview;

package/docs/configuation.md

@@ -1,47 +0,0 @@
-# TIDE Configuration
-
-You can configure global TIDE behavior using `provideTideConfig()`. Place it in a top-level file such as `app.vue` (anywhere Vue’s `provide()` works). See Vue’s docs on [provide/inject](https://vuejs.org/guide/components/provide-inject) for more details.
-
-## `provideTideConfig()`
-
-``` ts
-import { provideTideConfig } from 'tide-design-system';
-
-provideTideConfig({
-  linkComponent: 'a', // default
-});
-```
-
-### Config values
-
-| Key | Type | Default | Description |
-| --- | --- | --- | --- |
-| `linkComponent` | `'a' \| Component` | `'a'` | Replaces the root element used by link-based TIDE components. |
-
-## `linkComponent` (TIDE 2.5+)
-
-Use this to replace all `<a>` elements in TIDE components with a custom component. Useful for frameworks like Nuxt.
-
-### Nuxt Example (using `NuxtLink`)
-
-``` vue
-<!-- app.vue -->
-<script setup lang="ts">
-  import { provideTideConfig } from 'tide-design-system';
-  import { NuxtLink } from '#components';
-
-  provideTideConfig({
-    linkComponent: NuxtLink,
-  });
-</script>
-```
-
-This updates all TIDE components that render links, including:
-
-- TideLink
-- TideButton (`:element="ELEMENT.LINK"`)
-- TideCard (`:type="TYPE_CARD.ACTION"` with `href`)
-- TideBreadCrumbs
-- And others
-
-All these will now render using `<NuxtLink />` automatically.