@flightlesslabs/dodo-ui 0.1.5 → 0.3.0

package/dist/index.d.ts

@@ -3,3 +3,9 @@ export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from '
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
+/** Form: TextInput */
+export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
+export type { TextInputRoundness, TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
+/** Form: PasswordInput */
+export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type { PasswordInputToggleEvent } from './stories/components/Form/PasswordInput/PasswordInput.svelte';

package/dist/index.js

@@ -1,3 +1,7 @@
 import './styles/global.css';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
+/** Form: TextInput */
+export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
+/** Form: PasswordInput */
+export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';

package/dist/stories/Home.mdx

@@ -1,10 +1,60 @@
-<img
-  src="dodo-circle-6.png"
-  style={{ width: 200, height: 'auto', display: 'flex', justifySelf: 'center' }}
+import { Source } from '@storybook/blocks';
+import item from '../../../package.json?raw';
+
+<main style={{ textAlign: 'center' }}>
+
+<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
+
+# Dodo UI
+
+<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
+
+<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
+</main>
+
+<br />
+<br />
+
+## Install
+
+pnpm
+
+<Source
+  dark
+  language="bash"
+  code={`
+pnpm add @flightlesslabs/dodo-ui
+`}
 />
 
-<h1 style={{ textAlign: 'center' }}>Dodo UI</h1>
+npm
+
+<Source
+  dark
+  language="bash"
+  code={`
+npm i @flightlesslabs/dodo-ui
+`}
+/>
+
+## Use it!
+
+Lets import [Button](?path=/docs/components-form-button--docs) component
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+## Explore more
 
-<div style={{ textAlign: 'center', fontSize: '1rem', fontWeight: 400 }}>
-  An open-source, opinionated UI framework for Svelte.
-</div>
+- [Themes](?path=/docs/philosophy-themes--docs)
+- [Colors](?path=/docs/philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/philosophy-colors--docs#adjusting-opacity)
+- [Github](https://github.com/flightlesslabs/dodo-ui)
+- [NPM](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)

package/dist/stories/components/Form/Button/Button.stories.svelte

@@ -16,7 +16,7 @@ export const storyButtonArgTypes = {
     },
     roundness: {
         control: { type: 'select' },
-        options: [false, 1, 2, 3, 'full'],
+        options: [false, '1x', '2x', '3x', 'full'],
     },
     size: {
         control: { type: 'select' },
@@ -50,20 +50,25 @@ const { Story } = defineMeta({
   <Button>Click me!</Button>
 </Story>
 
-<Story name="Disabled" args={{ disabled: true }}>
-  <Button disabled>Click me!</Button>
-</Story>
-
 <!-- Button with border around it -->
 <Story name="Outline" args={{ outline: true }}>
   <Button outline>Click me!</Button>
 </Story>
 
+<Story name="Disabled" args={{ disabled: true }}>
+  <Button disabled>Click me!</Button>
+</Story>
+
 <!-- Form submit button -->
 <Story name="Sumbit Button" args={{ type: 'submit' }}>
   <Button type="submit">Submit Form</Button>
 </Story>
 
+<!-- Form submit button -->
+<Story name="Full width Button" args={{ fullWidth: true }}>
+  <Button fullWidth>Click me!</Button>
+</Story>
+
 <!-- Anchor Link styled like a Button -->
 <Story
   name="Link Button"