seblify 0.1.4

package/dist/components/framework/layout/alignment/cluster/Cluster.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type ClusterElement = keyof HTMLElementTagNameMap;
+  type ClusterAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  type ClusterGap =
+    | 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+  type ClusterJustify =
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    align?: ClusterAlign;
+    as?: ClusterElement;
+    children?: Snippet;
+    class?: string;
+    gap?: ClusterGap;
+    justify?: ClusterJustify;
+  }>;
+
+  let {
+    align = 'center',
+    as = 'div',
+    children,
+    class: className,
+    gap = 'md',
+    justify = 'start',
+    ...restProps
+  }: Props = $props();
+
+  function cssLength(value: ClusterGap | number | string): string {
+    if (value === 'none') {
+      return '0';
+    }
+
+    if (value === 'xs') {
+      return '0.5rem';
+    }
+
+    if (value === 'xxs') {
+      return '0.25rem';
+    }
+
+    if (value === 'sm') {
+      return '0.75rem';
+    }
+
+    if (value === 'md') {
+      return '1rem';
+    }
+
+    if (value === 'lg') {
+      return '1.5rem';
+    }
+
+    if (value === 'xl') {
+      return '2rem';
+    }
+
+    if (value === 'xxl') {
+      return '3rem';
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function alignItems(value: ClusterAlign): string {
+    if (value === 'start') {
+      return 'flex-start';
+    }
+
+    if (value === 'end') {
+      return 'flex-end';
+    }
+
+    return value;
+  }
+
+  function justifyContent(value: ClusterJustify): string {
+    if (value === 'start') {
+      return 'flex-start';
+    }
+
+    if (value === 'end') {
+      return 'flex-end';
+    }
+
+    if (value === 'between') {
+      return 'space-between';
+    }
+
+    if (value === 'around') {
+      return 'space-around';
+    }
+
+    if (value === 'evenly') {
+      return 'space-evenly';
+    }
+
+    return value;
+  }
+
+  const gapValue = $derived(cssLength(gap));
+  const alignValue = $derived(alignItems(align));
+  const justifyValue = $derived(justifyContent(justify));
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`cluster${className ? ` ${className}` : ''}`}
+  style:--cluster-gap={gapValue}
+  style:--cluster-align={alignValue}
+  style:--cluster-justify={justifyValue}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cluster-gap, 1rem);
+    align-items: var(--cluster-align, center);
+    justify-content: var(--cluster-justify, flex-start);
+    min-width: 0;
+  }
+</style>

package/dist/components/framework/layout/alignment/cluster/Cluster.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type ClusterElement = keyof HTMLElementTagNameMap;
+type ClusterAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type ClusterGap = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+type ClusterJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+declare const Cluster: import("svelte").Component<{
+    [x: string]: unknown;
+    align?: ClusterAlign | undefined;
+    as?: ClusterElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    gap?: ClusterGap | undefined;
+    justify?: ClusterJustify | undefined;
+}, {}, "">;
+type Cluster = ReturnType<typeof Cluster>;
+export default Cluster;

package/dist/components/framework/layout/alignment/grid/Grid.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type GridColumns = 'auto' | number;
+  type GridElement = keyof HTMLElementTagNameMap;
+  type GridGap =
+    | 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    as?: GridElement;
+    children?: Snippet;
+    class?: string;
+    columnGap?: GridGap;
+    columns?: GridColumns;
+    gap?: GridGap;
+    minItemWidth?: number | string;
+    rowGap?: GridGap;
+  }>;
+
+  let {
+    as = 'div',
+    children,
+    class: className,
+    columnGap,
+    columns = 'auto',
+    gap = 'md',
+    minItemWidth = '16rem',
+    rowGap,
+    ...restProps
+  }: Props = $props();
+
+  function cssLength(value: GridGap | number | string): string {
+    if (value === 'none') {
+      return '0';
+    }
+
+    if (value === 'xxs') {
+      return '0.25rem';
+    }
+
+    if (value === 'xs') {
+      return '0.5rem';
+    }
+
+    if (value === 'sm') {
+      return '0.75rem';
+    }
+
+    if (value === 'md') {
+      return '1rem';
+    }
+
+    if (value === 'lg') {
+      return '1.5rem';
+    }
+
+    if (value === 'xl') {
+      return '2rem';
+    }
+
+    if (value === 'xxl') {
+      return '3rem';
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function gridTemplateValue(
+    value: GridColumns,
+    minimumWidth: number | string,
+  ): string {
+    if (value === 'auto') {
+      const minimumValue =
+        typeof minimumWidth === 'number' ? `${minimumWidth}px` : minimumWidth;
+
+      return `repeat(auto-fit, minmax(min(${minimumValue}, 100%), 1fr))`;
+    }
+
+    return `repeat(${value}, minmax(0, 1fr))`;
+  }
+
+  const gapValue = $derived(cssLength(gap));
+  const rowGapValue = $derived(rowGap ? cssLength(rowGap) : gapValue);
+  const columnGapValue = $derived(columnGap ? cssLength(columnGap) : gapValue);
+  const templateValue = $derived(gridTemplateValue(columns, minItemWidth));
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`grid${className ? ` ${className}` : ''}`}
+  style:--grid-column-gap={columnGapValue}
+  style:--grid-row-gap={rowGapValue}
+  style:--grid-template-columns={templateValue}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .grid {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: var(
+      --grid-template-columns,
+      repeat(auto-fit, minmax(min(16rem, 100%), 1fr))
+    );
+    column-gap: var(--grid-column-gap, 1rem);
+    row-gap: var(--grid-row-gap, 1rem);
+  }
+</style>

package/dist/components/framework/layout/alignment/grid/Grid.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type GridColumns = 'auto' | number;
+type GridElement = keyof HTMLElementTagNameMap;
+type GridGap = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+declare const Grid: import("svelte").Component<{
+    [x: string]: unknown;
+    as?: GridElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    columnGap?: GridGap | undefined;
+    columns?: GridColumns | undefined;
+    gap?: GridGap | undefined;
+    minItemWidth?: number | string | undefined;
+    rowGap?: GridGap | undefined;
+}, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/framework/layout/alignment/row/Row.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type RowElement = keyof HTMLElementTagNameMap;
+  type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  type RowGap =
+    | 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+  type RowJustify =
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    align?: RowAlign;
+    as?: RowElement;
+    children?: Snippet;
+    class?: string;
+    gap?: RowGap;
+    justify?: RowJustify;
+  }>;
+
+  let {
+    align = 'center',
+    as = 'div',
+    children,
+    class: className,
+    gap = 'md',
+    justify = 'start',
+    ...restProps
+  }: Props = $props();
+
+  function cssLength(value: RowGap | number | string): string {
+    if (value === 'none') {
+      return '0';
+    }
+
+    if (value === 'xs') {
+      return '0.5rem';
+    }
+
+    if (value === 'xxs') {
+      return '0.25rem';
+    }
+
+    if (value === 'sm') {
+      return '0.75rem';
+    }
+
+    if (value === 'md') {
+      return '1rem';
+    }
+
+    if (value === 'lg') {
+      return '1.5rem';
+    }
+
+    if (value === 'xl') {
+      return '2rem';
+    }
+
+    if (value === 'xxl') {
+      return '3rem';
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function alignItems(value: RowAlign): string {
+    if (value === 'start') {
+      return 'flex-start';
+    }
+
+    if (value === 'end') {
+      return 'flex-end';
+    }
+
+    return value;
+  }
+
+  function justifyContent(value: RowJustify): string {
+    if (value === 'start') {
+      return 'flex-start';
+    }
+
+    if (value === 'end') {
+      return 'flex-end';
+    }
+
+    if (value === 'between') {
+      return 'space-between';
+    }
+
+    if (value === 'around') {
+      return 'space-around';
+    }
+
+    if (value === 'evenly') {
+      return 'space-evenly';
+    }
+
+    return value;
+  }
+
+  const gapValue = $derived(cssLength(gap));
+  const alignValue = $derived(alignItems(align));
+  const justifyValue = $derived(justifyContent(justify));
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`row${className ? ` ${className}` : ''}`}
+  style:--row-gap={gapValue}
+  style:--row-align={alignValue}
+  style:--row-justify={justifyValue}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .row {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--row-gap, 1rem);
+    align-items: var(--row-align, center);
+    justify-content: var(--row-justify, flex-start);
+    min-width: 0;
+  }
+</style>

package/dist/components/framework/layout/alignment/row/Row.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type RowElement = keyof HTMLElementTagNameMap;
+type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type RowGap = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+type RowJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+declare const Row: import("svelte").Component<{
+    [x: string]: unknown;
+    align?: RowAlign | undefined;
+    as?: RowElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    gap?: RowGap | undefined;
+    justify?: RowJustify | undefined;
+}, {}, "">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/components/framework/layout/alignment/stack/Stack.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type StackElement = keyof HTMLElementTagNameMap;
+  type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  type StackGap =
+    | 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+  type StackJustify =
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    align?: StackAlign;
+    as?: StackElement;
+    children?: Snippet;
+    class?: string;
+    gap?: StackGap;
+    justify?: StackJustify;
+  }>;
+
+  let {
+    align = 'stretch',
+    as = 'div',
+    children,
+    class: className,
+    gap = 'md',
+    justify = 'start',
+    ...restProps
+  }: Props = $props();
+
+  function cssLength(value: StackGap | number | string): string {
+    if (value === 'none') {
+      return '0';
+    }
+
+    if (value === 'xs') {
+      return '0.5rem';
+    }
+
+    if (value === 'xxs') {
+      return '0.25rem';
+    }
+
+    if (value === 'sm') {
+      return '0.75rem';
+    }
+
+    if (value === 'md') {
+      return '1rem';
+    }
+
+    if (value === 'lg') {
+      return '1.5rem';
+    }
+
+    if (value === 'xl') {
+      return '2rem';
+    }
+
+    if (value === 'xxl') {
+      return '3rem';
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function alignItems(value: StackAlign): string {
+    if (value === 'start') {
+      return 'flex-start';
+    }
+
+    if (value === 'end') {
+      return 'flex-end';
+    }
+
+    return value;
+  }
+
+  function justifyContent(value: StackJustify): string {
+    if (value === 'start') {
+      return 'flex-start';
+    }
+
+    if (value === 'end') {
+      return 'flex-end';
+    }
+
+    if (value === 'between') {
+      return 'space-between';
+    }
+
+    if (value === 'around') {
+      return 'space-around';
+    }
+
+    if (value === 'evenly') {
+      return 'space-evenly';
+    }
+
+    return value;
+  }
+
+  const gapValue = $derived(cssLength(gap));
+  const alignValue = $derived(alignItems(align));
+  const justifyValue = $derived(justifyContent(justify));
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`stack${className ? ` ${className}` : ''}`}
+  style:--stack-gap={gapValue}
+  style:--stack-align={alignValue}
+  style:--stack-justify={justifyValue}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap, 1rem);
+    align-items: var(--stack-align, stretch);
+    justify-content: var(--stack-justify, flex-start);
+    min-width: 0;
+  }
+</style>

package/dist/components/framework/layout/alignment/stack/Stack.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type StackElement = keyof HTMLElementTagNameMap;
+type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type StackGap = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+declare const Stack: import("svelte").Component<{
+    [x: string]: unknown;
+    align?: StackAlign | undefined;
+    as?: StackElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    gap?: StackGap | undefined;
+    justify?: StackJustify | undefined;
+}, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/components/framework/layout/container/app-shell/AppShell.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type Props = SeblifyProps<{
+    children?: Snippet;
+    header?: Snippet;
+    sidebar?: Snippet;
+    sidebarWidth?: string;
+  }>;
+
+  let { children, header, sidebar, sidebarWidth = '280px' }: Props = $props();
+</script>
+
+<div class="app-shell" style:--app-shell-sidebar-width={sidebarWidth}>
+  {#if sidebar}
+    <div class="app-shell__sidebar">
+      {@render sidebar()}
+    </div>
+  {/if}
+
+  <div class="app-shell__workspace">
+    {#if header}
+      <div class="app-shell__header">
+        {@render header()}
+      </div>
+    {/if}
+
+    <main class="app-shell__content">
+      {@render children?.()}
+    </main>
+  </div>
+</div>
+
+<style>
+  .app-shell {
+    display: grid;
+    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+    min-height: 100vh;
+    background: var(--seblify-color-page, #f4f6f8);
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .app-shell__sidebar,
+  .app-shell__workspace,
+  .app-shell__content {
+    min-width: 0;
+  }
+
+  .app-shell__workspace {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .app-shell__header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  .app-shell__content {
+    padding: var(--app-shell-content-padding, 40px 48px 72px);
+  }
+
+  @media (max-width: 760px) {
+    .app-shell {
+      grid-template-columns: 1fr;
+    }
+
+    .app-shell__sidebar {
+      display: contents;
+    }
+
+    .app-shell__header {
+      position: static;
+    }
+
+    .app-shell__content {
+      padding: var(--app-shell-content-padding-mobile, 28px 22px 56px);
+    }
+  }
+</style>

package/dist/components/framework/layout/container/app-shell/AppShell.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+declare const AppShell: import("svelte").Component<{
+    children?: Snippet | undefined;
+    header?: Snippet | undefined;
+    sidebar?: Snippet | undefined;
+    sidebarWidth?: string | undefined;
+}, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;