feat: add nui-focus utility stories

src/plugins/components/focus/focus.component.ts

@@ -0,0 +1,20 @@
+import { html } from 'lit'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { FocusAttrs } from './focus.types'
+import * as variants from './focus.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Focus = ({ ...attrs }: FocusAttrs) => {
+  return html`
+    <div
+      tabindex="0"
+      role="button"
+      class="nui-focus h-12 flex items-center p-6 rounded-md bg-muted-100 dark:bg-muted-800"
+    >
+      <span>Iam a focus ready block. Focus me!</span>
+    </div>
+  `
+}

src/plugins/components/focus/focus.doc.mdx

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

src/plugins/components/focus/focus.stories.ts

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

src/plugins/components/focus/focus.types.ts

@@ -0,0 +1,10 @@
+import type { PropertyVariant } from '~/types/utils'
+
+export interface FocusProps extends Record<string, unknown> {}
+
+export interface FocusEvents {}
+
+export interface FocusSlots {}
+
+export type FocusAttrs = FocusProps & FocusEvents & FocusSlots
+export type FocusVariant<T> = PropertyVariant<T, FocusProps>

src/plugins/components/focus/focus.variants.ts

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