feat: add nui-mask utility stories

src/plugins/components/mask/mask.component.ts

@@ -0,0 +1,30 @@
+import { html } from 'lit'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { MaskAttrs } from './mask.types'
+import * as variants from './mask.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Mask = ({ ...attrs }: MaskAttrs) => {
+  return html`
+    <div class="flex items-end gap-4 p-4">
+      <div
+        class="nui-mask nui-mask-hex h-12 w-12 bg-muted-100 dark:bg-muted-800"
+      ></div>
+      <div
+        class="nui-mask nui-mask-hexed h-12 w-12 bg-muted-100 dark:bg-muted-800"
+      ></div>
+      <div
+        class="nui-mask nui-mask-blob h-12 w-12 bg-muted-100 dark:bg-muted-800"
+      ></div>
+      <div
+        class="nui-mask nui-mask-deca h-12 w-12 bg-muted-100 dark:bg-muted-800"
+      ></div>
+      <div
+        class="nui-mask nui-mask-diamond h-12 w-12 bg-muted-100 dark:bg-muted-800"
+      ></div>
+    </div>
+  `
+}

src/plugins/components/mask/mask.doc.mdx

@@ -0,0 +1,15 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as MaskStories from './mask.stories'
+import { defaultConfig } from './mask.config'
+
+<Meta of={MaskStories} />
+
+# nui-mask
+
+When using autocompletes or search, you often see some highlighted text. This is the component that does that.
+
+<Primary />
+
+## Props
+
+<Controls />

src/plugins/components/mask/mask.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import type { MaskAttrs } from './mask.types'
+import { Mask } from './mask.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/Mask',
+  // tags: ['autodocs'],
+  render: (args) => Mask(args),
+  argTypes: {},
+} satisfies Meta<MaskAttrs>
+
+export default meta
+type Story = StoryObj<MaskAttrs>
+
+// first export is the Primary story
+
+// #region Main
+export const Main: Story = {
+  name: 'Main example',
+  args: {},
+}
+// #endregion

src/plugins/components/mask/mask.types.ts

@@ -0,0 +1,10 @@
+import type { PropertyVariant } from '~/types/utils'
+
+export interface MaskProps extends Record<string, unknown> {}
+
+export interface MaskEvents {}
+
+export interface MaskSlots {}
+
+export type MaskAttrs = MaskProps & MaskEvents & MaskSlots
+export type MaskVariant<T> = PropertyVariant<T, MaskProps>

src/plugins/components/mask/mask.variants.ts

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