@flightlesslabs/dodo-ui 0.6.0 → 0.6.2

package/README.md

@@ -1,5 +1,7 @@
-![Sonny and Mariel high fiving.](https://flightlesslabs.github.io/dodo-ui/og.png)
+![Dodo logo](https://flightlesslabs.github.io/dodo-ui/og.png)
 
 # Dodo Ui
 
 An open-source, opinionated UI framework for Svelte.
+
+[Github](https://github.com/flightlesslabs/dodo-ui) | [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)

package/dist/stories/Home.mdx

@@ -10,6 +10,9 @@ import item from '../../../package.json?raw';
 <h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
 
 <h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
+
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
+
 </main>
 
 <br />
@@ -56,5 +59,3 @@ Checkout documentation for [Button](?path=/docs/components-form-button--docs)
 - [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/Layout/Paper/Paper.stories.svelte

@@ -30,3 +30,8 @@ const { Story } = defineMeta({
 <Story name="Default">
   <Paper>Hola!</Paper>
 </Story>
+
+<!-- Paper with width and height -->
+<Story name="WidthAndHeight">
+  <Paper width="200px" height="200px">Hola!</Paper>
+</Story>

package/dist/stories/components/Layout/Paper/Paper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">let { children, roundness = '1x', shadow = '1x', id, class: className = '', _unsafeChildrenStringForTesting, ref = $bindable(), } = $props();
+<script lang="ts">let { children, roundness = '1x', shadow = '1x', id, class: className = '', _unsafeChildrenStringForTesting, width, height, ref = $bindable(), } = $props();
 export {};
 </script>
 
@@ -14,6 +14,7 @@ export {};
   ].join(' ')}
   {id}
   bind:this={ref}
+  style={`${width ? `width:${width};` : ''}${height ? `height:${height};` : ''}`}
 >
   {#if children}
     {@render children()}

package/dist/stories/components/Layout/Paper/Paper.svelte.d.ts

@@ -11,8 +11,12 @@ interface PaperProps {
     roundness?: PaperRoundness;
     /** Shadow elevation */
     shadow?: PaperShadow;
-    /** Custom css class*/
+    /** Custom css class */
     class?: string;
+    /** Paper Width */
+    width?: string;
+    /** Paper Height */
+    height?: string;
     /** Id */
     id?: string;
     /** Test: ⚠️ Unsafe Children String. Do Not use*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/compat": "^1.2.8",
-    "@eslint/js": "^9.24.0",
+    "@eslint/js": "^9.25.1",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-svelte-csf": "5.0.0-next.28",
     "@storybook/blocks": "^8.6.12",
@@ -61,36 +61,36 @@
     "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.5",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@vitest/browser": "^3.1.1",
-    "@vitest/coverage-v8": "^3.1.1",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.1",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.0.0",
-    "playwright": "^1.51.1",
+    "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.11",
-    "sass": "^1.86.3",
+    "publint": "^0.3.12",
+    "sass": "^1.87.0",
     "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.25.10",
-    "svelte-check": "^4.1.5",
+    "svelte": "^5.28.2",
+    "svelte-check": "^4.1.6",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.1",
-    "vite": "^6.2.5",
-    "vitest": "^3.1.1"
+    "typescript-eslint": "^8.31.0",
+    "vite": "^6.3.3",
+    "vitest": "^3.1.2"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
-    "node": "22.14.0",
-    "pnpm": "10.7.1"
+    "node": "22.15.0",
+    "pnpm": "10.9.0"
   },
   "dependencies": {
     "@iconify/svelte": "^4.2.0"

package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte

@@ -34,3 +34,8 @@
 <Story name="Default">
   <Paper>Hola!</Paper>
 </Story>
+
+<!-- Paper with width and height -->
+<Story name="WidthAndHeight">
+  <Paper width="200px" height="200px">Hola!</Paper>
+</Story>

package/src/lib/stories/components/Layout/Paper/Paper.svelte

@@ -16,8 +16,12 @@
     roundness?: PaperRoundness;
     /** Shadow elevation */
     shadow?: PaperShadow;
-    /** Custom css class*/
+    /** Custom css class */
     class?: string;
+    /** Paper Width */
+    width?: string;
+    /** Paper Height */
+    height?: string;
     /** Id */
     id?: string;
     /** Test: ⚠️ Unsafe Children String. Do Not use*/
@@ -31,6 +35,8 @@
     id,
     class: className = '',
     _unsafeChildrenStringForTesting,
+    width,
+    height,
     ref = $bindable<HTMLDivElement>(),
   }: PaperProps = $props();
 </script>
@@ -44,6 +50,7 @@
   ].join(' ')}
   {id}
   bind:this={ref}
+  style={`${width ? `width:${width};` : ''}${height ? `height:${height};` : ''}`}
 >
   {#if children}
     {@render children()}