@cloudvoyant/helix-svelte 0.13.0 → 0.14.0

package/dist/Page.svelte

@@ -0,0 +1,27 @@
+<!-- libs/helix-svelte/src/Page.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helix page classes, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageVariants, cn } from '@cloudvoyant/helix';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    variant?: 'default' | 'landing';
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    class: className = '',
+    variant = 'default',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const rootClasses = $derived(cn(pageVariants({ variant }), className));
+</script>
+
+<Ark as="div" data-slot="page" class={rootClasses} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/Page.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    variant?: 'default' | 'landing';
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Page: import("svelte").Component<Props, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/PageContent.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helix-svelte/src/PageContent.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helix page classes, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageContentBase, cn } from '@cloudvoyant/helix';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(pageContentBase, className));
+</script>
+
+<Ark as="main" data-slot="page-content" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/PageContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const PageContent: import("svelte").Component<Props, {}, "">;
+type PageContent = ReturnType<typeof PageContent>;
+export default PageContent;

package/dist/PageFooter.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helix-svelte/src/PageFooter.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helix page classes, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageFooterBase, cn } from '@cloudvoyant/helix';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(pageFooterBase, className));
+</script>
+
+<Ark as="footer" data-slot="page-footer" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/PageFooter.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const PageFooter: import("svelte").Component<Props, {}, "">;
+type PageFooter = ReturnType<typeof PageFooter>;
+export default PageFooter;

package/dist/PageGutter.svelte

@@ -0,0 +1,37 @@
+<!-- libs/helix-svelte/src/PageGutter.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helix page classes, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageGutterAreaBase, pageGutterVariants, pageGutterContentVariants, cn } from '@cloudvoyant/helix';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    contentClass?: string;
+    side?: 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let {
+    class: className = '',
+    contentClass = '',
+    side = 'left',
+    align = 'start',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const areaClasses = $derived(cn(pageGutterAreaBase, side === 'right' && '[grid-area:right]'));
+  const gutterClasses = $derived(cn(pageGutterVariants({ side }), className));
+  const contentClasses = $derived(cn(pageGutterContentVariants({ align }), contentClass));
+</script>
+
+<div data-slot="page-gutter-area" class={areaClasses}>
+  <Ark as="div" data-slot="page-gutter" class={gutterClasses} {...rest}>
+    <div data-slot="page-gutter-content" class={contentClasses}>
+      {@render children?.()}
+    </div>
+  </Ark>
+</div>

package/dist/PageGutter.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    contentClass?: string;
+    side?: 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const PageGutter: import("svelte").Component<Props, {}, "">;
+type PageGutter = ReturnType<typeof PageGutter>;
+export default PageGutter;

package/dist/PageSection.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helix-svelte/src/PageSection.svelte -->
+<!-- No upstream component; composed from @cloudvoyant/helix page classes, mirrored from @cloudvoyant/helix-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { pageSectionBase, cn } from '@cloudvoyant/helix';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(pageSectionBase, className));
+</script>
+
+<Ark as="section" data-slot="page-section" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/PageSection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const PageSection: import("svelte").Component<Props, {}, "">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

package/dist/Scroll.svelte

@@ -22,6 +22,8 @@
 
   type Props = ScrollAreaRootProps & {
     orientation?: 'vertical' | 'horizontal' | 'both';
+    /** `default` shows the styled scrollbars; `hidden` keeps scrolling without rendering any scrollbar. */
+    variant?: 'default' | 'hidden';
     contentClass?: string;
     thumbClass?: string;
     /** Overrides the viewport class. The default is `flex h-full w-full flex-col`;
@@ -32,6 +34,7 @@
   let {
     class: className = '',
     orientation = 'vertical',
+    variant = 'default',
     contentClass = '',
     thumbClass = '',
     viewportClass = '',
@@ -51,17 +54,19 @@
       {@render children?.()}
     </ScrollAreaContent>
   </ScrollAreaViewport>
-  {#if orientation === 'vertical' || orientation === 'both'}
-    <ScrollAreaScrollbar orientation="vertical" class={scrollScrollbarBase}>
-      <ScrollAreaThumb class={thumbClasses} />
-    </ScrollAreaScrollbar>
-  {/if}
-  {#if orientation === 'horizontal' || orientation === 'both'}
-    <ScrollAreaScrollbar orientation="horizontal" class={scrollScrollbarBase}>
-      <ScrollAreaThumb class={thumbClasses} />
-    </ScrollAreaScrollbar>
-  {/if}
-  {#if orientation === 'both'}
-    <ScrollAreaCorner class={scrollCornerBase} />
+  {#if variant !== 'hidden'}
+    {#if orientation === 'vertical' || orientation === 'both'}
+      <ScrollAreaScrollbar orientation="vertical" class={scrollScrollbarBase}>
+        <ScrollAreaThumb class={thumbClasses} />
+      </ScrollAreaScrollbar>
+    {/if}
+    {#if orientation === 'horizontal' || orientation === 'both'}
+      <ScrollAreaScrollbar orientation="horizontal" class={scrollScrollbarBase}>
+        <ScrollAreaThumb class={thumbClasses} />
+      </ScrollAreaScrollbar>
+    {/if}
+    {#if orientation === 'both'}
+      <ScrollAreaCorner class={scrollCornerBase} />
+    {/if}
   {/if}
 </ScrollAreaRoot>

package/dist/Scroll.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { ScrollAreaRootProps } from '@ark-ui/svelte/scroll-area';
 type Props = ScrollAreaRootProps & {
     orientation?: 'vertical' | 'horizontal' | 'both';
+    /** `default` shows the styled scrollbars; `hidden` keeps scrolling without rendering any scrollbar. */
+    variant?: 'default' | 'hidden';
     contentClass?: string;
     thumbClass?: string;
     /** Overrides the viewport class. The default is `flex h-full w-full flex-col`;

package/dist/index.d.ts

@@ -12,6 +12,11 @@ export { default as Stack } from './Stack.svelte';
 export { default as HStack } from './HStack.svelte';
 export { default as VStack } from './VStack.svelte';
 export { default as Scroll } from './Scroll.svelte';
+export { default as Page } from './Page.svelte';
+export { default as PageGutter } from './PageGutter.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as PageFooter } from './PageFooter.svelte';
+export { default as PageSection } from './PageSection.svelte';
 export { default as Splitter } from './Splitter.svelte';
 export { default as SplitterPanel } from './SplitterPanel.svelte';
 export { default as SplitterResizeTrigger } from './SplitterResizeTrigger.svelte';

package/dist/index.js

@@ -13,6 +13,11 @@ export { default as Stack } from './Stack.svelte';
 export { default as HStack } from './HStack.svelte';
 export { default as VStack } from './VStack.svelte';
 export { default as Scroll } from './Scroll.svelte';
+export { default as Page } from './Page.svelte';
+export { default as PageGutter } from './PageGutter.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as PageFooter } from './PageFooter.svelte';
+export { default as PageSection } from './PageSection.svelte';
 export { default as Splitter } from './Splitter.svelte';
 export { default as SplitterPanel } from './SplitterPanel.svelte';
 export { default as SplitterResizeTrigger } from './SplitterResizeTrigger.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helix-svelte",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "helix Svelte UI components",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ark-ui/svelte": "^5.23.1",
-    "@cloudvoyant/helix": "0.13.0"
+    "@cloudvoyant/helix": "0.14.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",