@intechstudio/grid-uikit 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# Grid UI Kit
+
+The UI elements and configurations for projects used by the Grid Ecosystem.
+
+## Developing
+
+When developing this package, the library should be linked using the `npm link` command, which will overwrite the existing folder from node_modules with the locally available package.

package/dist/Block.svelte

@@ -0,0 +1,9 @@
+<script>export let border = "transparent";
+</script>
+
+<div
+  class="py-4 border {border !== 'transparent' ? 'px-4' : ''} {'border-' +
+    border}"
+>
+  <slot />
+</div>

package/dist/Block.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        border?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlockProps = typeof __propDef.props;
+export type BlockEvents = typeof __propDef.events;
+export type BlockSlots = typeof __propDef.slots;
+export default class Block extends SvelteComponent<BlockProps, BlockEvents, BlockSlots> {
+}
+export {};

package/dist/BlockBody.svelte

@@ -0,0 +1,5 @@
+<script></script>
+
+<div class="text-white text-opacity-60 py-2">
+  <slot />
+</div>

package/dist/BlockBody.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlockBodyProps = typeof __propDef.props;
+export type BlockBodyEvents = typeof __propDef.events;
+export type BlockBodySlots = typeof __propDef.slots;
+export default class BlockBody extends SvelteComponent<BlockBodyProps, BlockBodyEvents, BlockBodySlots> {
+}
+export {};

package/dist/BlockRow.svelte

@@ -0,0 +1,5 @@
+<script></script>
+
+<div class="flex flex-row w-full gap-x-4 py-2">
+  <slot />
+</div>

package/dist/BlockRow.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlockRowProps = typeof __propDef.props;
+export type BlockRowEvents = typeof __propDef.events;
+export type BlockRowSlots = typeof __propDef.slots;
+export default class BlockRow extends SvelteComponent<BlockRowProps, BlockRowEvents, BlockRowSlots> {
+}
+export {};

package/dist/BlockTitle.svelte

@@ -0,0 +1,5 @@
+<script></script>
+
+<div class="text-white py-2">
+  <slot />
+</div>

package/dist/BlockTitle.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BlockTitleProps = typeof __propDef.props;
+export type BlockTitleEvents = typeof __propDef.events;
+export type BlockTitleSlots = typeof __propDef.slots;
+export default class BlockTitle extends SvelteComponent<BlockTitleProps, BlockTitleEvents, BlockTitleSlots> {
+}
+export {};

package/dist/MeltCheckbox.svelte

@@ -0,0 +1,47 @@
+<script>import { createCheckbox, melt } from "@melt-ui/svelte";
+export let target;
+export let title;
+const {
+  elements: { root, input },
+  helpers: { isChecked, isIndeterminate },
+  states: { checked }
+} = createCheckbox({
+  defaultChecked: target
+});
+let oldTarget;
+$: {
+  if (target !== oldTarget) {
+    $checked = target;
+    oldTarget = target;
+  }
+  if (target !== $checked) {
+    oldTarget = target = $checked;
+  }
+}
+</script>
+
+<label
+  class="my-4 bg-black bg-opacity-10 border border-black border-opacity-20 group flex text-white items-center cursor-pointer p-2"
+>
+  <button {...$root} use:root class="">
+    <div
+      class="relative flex items-center justify-center rounded border w-6 h-6"
+    >
+      <div
+        class="{target
+          ? 'block'
+          : 'hidden'} absolute rounded-sm bg-white h-3 w-3"
+      />
+    </div>
+
+    <input {...$input} use:input />
+  </button>
+
+  <div
+    class="pl-2 text-white group-hover:text-opacity-100 {target
+      ? 'text-opacity-100'
+      : 'text-opacity-80'}"
+  >
+    {title}
+  </div>
+</label>

package/dist/MeltCheckbox.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        target: any;
+        title: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MeltCheckboxProps = typeof __propDef.props;
+export type MeltCheckboxEvents = typeof __propDef.events;
+export type MeltCheckboxSlots = typeof __propDef.slots;
+export default class MeltCheckbox extends SvelteComponent<MeltCheckboxProps, MeltCheckboxEvents, MeltCheckboxSlots> {
+}
+export {};

package/dist/MeltRadio.svelte

@@ -0,0 +1,95 @@
+<script>import { createRadioGroup, melt } from "@melt-ui/svelte";
+import { writable } from "svelte/store";
+export let options;
+export let target;
+export let orientation = "vertical";
+export let style = "radio";
+export let size = "auto";
+const {
+  elements: { root, item },
+  helpers: { isChecked },
+  states: { value }
+} = createRadioGroup({
+  defaultValue: target,
+  orientation
+});
+let oldTarget;
+$: {
+  if (target.toString() !== oldTarget) {
+    $value = target.toString();
+    oldTarget = target.toString();
+  }
+  if (target.toString() !== $value) {
+    oldTarget = $value;
+    if ($value === "true") {
+      target = true;
+    } else if ($value === "false") {
+      target = false;
+    } else if ($value !== "" && !isNaN(Number($value))) {
+      target = Number($value);
+    } else {
+      target = $value;
+    }
+  }
+}
+</script>
+
+<div
+  {...$root}
+  use:root
+  class="text-white overflow-auto
+    {size == 'full' && orientation == 'horizontal' ? 'w-full' : ''}
+    {orientation === 'vertical'
+    ? 'grid grid-flow-row my-2 gap-4'
+    : 'grid grid-flow-col'}
+    {style === 'button' ? 'gap-4' : ''}
+    {style !== 'button' && orientation !== 'vertical'
+    ? 'border border-black border-opacity-20 bg-black bg-opacity-10'
+    : ''} py-2"
+>
+  {#each options as option}
+    <!-- Convert value to string in case it was originally boolean -->
+    {@const value = option.value.toString()}
+    {@const title = option.title}
+    <label
+      class="
+    {orientation === 'vertical'
+        ? 'border border-black border-opacity-20 bg-black bg-opacity-10 py-2'
+        : ''} 
+      group cursor-pointer flex items-center {style !== 'button' ? 'px-2' : ''}"
+    >
+      {#if style === "radio"}
+        <button {...$item(value)} use:item id={title}>
+          <div
+            class="relative flex items-center justify-center rounded-full border w-6 h-6 mr-3"
+          >
+            <div
+              class="{$isChecked(value)
+                ? 'block'
+                : 'hidden'} absolute rounded-full bg-white h-3 w-3"
+            />
+          </div>
+        </button>
+
+        <span id="{title}-label">{title}</span>
+      {/if}
+      {#if style === "button"}
+        <button
+          {...$item(value)}
+          use:item
+          id={title}
+          class="relative px-2 py-1 w-full rounded bg-black bg-opacity-10 border border-black border-opacity-40"
+          class:bg-opacity-60={$isChecked(value)}
+          class:hover:bg-opacity-40={!$isChecked(value)}
+        >
+          {#if typeof title !== "undefined"}
+            <span id="{title}-label">{title}</span>
+          {:else}
+            <span class="invisible">N/A</span>
+          {/if}
+          <slot name="item" {value} />
+        </button>
+      {/if}
+    </label>
+  {/each}
+</div>

package/dist/MeltRadio.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        options: {
+            title: string;
+            value: string | boolean | number;
+        }[];
+        target: any;
+        orientation?: "vertical" | "horizontal" | undefined;
+        style?: "button" | "radio" | undefined;
+        size?: "auto" | "full" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        item: {
+            value: {
+                update: (updater: import("svelte/store").Updater<string>, sideEffect?: ((newValue: string) => void) | undefined) => void;
+                set: (this: void, value: string) => void;
+                subscribe(this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined): import("svelte/store").Unsubscriber;
+            };
+        };
+    };
+};
+export type MeltRadioProps = typeof __propDef.props;
+export type MeltRadioEvents = typeof __propDef.events;
+export type MeltRadioSlots = typeof __propDef.slots;
+export default class MeltRadio extends SvelteComponent<MeltRadioProps, MeltRadioEvents, MeltRadioSlots> {
+}
+export {};

package/dist/MeltSelect.svelte

@@ -0,0 +1,91 @@
+<script>import { createSelect, melt } from "@melt-ui/svelte";
+export let options;
+export let target;
+let oldTarget;
+const {
+  elements: { trigger, menu, option },
+  states: { selected, selectedLabel, open },
+  helpers: { isSelected }
+} = createSelect({
+  forceVisible: true,
+  positioning: {
+    placement: "bottom",
+    fitViewport: true,
+    sameWidth: true
+  },
+  defaultSelected: { value: target.value, label: target.title }
+});
+$: {
+  if ($selected) {
+    handleSelectionChange();
+  }
+}
+function handleSelectionChange() {
+  if (typeof $selected === "undefined") {
+    if (typeof target !== "undefined") {
+      selected.set(() => {
+        const s = { value: void 0, label: void 0 };
+        const item = options.find((e) => {
+          return e.value === target;
+        });
+        if (typeof item !== "undefined") {
+          s.value = target;
+          s.label = item.title;
+          oldTarget = target;
+          console.log(s);
+          return s;
+        }
+      });
+    }
+  } else {
+    if (target !== oldTarget) {
+      selected.update((s) => {
+        const item = options.find((e) => {
+          return e.value === target;
+        });
+        if (typeof item !== "undefined") {
+          s.value = target;
+          s.label = item.title;
+          oldTarget = target;
+          return s;
+        }
+      });
+    }
+    if (target !== $selected.value) {
+      oldTarget = target = $selected.value;
+    }
+  }
+}
+</script>
+
+<div class="flex flex-col gap-1">
+  <button
+    {...$trigger}
+    use:trigger
+    class="w-full flex flex-row border border-black p-2"
+  >
+    <div class="flex flex-grow">{$selectedLabel || " "}</div>
+    <div class="flex">&#9660;</div>
+  </button>
+  {#if $open}
+    <div
+      {...$menu}
+      use:menu
+      class="bg-gray-900 text-white/80 border border-white/50 rounded z-10"
+    >
+      {#each options as item}
+        <div
+          {...$option({ value: item.value, label: item.title })}
+          use:option
+          class="cursor-pointer hover:bg-white/40 p-2 hover:text-white {$isSelected(
+            item.value
+          )
+            ? 'bg-white/10'
+            : ' '}"
+        >
+          {item.title}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/MeltSelect.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        options: any;
+        target: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MeltSelectProps = typeof __propDef.props;
+export type MeltSelectEvents = typeof __propDef.events;
+export type MeltSelectSlots = typeof __propDef.slots;
+export default class MeltSelect extends SvelteComponent<MeltSelectProps, MeltSelectEvents, MeltSelectSlots> {
+}
+export {};

package/dist/MeltSlider.svelte

@@ -0,0 +1,39 @@
+<script>import { createSlider, melt } from "@melt-ui/svelte";
+export let target;
+export let min;
+export let max;
+export let step;
+const {
+  elements: { root, range, thumb },
+  states: { value }
+} = createSlider({
+  min,
+  max,
+  step
+});
+let oldTarget;
+$: {
+  if (target !== oldTarget) {
+    $value[0] = target;
+    oldTarget = target;
+  }
+  if (target !== $value[0]) {
+    oldTarget = target = $value[0];
+  }
+}
+</script>
+
+<span {...$root} use:root class="relative flex w-[200px] items-center h-[26px]">
+  <span class="block h-[3px] w-full bg-white rounded-full h-[8px]">
+    <span
+      {...$range}
+      use:range
+      class="h-[3px] bg-neutral-500 rounded-full h-[8px]"
+    />
+  </span>
+  <span
+    {...$thumb()}
+    use:thumb
+    class="block h-5 w-5 rounded-full bg-neutral-500 focus:ring-2 focus:ring-black/40"
+  />
+</span>

package/dist/MeltSlider.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        target: any;
+        min: any;
+        max: any;
+        step: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MeltSliderProps = typeof __propDef.props;
+export type MeltSliderEvents = typeof __propDef.events;
+export type MeltSliderSlots = typeof __propDef.slots;
+export default class MeltSlider extends SvelteComponent<MeltSliderProps, MeltSliderEvents, MeltSliderSlots> {
+}
+export {};

package/dist/MoltenButton.svelte

@@ -0,0 +1,17 @@
+<script>export let click;
+export let border = "black";
+export let title;
+</script>
+
+<button
+  on:click={() => {
+    if (typeof click === "undefined") {
+      return;
+    }
+    click();
+  }}
+  class="px-8 py-1 rounded bg-black bg-opacity-20 border border {'border-' +
+    border} border-opacity-40 hover:bg-opacity-60"
+>
+  {title}
+</button>

package/dist/MoltenButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        click: any;
+        border?: string | undefined;
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoltenButtonProps = typeof __propDef.props;
+export type MoltenButtonEvents = typeof __propDef.events;
+export type MoltenButtonSlots = typeof __propDef.slots;
+export default class MoltenButton extends SvelteComponent<MoltenButtonProps, MoltenButtonEvents, MoltenButtonSlots> {
+}
+export {};

package/dist/MoltenInput.svelte

@@ -0,0 +1,9 @@
+<script>export let disabled = false;
+export let target;
+</script>
+
+<input
+  {disabled}
+  class="w-full flex px-2 py-2 text-white text-opacity-80 flex-grow bg-black bg-opacity-10 border border-black border-opacity-20 focus:border-green-500 focus:outline-none"
+  bind:value={target}
+/>

package/dist/MoltenInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        target: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoltenInputProps = typeof __propDef.props;
+export type MoltenInputEvents = typeof __propDef.events;
+export type MoltenInputSlots = typeof __propDef.slots;
+export default class MoltenInput extends SvelteComponent<MoltenInputProps, MoltenInputEvents, MoltenInputSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { default as BlockBody } from './BlockBody.svelte';
+export { default as BlockTitle } from './BlockTitle.svelte';
+export { default as BlockRow } from './BlockRow.svelte';
+export { default as Block } from './Block.svelte';
+export { default as MeltCheckbox } from './MeltCheckbox.svelte';
+export { default as MeltRadio } from './MeltRadio.svelte';
+export { default as MeltSlider } from './MeltSlider.svelte';
+export { default as MeltSelect } from './MeltSelect.svelte';
+export { default as MoltenButton } from './MoltenButton.svelte';
+export { default as MoltenInput } from './MoltenInput.svelte';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { default as BlockBody } from './BlockBody.svelte';
+export { default as BlockTitle } from './BlockTitle.svelte';
+export { default as BlockRow } from './BlockRow.svelte';
+export { default as Block } from './Block.svelte';
+export { default as MeltCheckbox } from './MeltCheckbox.svelte';
+export { default as MeltRadio } from './MeltRadio.svelte';
+export { default as MeltSlider } from './MeltSlider.svelte';
+export { default as MeltSelect } from './MeltSelect.svelte';
+export { default as MoltenButton } from './MoltenButton.svelte';
+export { default as MoltenInput } from './MoltenInput.svelte';

package/dist/tailwind.config.d.ts

@@ -0,0 +1,269 @@
+export let content: string[];
+export let darkMode: string;
+export namespace theme {
+    namespace fontFamily {
+        let body: string[];
+    }
+    namespace extend {
+        export namespace transitionProperty {
+            let width: string;
+        }
+        export let margin: {
+            14: string;
+        };
+        export let zIndex: {
+            "-10": string;
+        };
+        let fontFamily_1: {
+            mono: string;
+            aldo: string;
+            "roboto-sans": string;
+            "gt-pressura": string;
+            roboto: string;
+            "roboto-mono": string;
+        };
+        export { fontFamily_1 as fontFamily };
+        export namespace cursor {
+            let helper: string;
+        }
+        export let minHeight: {
+            200: string;
+            300: string;
+        };
+        export let height: {
+            "16px": string;
+            "18px": string;
+            32: string;
+            14: string;
+            64: string;
+            72: string;
+            128: string;
+            600: string;
+            300: string;
+            calc: string;
+        };
+        let width_1: {
+            "16px": string;
+            "18px": string;
+            26: string;
+        };
+        export { width_1 as width };
+        export let inset: {
+            "1/2": string;
+            1: string;
+            "9/10": string;
+            "-1": string;
+        };
+        export let borderWidth: {
+            8: string;
+            16: string;
+        };
+        export namespace colors {
+            let black: "#000";
+            let white: "#fff";
+            let gray: {
+                '50': "#fafafa";
+                '100': "#f5f5f5";
+                '200': "#e5e5e5";
+                '300': "#d4d4d4";
+                '400': "#a3a3a3";
+                '500': "#737373";
+                '600': "#525252";
+                '700': "#404040";
+                '800': "#262626";
+                '900': "#171717";
+                '950': "#0a0a0a";
+            };
+            let green: {
+                '50': "#f0fdf4";
+                '100': "#dcfce7";
+                '200': "#bbf7d0";
+                '300': "#86efac";
+                '400': "#4ade80";
+                '500': "#22c55e";
+                '600': "#16a34a";
+                '700': "#15803d";
+                '800': "#166534";
+                '900': "#14532d";
+                '950': "#052e16";
+            };
+            let red: {
+                '50': "#fff1f2";
+                '100': "#ffe4e6";
+                '200': "#fecdd3";
+                '300': "#fda4af";
+                '400': "#fb7185";
+                '500': "#f43f5e";
+                '600': "#e11d48";
+                '700': "#be123c";
+                '800': "#9f1239";
+                '900': "#881337";
+                '950': "#4c0519";
+            };
+            let yellow: {
+                '50': "#fffbeb";
+                '100': "#fef3c7";
+                '200': "#fde68a";
+                '300': "#fcd34d";
+                '400': "#fbbf24";
+                '500': "#f59e0b";
+                '600': "#d97706";
+                '700': "#b45309";
+                '800': "#92400e";
+                '900': "#78350f";
+                '950': "#451a03";
+            };
+            let pink: {
+                '50': "#fdf2f8";
+                '100': "#fce7f3";
+                '200': "#fbcfe8";
+                '300': "#f9a8d4";
+                '400': "#f472b6";
+                '500': "#ec4899";
+                '600': "#db2777";
+                '700': "#be185d";
+                '800': "#9d174d";
+                '900': "#831843";
+                '950': "#500724";
+            };
+            let purple: {
+                '50': "#faf5ff";
+                '100': "#f3e8ff";
+                '200': "#e9d5ff";
+                '300': "#d8b4fe";
+                '400': "#c084fc";
+                '500': "#a855f7";
+                '600': "#9333ea";
+                '700': "#7e22ce";
+                '800': "#6b21a8";
+                '900': "#581c87";
+                '950': "#3b0764";
+            };
+            let orange: {
+                '50': "#fff7ed";
+                '100': "#ffedd5";
+                '200': "#fed7aa";
+                '300': "#fdba74";
+                '400': "#fb923c";
+                '500': "#f97316";
+                '600': "#ea580c";
+                '700': "#c2410c";
+                '800': "#9a3412";
+                '900': "#7c2d12";
+                '950': "#431407";
+            };
+            let primary: {
+                DEFAULT: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+                800: string;
+                900: string;
+            };
+            let warning: {
+                DEFAULT: string;
+                "desaturate-20": string;
+                "desaturate-10": string;
+                "saturate-10": string;
+                "saturate-20": string;
+            };
+            let error: {
+                DEFAULT: string;
+                "desaturate-10": string;
+                "desaturate-20": string;
+                "saturate-10": string;
+                "saturate-20": string;
+            };
+            let pick: {
+                DEFAULT: string;
+                "desaturate-10": string;
+                "desaturate-20": string;
+                "saturate-10": string;
+                "saturate-20": string;
+                complementer: string;
+            };
+            let select: {
+                DEFAULT: string;
+                "saturate-10": string;
+                "saturate-20": string;
+                "desaturate-10": string;
+                "desaturate-20": string;
+            };
+            let commit: {
+                DEFAULT: string;
+                "saturate-10": string;
+                "saturate-20": string;
+                "desaturate-10": string;
+                "desaturate-20": string;
+            };
+            namespace unsavedchange {
+                let DEFAULT: string;
+            }
+            let secondary: {
+                DEFAULT: string;
+                "brightness-90": string;
+                "brightness-80": string;
+                "brightness-70": string;
+                "brightness-60": string;
+                "brightness-50": string;
+                "brightness-40": string;
+                "brightness-30": string;
+                "brightness-20": string;
+                "brightness-10": string;
+                "darkness-10": string;
+                "darkness-20": string;
+                "darkness-30": string;
+                "darkness-40": string;
+                "darkness-50": string;
+            };
+            let normal: string;
+            namespace thirdery {
+                let DEFAULT_1: string;
+                export { DEFAULT_1 as DEFAULT };
+            }
+            let highlight: {
+                DEFAULT: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+            };
+            let important: {
+                DEFAULT: string;
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+                700: string;
+            };
+            namespace configs {
+                let cb: string;
+                let glc: string;
+                let glp: string;
+                let l: string;
+                let gks: string;
+                let gms: string;
+                let sbc: string;
+                let sec: string;
+                let glut: string;
+            }
+            let newPrimary: {
+                100: string;
+                200: string;
+                300: string;
+                400: string;
+                500: string;
+                600: string;
+            };
+        }
+    }
+}
+export let plugins: never[];

package/dist/tailwind.config.js

@@ -0,0 +1,191 @@
+const colors = require("tailwindcss/colors");
+const config = {
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/grid-uikit/src/**/*.{html,js,svelte,ts}"
+  ],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      body: ["roboto"],
+    },
+    extend: {
+      transitionProperty: {
+        width: "width",
+      },
+      margin: {
+        14: "3.5rem",
+      },
+      zIndex: {
+        "-10": "-10",
+      },
+      fontFamily: {
+        mono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+        aldo: "Aldo-SemiBold",
+        "roboto-sans": "Roboto Sans",
+        "gt-pressura": "GT Pressura Pro M Trial",
+        roboto: "Roboto",
+        "roboto-mono": "Roboto Mono",
+      },
+      cursor: {
+        helper: "help",
+      },
+      minHeight: {
+        200: "200px",
+        300: "300px",
+      },
+      height: {
+        "16px": "16px",
+        "18px": "18px",
+        32: "8rem",
+        14: "3.5rem",
+        64: "16rem",
+        72: "18rem",
+        128: "32rem",
+        600: "600px",
+        300: "300px",
+        calc: "calc(100vh - 62px)",
+      },
+      width: {
+        "16px": "16px",
+        "18px": "18px",
+        26: "26px",
+      },
+      inset: {
+        "1/2": "50%",
+        1: "1em",
+        "9/10": "0.9em",
+        "-1": "-1em",
+      },
+      borderWidth: {
+        8: "8px",
+        16: "16px",
+      },
+      colors: {
+        black: colors.black,
+        white: colors.white,
+        gray: colors.neutral,
+        green: colors.green,
+        red: colors.rose,
+        yellow: colors.amber,
+        pink: colors.pink,
+        purple: colors.purple,
+        orange: colors.orange,
+
+        primary: {
+          DEFAULT: "#1e2628",
+          100: "#d3dcde",
+          200: "#b6c5c8",
+          300: "#99adb2",
+          400: "#7c969d",
+          500: "#627d83",
+          600: "#4d6166",
+          700: "#374549",
+          800: "#212a2c",
+          900: "#0b0e0f",
+        },
+        warning: {
+          DEFAULT: "#EAB308",
+          "desaturate-20": "#FFD2B1",
+          "desaturate-10": "#FAB17C",
+          "saturate-10": "#EF9E4D",
+          "saturate-20": "#EF914D",
+        },
+        error: {
+          DEFAULT: "#DC2626",
+          "desaturate-10": "#DC4B4B",
+          "desaturate-20": "#DC7474",
+          "saturate-10": "#DC0F0F",
+          "saturate-20": "#FF0000",
+        },
+        pick: {
+          DEFAULT: "#6B7AFF",
+          "desaturate-10": "#8591FF",
+          "desaturate-20": "#A9AEFF",
+          "saturate-10": "#5263FF",
+          "saturate-20": "#1F4AC5",
+          complementer: "#FFEE52",
+        },
+        select: {
+          DEFAULT: "#47575F",
+          "saturate-10": "#3E545F",
+          "saturate-20": "#1A2A31",
+          "desaturate-10": "#515A5F",
+          "desaturate-20": "#788991",
+        },
+        commit: {
+          DEFAULT: "#0BA484",
+          "saturate-10": "#00A482",
+          "saturate-20": "#006F53",
+          "desaturate-10": "#1BA487",
+          "desaturate-20": "#5DDCB9",
+        },
+        unsavedchange: {
+          DEFAULT: "#1D4ED8",
+        },
+        secondary: {
+          DEFAULT: "#2a3439",
+          "brightness-90": "#eaebeb",
+          "brightness-80": "#d4d6d7",
+          "brightness-70": "#bfc2c4",
+          "brightness-60": "#aaaeb0",
+          "brightness-50": "#959a9c",
+          "brightness-40": "#7f8588",
+          "brightness-30": "#6a7174",
+          "brightness-20": "#555d61",
+          "brightness-10": "#3f484d",
+          "darkness-10": "#262f33",
+          "darkness-20": "#222a2e",
+          "darkness-30": "#1d2428",
+          "darkness-40": "#191f22",
+          "darkness-50": "#151a1d",
+        },
+        normal: "#cfdbd5",
+        thirdery: {
+          DEFAULT: "#31313F",
+        },
+        highlight: {
+          DEFAULT: "#CC5B5B",
+          100: "#edc5c5",
+          200: "#e19e9e",
+          300: "#d57777",
+          400: "#c95050",
+          500: "#af3636",
+          600: "#882a2a",
+        },
+        important: {
+          DEFAULT: "#e4d203",
+          100: "#fffde6",
+          200: "#fef8b3",
+          300: "#fdf381",
+          400: "#fdef4f",
+          500: "#fcea1c",
+          600: "#e3d103",
+          700: "#b0a202",
+        },
+        configs: {
+          cb: "#887880",
+          glc: "#88A096",
+          glp: "#BBAB8B",
+          l: "#EF8275",
+          gks: "#9AD4D6",
+          gms: "#DBCBD8",
+          sbc: "#065A82",
+          sec: "#963D5A",
+          glut: "#78BC61",
+        },
+        newPrimary: {
+          100: "#525252",
+          200: "#454545",
+          300: "#383838",
+          400: "#2C2C2C",
+          500: "#1F1F1F",
+          600: "#121212",
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@intechstudio/grid-uikit",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"dependencies": {
+		"@melt-ui/svelte": "^0.42.0",
+		"tailwindcss": "^3.1.8"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.11"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}