diff --git a/bun.lock b/bun.lock index 5831aa25..c0380bb8 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.103a606", + "lapikit": "^0.0.0-insiders.ee60e68", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.103a606", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-xvXFwyZumbnNyelxdorLtXzQn6OuAJDwHx6jtw98fPkreiTIXQZh5LIzelNANFVlJ6Rlg1wF3c33G4XZHTrYuQ=="], + "lapikit": ["lapikit@0.0.0-insiders.ee60e68", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-tRqNfAUKO39b2G9mH64u/D2OXUN+dYNEmQXiNQV/EeupSQup7tW0/G9pT2B6TEu2c9HDNNr3+gZjoF4aYmR9wg=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index f256d3c1..af4631dc 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.103a606", + "lapikit": "^0.0.0-insiders.ee60e68", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/content/docs/components/card.md b/src/content/docs/components/card.md index 53fc669b..53cd03e4 100644 --- a/src/content/docs/components/card.md +++ b/src/content/docs/components/card.md @@ -21,16 +21,15 @@ The `kit:card` component is a versatile container used to group together informa -`kit:card` is a layout container, it adds no heading or structure on its own. Use the utility classes below inside it to organise content consistently. +`kit:card` is a layout container, it adds no heading or structure on its own. Use the following subcomponents to structure your card content: -| class | description | -| -------------------------- | -------------------------------------------------------------- | -| `kit-card__media` | Wraps media (image, video). Clips overflow to the card radius. | -| `kit-card__header` | Bold title. `font-weight: 600`, tight line-height. | -| `kit-card__body` | Main text content. | -| `kit-card__footer` | Flex row between footer text and actions. | -| `kit-card__footer-content` | Muted text (date, meta) inside the footer. | -| `kit-card__actions` | Inline action buttons inside the footer. | +| components | description | +| -------------------- | -------------------------------------------------------------- | +| `kit:card-media` | Wraps media (image, video). Clips overflow to the card radius. | +| `kit:card-title` | Bold title. `font-weight: 600`, tight line-height. | +| `kit:card-content` | Main text content. | +| `kit:card-actions` | Flex bar for action buttons. | +| `kit:card-container` | Main container for the card content. | import('$examples/components/card/structure.svelte?raw')}> @@ -54,7 +53,7 @@ The `kit:card` component is a versatile container used to group together informa `density` adjusts the internal padding. -- **density**: `'compact' | 'default' | 'comfortable'` = `'default'` +- **density**: `'none' | 'compact' | 'default' | 'comfortable'` = `'default'` import('$examples/components/card/density.svelte?raw')}> @@ -90,7 +89,7 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c | ----------- | --------------------------------------------------------------- | ------------------------------------------------------- | ----------- | | is | `'div' \| 'article' \| 'section' \| 'aside' \| 'a' \| 'button'` | HTML element to render. Overridden by `href`. | `'div'` | | variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Internal padding. | `'default'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Internal padding. | `'default'` | | rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'md'` | | href | `string` | Renders as ``. Enables interactive mode. | | | interactive | `boolean` | Enables hover lift and ripple without changing the tag. | `false` | diff --git a/src/content/docs/hooks/use-theme.md b/src/content/docs/hooks/use-theme.md index 2e881cc0..0d60ea17 100644 --- a/src/content/docs/hooks/use-theme.md +++ b/src/content/docs/hooks/use-theme.md @@ -1,6 +1,6 @@ --- -title: "useTheme action" -description: "Learn how the UseTheme hook from Lapikit simplifies theme management in Svelte: switch dark/light modes, sync global state, and keep components in sync effortlessly." +title: 'useTheme action' +description: 'Learn how the UseTheme hook from Lapikit simplifies theme management in Svelte: switch dark/light modes, sync global state, and keep components in sync effortlessly.' --- -
- -
+
+ + -
-

Mountain hike

-

A breathtaking trail through alpine meadows and rocky peaks.

-
- 2 hours ago -
- - - - - - -
-
+ + Mountain hike + A breathtaking trail through alpine meadows and rocky peaks. + + 2 hours ago + + + + + + + + -
+ -
-

Forest trail

-

Dense canopy, mossy rocks, and the sound of a distant waterfall.

-
- Yesterday -
- - - - - - -
-
+ + Forest trail + Dense canopy, mossy rocks, and the sound of a distant waterfall. + + Yesterday + + + + + + + +
diff --git a/src/content/examples/components/card/structure.svelte b/src/content/examples/components/card/structure.svelte index e09f5067..408f9d98 100644 --- a/src/content/examples/components/card/structure.svelte +++ b/src/content/examples/components/card/structure.svelte @@ -2,28 +2,27 @@ import { BookOpen } from 'lucide-svelte'; - -
+ + -
+ -

Getting started

+ Getting started -

+ Learn how to install Lapikit and set up the preprocessor in your Svelte project. -

+ -
- 5 min read -
- - {#snippet prepend()} - - {/snippet} - Read - -
-
+ + 5 min read + + + {#snippet prepend()} + + {/snippet} + Read + + diff --git a/src/content/examples/components/card/variants.svelte b/src/content/examples/components/card/variants.svelte index 69972467..adea9d0e 100644 --- a/src/content/examples/components/card/variants.svelte +++ b/src/content/examples/components/card/variants.svelte @@ -1,16 +1,16 @@
-

Filled

-

Accent background with white text.

+ Filled + Accent background with white text. -

Outline

-

Transparent background with accent border.

+ Outline + Transparent background with accent border. -

Text

-

No background or border, accent text only.

+ Text + No background or border, accent text only.
diff --git a/src/content/examples/hooks/areaTheme-toggle.svelte b/src/content/examples/hooks/areaTheme-toggle.svelte new file mode 100644 index 00000000..1aea64f3 --- /dev/null +++ b/src/content/examples/hooks/areaTheme-toggle.svelte @@ -0,0 +1,27 @@ + + +
+ Area A : {areaA.active} + +
+ +
+ Area B : {areaB.active} + +
+ +
+ Area C : {areaC.active} + +
diff --git a/src/content/examples/hooks/globalTheme-toggle.svelte b/src/content/examples/hooks/globalTheme-toggle.svelte new file mode 100644 index 00000000..f31006b4 --- /dev/null +++ b/src/content/examples/hooks/globalTheme-toggle.svelte @@ -0,0 +1,23 @@ + + + useTheme(app.active === 'dark' ? 'light' : 'dark')} + aria-label="Toggle theme" + size="lg" +> + {#if app.active === 'light'} + + + + {:else} + + + + {/if} +