@tableslayer/ui 0.1.4 → 0.1.6

package/src/lib/components/Editor/index.ts

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

package/src/lib/components/FogSliders/FogSliders.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { BrushSizeSlider } from '../BrushSizeSlider';
-
-  interface Props {
-    brushSize: number;
-    onBrushSizeChange: (value: number) => void;
-  }
-
-  let { brushSize, onBrushSizeChange }: Props = $props();
-</script>
-
-<div class="fogSliders">
-  <BrushSizeSlider {brushSize} {onBrushSizeChange} min={5} max={20} curve="linear" displayAsPercentage={true} />
-</div>
-
-<style>
-  .fogSliders {
-    position: absolute;
-    top: 50%;
-    right: 1rem;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    z-index: 10;
-    pointer-events: auto;
-    background-color: var(--bg);
-    border: var(--borderThin);
-    border-radius: var(--radius-2);
-    padding: 0.5rem 0rem;
-    align-items: center;
-  }
-</style>

package/src/lib/components/FogSliders/index.ts

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

package/src/lib/components/Hr/Hr.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  let { ...restProps } = $props();
-
-  let hrClasses = $derived(['hr', restProps.class ?? '']);
-</script>
-
-<hr class={hrClasses} {...restProps} />
-
-<style>
-  .hr {
-    height: 1px;
-    width: 100%;
-    background: var(--contrastMedium);
-  }
-</style>

package/src/lib/components/Hr/index.ts

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

package/src/lib/components/Icon/Icon.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-  import type { IconProps } from './types';
-  let { Icon, size = '1rem', color, stroke = 2, ...restProps }: IconProps = $props();
-</script>
-
-<Icon {size} {color} {stroke} {...restProps} style={`min-width: ${size};min-height: ${size}`}></Icon>

package/src/lib/components/Icon/index.ts

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

package/src/lib/components/Icon/types.ts

@@ -1,20 +0,0 @@
-import type { HTMLBaseAttributes } from 'svelte/elements';
-
-export type IconProps = {
-  /**
-   * Any icon from [tabler-icons](https://tabler.io/icons)
-   */
-  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-  Icon: any;
-  /**
-   * The size of the icon.
-   * @default 24
-   */
-  size?: number | string;
-  /**
-   * The color of the icon.
-   * @default 'currentColor'
-   * */
-  color?: string;
-  stroke?: number;
-} & HTMLBaseAttributes;

package/src/lib/components/Input/DualInputSlider.svelte

@@ -1,126 +0,0 @@
-<script lang="ts">
-  import { type DualInputSliderProps } from './types';
-
-  let {
-    valueStart = $bindable(),
-    valueEnd = $bindable(),
-    min,
-    max,
-    step,
-    color = 'var(--fg)',
-    ...restProps
-  }: DualInputSliderProps = $props();
-
-  const sliderClasses = $derived(['dualInputSlider', restProps.class ?? '']);
-
-  function handleInputStart(event: Event) {
-    let newValue = parseFloat((event.target as HTMLInputElement).value);
-    newValue = Math.round(newValue / step) * step; // Fix floating-point precision
-    valueStart = Math.min(newValue, valueEnd - step); // Ensure start does not exceed end
-  }
-
-  function handleInputEnd(event: Event) {
-    let newValue = parseFloat((event.target as HTMLInputElement).value);
-    newValue = Math.round(newValue / step) * step; // Fix floating-point precision
-    valueEnd = Math.max(newValue, valueStart + step); // Ensure end is greater than start
-  }
-
-  // ✅ Corrected track position calculations
-  const leftPos = $derived(() => ((valueStart - min) / (max - min)) * 100);
-  const rightPos = $derived(() => 100 - ((valueEnd - min) / (max - min)) * 100);
-</script>
-
-<div class="dualInputSlider__wrap">
-  <div class="dualInputSlider__bgTrack">
-    <div
-      class="dualInputSlider__activeTrack"
-      style={`left: ${leftPos()}%;
-            right: ${rightPos()}%;
-            background: ${color};`}
-    ></div>
-
-    <input type="range" {min} {max} {step} bind:value={valueStart} oninput={handleInputStart} class={sliderClasses} />
-    <input type="range" {min} {max} {step} bind:value={valueEnd} oninput={handleInputEnd} class={sliderClasses} />
-  </div>
-</div>
-
-<style>
-  .dualInputSlider__wrap {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    height: 2rem;
-  }
-  .dualInputSlider__bgTrack {
-    position: relative;
-    width: 100%;
-    height: 4px;
-    display: flex;
-    align-items: center;
-    background: var(--inputBorderColor);
-  }
-
-  .dualInputSlider {
-    -webkit-appearance: none;
-    appearance: none;
-    position: absolute;
-    appearance: none;
-    position: absolute;
-    width: 100%;
-    height: 3px;
-    pointer-events: none;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 3;
-  }
-
-  .dualInputSlider::-webkit-slider-thumb {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    border: 2px solid white;
-    background-color: var(--inputBorderColor);
-    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
-    pointer-events: all;
-    cursor: pointer;
-  }
-  .dualInputSlider::-moz-range-thumb {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 50%;
-    border: 2px solid white;
-    background-color: var(--inputBorderColor);
-    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
-    pointer-events: all;
-    cursor: pointer;
-  }
-
-  .dualInputSlider__activeTrack {
-    position: absolute;
-    z-index: 1;
-    height: 3px;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    z-index: 2;
-  }
-
-  @media (pointer: coarse) {
-    .dualInputSlider__activeTrack {
-      height: 1rem;
-      border-radius: var(--radius-2);
-    }
-    .dualInputSlider__bgTrack {
-      height: 1rem;
-      border-radius: var(--radius-2);
-    }
-    .dualInputSlider::-webkit-slider-thumb {
-      width: 1rem;
-      height: 1rem;
-    }
-    .dualInputSlider::-moz-range-thumb {
-      width: 1rem;
-      height: 1rem;
-    }
-  }
-</style>

package/src/lib/components/Input/FileInput.svelte

@@ -1,176 +0,0 @@
-<script lang="ts">
-  import type { FileInputProps } from './types';
-  import { onDestroy, createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher<{
-    fileSelect: File;
-  }>();
-
-  let {
-    value = $bindable(),
-    files = $bindable(),
-    variant = 'default',
-    accept = 'image/png, image/jpeg, image/webp, image/gif',
-    showPreviews = true,
-    ...restProps
-  }: FileInputProps = $props();
-
-  let inputClasses = $derived(['fileInput', variant && `fileInput--${variant}`, restProps.class ?? '']);
-
-  // Default label text based on accept prop
-  let labelText = $derived(() => {
-    if (accept.includes('image/')) {
-      return 'Select an image';
-    } else if (accept.includes('.json')) {
-      return 'Select a file';
-    } else {
-      return 'Select a file';
-    }
-  });
-
-  // Array to keep track of generated object URLs for cleanup
-  let generatedUrls: string[] = [];
-
-  // Function to clean up generated URLs
-  const previousUrlsCleanup = () => {
-    for (const url of generatedUrls) {
-      URL.revokeObjectURL(url);
-    }
-    generatedUrls = [];
-  };
-
-  // Function to check if file is an image
-  const isImageFile = (file: File): boolean => {
-    return file.type.startsWith('image/');
-  };
-
-  // Create a derived value for preview URLs based on `files`
-  let previewUrls = $derived.by(() => {
-    if (files && files.length > 0 && showPreviews) {
-      const urls = [];
-      for (const file of files) {
-        // Only create previews for image files
-        if (file && isImageFile(file)) {
-          const objectUrl = URL.createObjectURL(file);
-          urls.push(objectUrl);
-          generatedUrls.push(objectUrl); // Keep track of generated URLs for cleanup
-        }
-      }
-      return urls;
-    }
-    return [];
-  });
-
-  // Handle file selection
-  function handleFileChange() {
-    if (files && files.length > 0) {
-      // Dispatch the first file
-      dispatch('fileSelect', files[0]);
-    }
-  }
-
-  // Clean up the object URLs to prevent memory leaks when the component is destroyed
-  onDestroy(() => {
-    previousUrlsCleanup();
-  });
-</script>
-
-<div class={inputClasses}>
-  {#if variant === 'dropzone'}
-    <label class="fileInput__dropZoneLabel" for={restProps.id}><div>{labelText}</div></label>
-  {/if}
-  <!-- File input with configurable accept attribute -->
-  <input bind:files type="file" class="fileInput__input" {accept} onchange={handleFileChange} {...restProps} />
-
-  <!-- Display previews for image files if showPreviews is true -->
-  {#if showPreviews}
-    {#each previewUrls as previewUrl}
-      <img src={previewUrl} alt="Preview" class="fileInput__preview" />
-    {/each}
-  {/if}
-</div>
-
-<style>
-  .fileInput {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  .fileInput__input::file-selector-button {
-    background: var(--inputBg);
-    padding: 0 var(--size-2);
-    color: var(--fg);
-    border: var(--borderThin);
-    border-radius: var(--radius-2);
-    padding: 0.25rem 0.75rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .fileInput__input::file-selector-button:hover {
-    background: var(--inputFocusBg);
-  }
-  [data-fs-error] {
-    border-color: var(--fgDanger);
-  }
-  .fileInput__preview {
-    max-width: 8rem;
-    max-height: 8rem;
-    margin-top: 1rem;
-    margin-right: 0.5rem;
-  }
-  .fileInput--dropzone {
-    width: 100%;
-    max-width: 100%;
-    cursor: pointer;
-    position: relative;
-    aspect-ratio: 16 / 9;
-    overflow: hidden;
-  }
-
-  .fileInput--dropzone .fileInput__preview {
-    margin: 0;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-  }
-  .fileInput--dropzone input {
-    visibility: hidden;
-    display: none;
-  }
-  .fileInput--dropzone .fileInput__dropZoneLabel {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    top: 0;
-    left: 0;
-  }
-  .fileInput--dropzone .fileInput__dropZoneLabel div {
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 0.25rem 0.5rem;
-    border-radius: var(--radius-1);
-    font-size: 0.85rem;
-  }
-  .fileInput--transparent {
-    .fileInput__input {
-      opacity: 0;
-      border: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .fileInput__preview {
-      display: none;
-    }
-  }
-</style>

package/src/lib/components/Input/FormControl.svelte

@@ -1,150 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { Label } from './';
-  import type { HTMLBaseAttributes } from 'svelte/elements';
-  import { IconX } from '@tabler/icons-svelte';
-  import { Icon } from '../';
-  import { type $ZodIssue } from 'zod/v4/core';
-  import { v4 as uuidv4 } from 'uuid';
-  type Props = {
-    /**
-     * The input component that will be rendered
-     */
-    input: Snippet<
-      [
-        {
-          inputProps: {
-            id: string;
-            name: string;
-            'aria-describedby'?: string;
-            'aria-invalid'?: boolean;
-          };
-        }
-      ]
-    >;
-    /**
-     * The label for the input
-     */
-    label?: string;
-    /**
-     * A snippet that will be rendered at the start of the input
-     */
-    start?: Snippet;
-    /**
-     * A snippet that will be rendered at the end of the input
-     */
-    end?: Snippet;
-    /**
-     * The name needs to match a "path" in our zod schema
-     */
-    name: string;
-    /**
-     * This shape matches what returns from zod / mutation factories
-     */
-    errors?: $ZodIssue[];
-  } & HTMLBaseAttributes;
-
-  let { input, label, start, name, errors, end, ...restProps }: Props = $props();
-  let error = $derived(errors?.find((error) => error.path.includes(name)));
-
-  const id = `control-${uuidv4()}`;
-
-  let inputProps = $derived.by(() => {
-    return {
-      id,
-      name,
-      'aria-describedby': error && `error-${id}`,
-      'aria-invalid': !!error
-    };
-  });
-
-  let inputWrapperClasses = $derived([
-    'control__inputWrapper',
-    start && 'control__inputWrapper--start',
-    end && 'control__inputWrapper--end'
-  ]);
-  const controlClasses = $derived(['control', error && 'control--isError', restProps.class ?? '']);
-</script>
-
-<div class={controlClasses}>
-  <Label class="control__label" for={id}>{label}</Label>
-  <div class={inputWrapperClasses}>
-    {#if start}
-      <div class="control__start">{@render start()}</div>
-    {/if}
-    {@render input({ inputProps })}
-    {#if end}
-      <div class="control__end">{@render end()}</div>
-    {/if}
-  </div>
-  {#if error}
-    <div class="control__error" id={`error-${id}`}>
-      <Icon Icon={IconX} class="control__errorIcon" />
-      {error.message}
-    </div>
-  {/if}
-</div>
-
-<style>
-  /* global required for children */
-  :global {
-    .control__inputWrapper--start input.input {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    .control__inputWrapper--end input.input {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    .control__erorIcon {
-      margin-top: 1px;
-    }
-  }
-  .control {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-1);
-    width: 100%;
-  }
-  .control__inputWrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-  .control__start,
-  .control__end {
-    display: flex;
-    align-items: center;
-    height: var(--size-8);
-    border: var(--borderThin);
-    border-color: var(--inputBorderColor);
-    padding: 0 var(--size-3);
-    background: var(--contrastLow);
-    color: var(--fgMuted);
-  }
-  .control__start {
-    border-top-left-radius: var(--radius-2);
-    border-bottom-left-radius: var(--radius-2);
-    border-right: none;
-  }
-  .control__end {
-    border-top-right-radius: var(--radius-2);
-    border-bottom-right-radius: var(--radius-2);
-    border-left: none;
-  }
-  .control__error {
-    display: inline-flex;
-    gap: var(--size-1);
-    color: var(--fgDanger);
-    font-size: var(--font-size-1);
-    font-weight: var(--font-weight-6);
-    margin-top: var(--size-1);
-    border-radius: var(--size-2);
-    min-height: var(--size-7);
-    align-items: center;
-  }
-
-  :global(.control .control__label) {
-    display: block;
-  }
-</style>

package/src/lib/components/Input/FormError.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { IconX } from '@tabler/icons-svelte';
-  import { Icon } from '../';
-  import { type $ZodIssue } from 'zod/v4/core';
-
-  type FormMutationResponse = {
-    success: boolean;
-    status: number;
-    message: string;
-    errors?: $ZodIssue[];
-  };
-  let { error }: { error?: FormMutationResponse } = $props();
-</script>
-
-{#if error}
-  <div class="formError" data-testid="formError">
-    <Icon Icon={IconX} class="formErrorIcon" />
-    <p>{error.message}</p>
-  </div>
-{/if}
-
-<style>
-  :global(.formErrorIcon) {
-    margin-top: 2px;
-  }
-  .formError {
-    display: flex;
-    gap: var(--size-1);
-    color: var(--fgDanger);
-    font-size: var(--font-size-1);
-    font-weight: var(--font-weight-6);
-    margin-top: 1rem;
-    border-radius: var(--size-2);
-    min-height: var(--size-7);
-    align-items: start;
-  }
-</style>

package/src/lib/components/Input/Input.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import type { InputProps } from './types';
-  let {
-    value = $bindable(),
-    element = $bindable(),
-    variant = 'default',
-    hideAutocomplete,
-    ...restProps
-  }: InputProps = $props();
-
-  const inputClasses = $derived(['input', variant && `input--${variant}`, restProps.class ?? '']);
-  let autoCompleteOffAttrs = hideAutocomplete
-    ? {
-        autocomplete: 'off' as const,
-        'data-1p-ignore': 'true' as const,
-        'data-lpignore': 'true' as const
-      }
-    : {};
-</script>
-
-<input bind:this={element} bind:value {...restProps} {...autoCompleteOffAttrs} class={inputClasses} />
-
-<style>
-  .input {
-    height: var(--size-8);
-    font-family: var(--font-sans);
-    border: var(--borderThin);
-    border-color: var(--inputBorderColor);
-    border-radius: var(--radius-2);
-    padding: 0 var(--size-3);
-    background: var(--inputBg);
-    width: 100%;
-    &:focus-visible {
-      outline: none;
-      border-color: var(--fg);
-      background: var(--inputFocusBg);
-    }
-  }
-  .input::placeholder {
-    color: var(--fgMuted);
-  }
-  .input--transparent {
-    border-color: transparent;
-    background: transparent;
-    &:hover {
-      border-color: var(--inputBorderColor);
-    }
-  }
-  .input[type='text'] {
-    cursor: text;
-  }
-  [data-fs-error],
-  [aria-invalid='true'] {
-    border-color: var(--fgDanger);
-  }
-</style>