@tableslayer/ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { InputCheckboxProps } from './types';
+  import { v4 as uuidv4 } from 'uuid';
+  let {
+    checked = $bindable(),
+    element = $bindable(),
+    variant = 'default',
+    label,
+    hideAutocomplete,
+    ...restProps
+  }: InputCheckboxProps = $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
+      }
+    : {};
+
+  const id = `checkbox-${uuidv4()}`;
+</script>
+
+<label for={id}>
+  <input
+    type="checkbox"
+    {id}
+    bind:this={element}
+    bind:checked
+    {...restProps}
+    {...autoCompleteOffAttrs}
+    class={inputClasses}
+  />
+  {#if typeof label === 'string'}
+    {label}
+  {:else}
+    {@render label()}
+  {/if}
+</label>
+
+<style>
+  label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 0.5rem;
+  }
+  input[type='checkbox'] {
+    /* Add if not using autoprefixer */
+    -webkit-appearance: none;
+    /* Remove most all native input styles */
+    appearance: none;
+    /* For iOS < 15 */
+    background-color: var(--inputBg);
+    /* Not removed via appearance */
+    margin: 0;
+
+    font: inherit;
+    color: currentColor;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: var(--borderThin);
+    border-radius: var(--radius-2);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+  }
+  input[type='checkbox']::before {
+    content: '';
+    width: 0.875rem;
+    height: 0.875rem;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    opacity: 0;
+    transform-origin: bottom left;
+    transition: 100ms opacity ease-in;
+    box-shadow: inset 1em 1em var(--fgPrimary);
+    /* Windows High Contrast Mode */
+    background-color: CanvasText;
+  }
+  input[type='checkbox']:checked::before {
+    opacity: 1;
+  }
+  input[type='checkbox']:disabled {
+    color: var(--fgMuted);
+    cursor: not-allowed;
+  }
+  .input--transparent {
+    border-color: transparent;
+    background: transparent;
+    &:hover {
+      border-color: var(--inputBorderColor);
+    }
+  }
+  [data-fs-error],
+  [aria-invalid='true'] {
+    border-color: var(--fgDanger);
+  }
+</style>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { InputSliderProps } from './types';
+  import chroma from 'chroma-js';
+  let { value = $bindable(), hex = '#555', variant = 'default', ...restProps }: InputSliderProps = $props();
+
+  const sliderClasses = $derived(['inputSlider', variant && `inputSlider--${variant}`, restProps.class ?? '']);
+
+  const getLinearGradient = $derived(() => {
+    if (!hex) return 'var(--fgMuted)';
+    const colorStart = chroma(hex).alpha(0).css('rgb');
+    const colorEnd = chroma(hex).css('rgb');
+    return `linear-gradient(to right, ${colorStart}, ${colorEnd})`;
+  });
+
+  const background = $derived(() => {
+    if (variant === 'opacity') {
+      return getLinearGradient();
+    } else {
+      if (!hex) return 'var(--fgMuted)';
+      return hex;
+    }
+  });
+</script>
+
+<div class="inputSliderWrapper">
+  <input
+    type="range"
+    min="0"
+    max="100"
+    step="1"
+    bind:value
+    class={sliderClasses}
+    style={`background: ${background()}`}
+    {...restProps}
+  />
+</div>
+
+<style>
+  .inputSliderWrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 2rem;
+  }
+  .inputSlider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 3px;
+    cursor: pointer;
+  }
+
+  .inputSlider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 2px solid white;
+    background-color: transparent;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
+  }
+
+  .inputSlider::-moz-range-thumb {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 2px solid white;
+    background-color: transparent;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
+  }
+  @media (pointer: coarse) {
+    .inputSlider {
+      height: 1rem;
+      border-radius: var(--radius-2);
+    }
+    .inputSlider::-webkit-slider-thumb {
+      width: 1rem;
+      height: 1rem;
+    }
+    .inputSlider::-moz-range-thumb {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { LabelProps } from './types';
+  let { children, props, ...restProps }: LabelProps = $props();
+
+  let labelClasses = $derived(['label', restProps.class ?? '']);
+</script>
+
+<label {...props} {...restProps} class={labelClasses}>
+  {@render children()}
+</label>
+
+<style>
+  .label {
+    display: block;
+    font-weight: var(--font-weight-6);
+    font-size: var(--font-size-1);
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+export { default as DualInputSlider } from './DualInputSlider.svelte';
+export { default as FileInput } from './FileInput.svelte';
+export { default as FormControl } from './FormControl.svelte';
+export { default as FormError } from './FormError.svelte';
+export { default as Input } from './Input.svelte';
+export { default as InputCheckbox } from './InputCheckbox.svelte';
+export { default as InputSlider } from './InputSlider.svelte';
+export { default as Label } from './Label.svelte';
+export * from './types';

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes, HTMLLabelAttributes } from 'svelte/elements';
+
+export type InputProps = {
+  isDisabled?: boolean;
+  variant?: 'transparent' | 'default' | 'dropzone' | 'button';
+  hideAutocomplete?: boolean;
+  element?: HTMLInputElement;
+} & HTMLInputAttributes;
+
+export type InputCheckboxProps = {
+  checked: boolean;
+  label: Snippet | string;
+} & InputProps;
+
+export type FileInputProps = {
+  files: FileList | null;
+  accept?: string;
+  showPreviews?: boolean;
+} & InputProps;
+
+export type LabelProps = {
+  children: Snippet;
+  props?: Record<string, unknown>;
+} & HTMLLabelAttributes;
+
+export type InputSliderProps = {
+  variant?: 'default' | 'opacity';
+  hex?: string;
+} & HTMLInputAttributes;
+
+export type DualInputSliderProps = {
+  valueStart: number;
+  valueEnd: number;
+  color?: string;
+  min: number;
+  max: number;
+  step: number;
+} & HTMLInputAttributes;

package/src/lib/components/Link/Link.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { LinkProps } from './types';
+  let { children, as = 'a', color = 'primary', ...restProps }: LinkProps = $props();
+
+  let linkClasses = $derived(['link', `link--${color}`, restProps.class ?? '']);
+</script>
+
+<svelte:element this={as} {...restProps} class={linkClasses}>
+  {@render children()}
+</svelte:element>
+
+<style>
+  :global(.light) {
+    color-scheme: light;
+    --link-color: var(--primary-600);
+  }
+  :global(.dark) {
+    color-scheme: dark;
+    --link-color: var(--primary-500);
+  }
+  .link {
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: var(--font-weight-6);
+  }
+  .link--primary {
+    color: var(--fgPrimary);
+  }
+  .link--fg {
+    color: var(--fg);
+  }
+  .link--bg {
+    color: var(--bg);
+  }
+  .link--muted {
+    color: var(--fgMuted);
+  }
+  .link:hover {
+    text-decoration: underline;
+  }
+</style>

package/src/lib/components/Link/LinkBox.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { LinkBoxProps } from './types';
+  let { as = 'div', children }: LinkBoxProps = $props();
+</script>
+
+<svelte:element this={as} class="linkBox">
+  {@render children()}
+</svelte:element>
+
+<style>
+  .linkBox {
+    position: relative;
+  }
+  :global {
+    .linkBox a:not(.linkOverlay) {
+      position: relative;
+      z-index: 1;
+    }
+  }
+</style>

package/src/lib/components/Link/LinkOverlay.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { LinkOverlayProps } from './types';
+  let { href, children }: LinkOverlayProps = $props();
+</script>
+
+<a {href} class="linkOverlay">
+  {@render children()}
+</a>
+
+<style>
+  .linkOverlay::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -0,0 +1,4 @@
+export { default as Link } from './Link.svelte';
+export { default as LinkBox } from './LinkBox.svelte';
+export { default as LinkOverlay } from './LinkOverlay.svelte';
+export * from './types';

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLBaseAttributes, SvelteHTMLElements } from 'svelte/elements';
+export type LinkProps = {
+  children: Snippet;
+  color?: 'primary' | 'fg' | 'bg' | 'accent' | 'muted';
+  as?: keyof SvelteHTMLElements;
+} & HTMLAnchorAttributes;
+
+export type LinkBoxProps = {
+  children: Snippet;
+  as?: keyof SvelteHTMLElements;
+} & HTMLBaseAttributes;
+
+export type LinkOverlayProps = {
+  children: Snippet;
+  href: string;
+};

package/src/lib/components/Loading/Loader.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  let { ...restProps } = $props();
+  let loaderClasses = $derived(['loader', restProps.class ?? '']);
+</script>
+
+<div class={loaderClasses}>
+  <div class="loader__anim"></div>
+</div>
+
+<style>
+  .loader {
+    width: 14px;
+    height: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .loader__anim {
+    width: 8px;
+    height: 8px;
+    --c: no-repeat linear-gradient(var(--primary-500) 0 0);
+    background: var(--c), var(--c), var(--c), var(--c);
+    background-size: 5px 5px;
+    animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
+  }
+  @keyframes l5 {
+    0% {
+      background-position:
+        0 0,
+        100% 0,
+        100% 100%,
+        0 100%;
+    }
+    33% {
+      background-position:
+        0 0,
+        100% 0,
+        100% 100%,
+        0 100%;
+      width: 14px;
+      height: 14px;
+    }
+    66% {
+      background-position:
+        100% 0,
+        100% 100%,
+        0 100%,
+        0 0;
+      width: 14px;
+      height: 14px;
+    }
+    100% {
+      background-position:
+        100% 0,
+        100% 100%,
+        0 100%,
+        0 0;
+    }
+  }
+</style>

package/src/lib/components/Loading/Skeleton.svelte

@@ -0,0 +1,9 @@
+<div class="skeleton"></div>
+
+<style>
+  .skeleton {
+    width: 20px;
+    height: 20px;
+    background-color: red;
+  }
+</style>

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

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

package/src/lib/components/Logo/Logo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  let { color = 'var(--fg)', size = 128, ...rest }: { color?: string; size?: string | number } = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M64 120C94.9279 120 120 94.9279 120 64C120 33.0721 94.9279 8 64 8C33.0721 8 8 33.0721 8 64C8 94.9279 33.0721 120 64 120ZM64 128C99.3462 128 128 99.3462 128 64C128 28.6538 99.3462 0 64 0C28.6538 0 0 28.6538 0 64C0 99.3462 28.6538 128 64 128Z"
+    fill={color}
+  />
+  <path
+    d="M30.9196 118.799C31.1236 117.921 31.1467 116.811 31.2144 114.752L31.3282 111.284L43.1193 105.567C56.3171 99.1666 58.9093 98.8979 58.6365 103.958C58.5544 105.541 58.5227 109.757 58.573 113.327L58.6646 119.817L63.6226 122.411C66.1733 123.746 67.6328 124.611 68.5062 124.208C69.7688 123.624 69.8067 120.39 70.1459 112.09L70.6296 100.256L67.6086 98.4417C65.0513 96.9055 56.0699 90.2583 52.6318 87.3573C52.0699 86.884 49.3807 85.2381 46.655 83.7007C43.9292 82.1635 40.8562 79.9785 39.8264 78.8454C38.7966 77.7123 36.6815 75.7763 35.1261 74.5433C31.734 71.8543 31.4397 70.603 31.1197 57.5058L30.8714 47.333L27.4541 46.2047C22.551 44.5858 23.0901 42.6393 29.2767 39.6239C32.1585 38.2194 36.7717 35.8101 39.5283 34.2704C49.1824 28.8775 58.2372 24.6163 61.3986 23.9779C63.1528 23.6235 65.6132 22.6584 66.8662 21.8328C69.2763 20.2449 70.7484 19.2605 72.3255 19.0449C74.8791 18.6958 77.7082 20.3623 85.2401 24.7464L96.482 31.2898L97 47.6621L93.1579 50.613C91.0448 52.2359 88.7933 53.5637 88.1547 53.5637C87.5165 53.5637 85.0277 54.7194 82.625 56.132C78.2074 58.7292 72.9701 60.8489 70.9708 60.8489C70.198 60.8489 69.8853 58.2653 69.8978 51.9702L69.9179 43.0913L59.1227 39.2194V60.9357L66.4126 66.3152C70.4222 69.274 75.958 73.2021 78.7146 75.0445C81.4712 76.8868 85.0198 79.4664 86.6005 80.7769C88.1812 82.0874 91.0742 84.305 93.0295 85.7051L96.5847 88.2505L96.4238 119.191C86.9151 124.789 75.8326 128 64 128C51.894 128 40.5731 124.639 30.9196 118.799Z"
+    fill={color}
+  />
+</svg>

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

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