@tableslayer/ui 0.0.1

package/dist/components/CardFan/CardFan.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import type { CardFanProps } from './types';
+  let { images, height = '120px', ...restProps }: CardFanProps = $props();
+  const cardFanClasses = $derived(['cardFan', `cardFan--count-${images.length}`, restProps.class ?? '']);
+</script>
+
+<div {...restProps} class={cardFanClasses} style="--cardFanHeight: {height}">
+  {#each images as image}
+    <div class="cardFan__card">
+      <div class="cardFan__cardImage" style="background-image: url({image});"></div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .cardFan {
+    position: relative;
+    height: calc(var(--cardFanHeight) * 1.3);
+    width: calc(var(--cardFanHeight) * 2);
+  }
+
+  .cardFan__card {
+    background: var(--bg);
+    height: var(--cardFanHeight);
+    width: calc(var(--cardFanHeight) * 0.6818);
+    border-radius: 0.25rem;
+    position: absolute;
+    box-shadow:
+      0 0 0.5rem rgba(0, 0, 0, 0.2),
+      1px 1px 32px 4px rgba(0, 0, 0, 0.76) inset;
+    left: 50%;
+    top: 50%;
+    transform-origin: center 120%;
+    border: var(--borderThick);
+    border-color: var(--fg);
+    transition: transform 0.2s var(--ease-in-2);
+    overflow: hidden;
+  }
+
+  .cardFan__cardImage {
+    position: absolute;
+    width: var(--cardFanHeight);
+    height: calc(var(--cardFanHeight) * 0.6818);
+    background-size: cover;
+    background-position: center center;
+    transform: rotate(-90deg);
+    transform-origin: center center;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  .cardFan__card:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--radius-2);
+    border: solid var(--bg) 0.3rem;
+    z-index: 1;
+  }
+
+  .cardFan--count-1 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  .cardFan--count-2 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-10deg);
+  }
+  .cardFan--count-2 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(10deg);
+  }
+
+  .cardFan--count-3 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-15deg);
+  }
+  .cardFan--count-3 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  .cardFan--count-3 .cardFan__card:nth-child(3) {
+    transform: translate(-50%, -50%) rotate(15deg);
+  }
+
+  .cardFan--count-4 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-20deg);
+  }
+  .cardFan--count-4 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(-7deg);
+  }
+  .cardFan--count-4 .cardFan__card:nth-child(3) {
+    transform: translate(-50%, -50%) rotate(7deg);
+  }
+  .cardFan--count-4 .cardFan__card:nth-child(4) {
+    transform: translate(-50%, -50%) rotate(20deg);
+  }
+
+  .cardFan--count-5 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-25deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(-12.5deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(3) {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(4) {
+    transform: translate(-50%, -50%) rotate(12.5deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(5) {
+    transform: translate(-50%, -50%) rotate(25deg);
+  }
+
+  :global {
+    *:hover > .cardFan--count-1 .cardFan__card:nth-child(1) {
+      transform: translate(-50%, -50%) rotate(0deg) !important;
+    }
+
+    *:hover > .cardFan--count-2 .cardFan__card:nth-child(1) {
+      transform: translate(-120%, -42%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-2 .cardFan__card:nth-child(2) {
+      transform: translate(20%, -42%) rotate(10deg) !important;
+    }
+
+    *:hover > .cardFan--count-3 .cardFan__card:nth-child(1) {
+      transform: translate(-130%, -45%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-3 .cardFan__card:nth-child(2) {
+      transform: translate(-50%, -50%) rotate(0deg) !important;
+    }
+    *:hover > .cardFan--count-3 .cardFan__card:nth-child(3) {
+      transform: translate(30%, -45%) rotate(10deg) !important;
+    }
+
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(1) {
+      transform: translate(-140%, -42%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(2) {
+      transform: translate(-70%, -46%) rotate(-5deg) !important;
+    }
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(3) {
+      transform: translate(-10%, -46%) rotate(5deg) !important;
+    }
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(4) {
+      transform: translate(60%, -42%) rotate(10deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(1) {
+      transform: translate(-150%, -42%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(2) {
+      transform: translate(-100%, -46%) rotate(-5deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(3) {
+      transform: translate(-50%, -50%) rotate(0deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(4) {
+      transform: translate(0%, -46%) rotate(5deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(5) {
+      transform: translate(50%, -42%) rotate(10deg) !important;
+    }
+  }
+</style>

package/dist/components/CardFan/CardFan.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardFanProps } from './types';
+declare const CardFan: import("svelte").Component<CardFanProps, {}, "">;
+type CardFan = ReturnType<typeof CardFan>;
+export default CardFan;

package/dist/components/CardFan/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CardFan } from './CardFan.svelte';
+export * from './types';

package/dist/components/CardFan/index.js

@@ -0,0 +1,2 @@
+export { default as CardFan } from './CardFan.svelte';
+export * from './types';

package/dist/components/CardFan/types.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type CardFanProps = {
+    images: string[];
+    height?: string;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/CardFan/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/CodeBlock/Code.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { CodeBlock } from './';
+  import type { CodeProps } from './';
+  let { code, lang = 'svelte', ...restProps }: CodeProps = $props();
+</script>
+
+<CodeBlock {code} {lang} variant="inline" {...restProps} />

package/dist/components/CodeBlock/Code.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CodeProps } from './';
+declare const Code: import("svelte").Component<CodeProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { CodeBlockProps } from './types';
+  import { onMount } from 'svelte';
+  import { codeToHtml } from 'shiki';
+
+  let { code, lang = 'svelte', variant = 'default' }: CodeBlockProps = $props();
+
+  let highlightedCode = $state('');
+
+  onMount(async () => {
+    highlightedCode = await codeToHtml(code, {
+      lang: lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
+      defaultColor: false // Forces shiki to use light / dark css vars which we need for nesting
+    });
+  });
+
+  let codeBlockClasses = $derived(['codeBlock', `codeBlock--${variant}`]);
+</script>
+
+<span class={codeBlockClasses}>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html highlightedCode}
+</span>
+
+<style>
+  :global(.shiki) {
+    font-family: var(--font-mono);
+    padding: var(--size-4);
+    margin: 0;
+  }
+  :global(.codeBlock--inline .shiki) {
+    font-family: var(--font-mono);
+    padding: 0 var(--size-1);
+    margin: 0;
+  }
+  .codeBlock {
+    font-family: var(--font-mono);
+    max-width: 100%;
+    overflow-x: auto;
+    border: var(--borderThin);
+    border-color: var(--contrastEmpty);
+    display: block;
+  }
+  .codeBlock--inline {
+    display: inline-block;
+    width: auto;
+    overflow-x: unset;
+  }
+  :global {
+    /* Default: Inherit colors from inline styles (Shiki sets both light & dark variables inline) */
+    .shiki,
+    .shiki span {
+      color: var(--shiki-light) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-light-font-style) !important;
+      font-weight: var(--shiki-light-font-weight) !important;
+      text-decoration: var(--shiki-light-text-decoration) !important;
+    }
+
+    /* In light mode, just inherit (Shiki's inline styles apply the light theme by default) */
+    .light .shiki,
+    .light .shiki span {
+      color: var(--shiki-light) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-light-font-style) !important;
+      font-weight: var(--shiki-light-font-weight) !important;
+      text-decoration: var(--shiki-light-text-decoration) !important;
+    }
+
+    /* In dark mode, override with the Shiki dark theme variables */
+    .dark .shiki,
+    .dark .shiki span {
+      color: var(--shiki-dark) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-dark-font-style) !important;
+      font-weight: var(--shiki-dark-font-weight) !important;
+      text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+    .dark .light .shiki,
+    .dark .light .shiki span {
+      color: var(--shiki-light) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-light-font-style) !important;
+      font-weight: var(--shiki-light-font-weight) !important;
+      text-decoration: var(--shiki-light-text-decoration) !important;
+    }
+
+    /* Handle nested dark inside light: force dark mode variables */
+    .light .dark .shiki,
+    .light .dark .shiki span {
+      color: var(--shiki-dark) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-dark-font-style) !important;
+      font-weight: var(--shiki-dark-font-weight) !important;
+      text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+  }
+</style>

package/dist/components/CodeBlock/CodeBlock.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CodeBlockProps } from './types';
+declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/CodeBlock/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Code } from './Code.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export * from './types';

package/dist/components/CodeBlock/index.js

@@ -0,0 +1,3 @@
+export { default as Code } from './Code.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export * from './types';

package/dist/components/CodeBlock/types.d.ts

@@ -0,0 +1,9 @@
+export type CodeBlockProps = {
+    code: string;
+    lang?: string;
+    variant?: 'default' | 'inline';
+};
+export type CodeProps = {
+    code: string;
+    lang?: string;
+};

package/dist/components/CodeBlock/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ColorMode/ColorMode.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { ColorModeProps } from './types';
+  let { children, mode, as = 'div', ...restProps }: ColorModeProps = $props();
+</script>
+
+<svelte:element this={as} class={mode} {...restProps}>
+  {@render children()}
+</svelte:element>

package/dist/components/ColorMode/ColorMode.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ColorModeProps } from './types';
+declare const ColorMode: import("svelte").Component<ColorModeProps, {}, "">;
+type ColorMode = ReturnType<typeof ColorMode>;
+export default ColorMode;

package/dist/components/ColorMode/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ColorMode } from './ColorMode.svelte';
+export type { ColorModeProps } from './types';

package/dist/components/ColorMode/index.js

@@ -0,0 +1 @@
+export { default as ColorMode } from './ColorMode.svelte';

package/dist/components/ColorMode/types.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLBaseAttributes, SvelteHTMLElements } from 'svelte/elements';
+export type ColorModeCompareProps = {
+    children: Snippet;
+};
+export type ColorModeProps = {
+    children: Snippet;
+    mode: 'light' | 'dark';
+    as?: keyof SvelteHTMLElements;
+} & HTMLBaseAttributes;

package/dist/components/ColorMode/types.js

@@ -0,0 +1 @@
+export {};