feat: add nui-mark utility stories

src/plugins/components/mark/mark.component.ts

@@ -0,0 +1,20 @@
+import { html } from 'lit'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { MarkAttrs } from './mark.types'
+import * as variants from './mark.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Mark = ({ ...attrs }: MarkAttrs) => {
+  return html`
+    <div>
+      <p class="nui-text nui-text-md text-muted-800 dark:text-muted-100">
+        Iam a text that contains
+        <span class="nui-mark">some marked words</span>
+        inside.
+      </p>
+    </div>
+  `
+}

src/plugins/components/mark/mark.doc.mdx

@@ -0,0 +1,50 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as MarkStories from './mark.stories'
+import { defaultConfig } from './mark.config'
+
+<Meta of={MarkStories} />
+
+# nui-mark
+
+When using autocompletes or search, you often see some highlighted text. This is the component that does that.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Customization
+
+### Default config
+
+<div className="relative">
+  <details className="relative bg-slate-50 border border-slate-200 rounded-lg p-4 [&>summary>svg]:open:-rotate-180">
+    <summary className="list-none cursor-pointer">
+      <span className="font-sans text-slate-500">View configuration options</span>
+      <svg
+        className="w-5 h-5 text-slate-500 absolute top-5 end-4 transition-transform duration-300"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="m6 9l6 6l6-6"
+        />
+      </svg>
+    </summary>
+
+    <div className="!mt-4">
+      <pre >
+        {JSON.stringify(defaultConfig, null, 2)}
+      </pre>
+    </div>
+
+  </details>
+</div>

src/plugins/components/mark/mark.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import type { MarkAttrs } from './mark.types'
+import { Mark } from './mark.component'
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+  title: 'Shuriken UI/Utility/Mark',
+  // tags: ['autodocs'],
+  render: (args) => Mark(args),
+  argTypes: {},
+} satisfies Meta<MarkAttrs>
+
+export default meta
+type Story = StoryObj<MarkAttrs>
+
+// first export is the Primary story
+
+// #region Main
+export const Main: Story = {
+  name: 'Main example',
+  args: {},
+}
+// #endregion

src/plugins/components/mark/mark.types.ts

@@ -0,0 +1,10 @@
+import type { PropertyVariant } from '~/types/utils'
+
+export interface MarkProps extends Record<string, unknown> {}
+
+export interface MarkEvents {}
+
+export interface MarkSlots {}
+
+export type MarkAttrs = MarkProps & MarkEvents & MarkSlots
+export type MarkVariant<T> = PropertyVariant<T, MarkProps>

src/plugins/components/mark/mark.variants.ts

@@ -0,0 +1 @@
+export {}