@julianelda/domos 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+bun x sv create --template library --types ts --add prettier eslint vitest="usages:unit,component" playwright tailwindcss="plugins:typography,forms" storybook --install bun domos
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/button/button.stories.svelte

@@ -0,0 +1,44 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Button from "./button.svelte";
+  import { fn } from "storybook/test";
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: "Button",
+    component: Button,
+    argTypes: {
+      id: { control: "text" },
+      style: {
+        control: { type: "select" },
+        options: ["primary", "secondary"],
+      },
+      text: { control: "text" },
+      type: {
+        control: { type: "select" },
+        options: ["button", "submit"],
+      },
+    },
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    id: "button",
+    style: "primary",
+    text: "Button primary",
+    type: "button",
+  }} />
+
+<Story
+  name="Secondary"
+  args={{
+    id: "button",
+    style: "secondary",
+    text: "Button secondary",
+    type: "button",
+  }} />

package/dist/button/button.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Button;
+type Button = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Button: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Button from "./button.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/button/button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  interface Props {
+    id: string;
+    onClick: () => void;
+    style: "primary" | "secondary";
+    text: string;
+    type: "button" | "submit";
+  }
+
+  const {
+    id,
+    onClick,
+    style = "primary",
+    text,
+    type = "button",
+  }: Props = $props();
+</script>
+
+<button
+  data-testid={id}
+  {id}
+  onclick={onClick}
+  {type}
+  class={[
+    "cursor-pointer appearance-none rounded-lg p-2 text-lg shadow-sm hover:border-primary-500 hover:bg-primary-500 focus:ring-primary-300 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary-300 active:bg-primary-700 dark:hover:bg-primary-500",
+    style === "primary"
+      ? "border-primary-700 bg-primary-700 text-ink-white "
+      : "border border-ink-500 bg-card-background-light text-ink-black hover:text-white dark:bg-slate dark:text-ink-white",
+  ]}>
+  {text}
+</button>

package/dist/button/button.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    id: string;
+    onClick: () => void;
+    style: "primary" | "secondary";
+    text: string;
+    type: "button" | "submit";
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/card/card.stories.svelte

@@ -0,0 +1,14 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Card from "./card.svelte";
+
+  const { Story } = defineMeta({
+    title: "Card",
+    component: Card,
+  });
+</script>
+
+<Story name="Default">
+  <h2 class="text-lg font-semibold">Card Title</h2>
+  <p class="text-sm text-gray-500">This is a card description.</p>
+</Story>

package/dist/card/card.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Card;
+type Card = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Card: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Card from "./card.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/card/card.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  const { children } = $props();
+</script>
+
+<div
+  class="rounded-md bg-card-background-light p-1 shadow-sm
+        sm:p-4
+        dark:bg-card-background-dark">
+  {@render children?.()}
+</div>

package/dist/card/card.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Card: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from "./button/button.svelte";
+export { default as Input } from "./input/input.svelte";
+export { default as Select } from "./select/select.svelte";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from "./button/button.svelte";
+export { default as Input } from "./input/input.svelte";
+export { default as Select } from "./select/select.svelte";

package/dist/input/input.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import InputField from "../input-field/input-field.svelte";
+  import InputLabel from "../input-label/input-label.svelte";
+  import type { InputProps } from "./input.types.js";
+
+  const {
+    disabled,
+    hideLabel,
+    id,
+    label,
+    onChange,
+    onKeyDown,
+    placeholder,
+    type,
+    value,
+  }: InputProps = $props();
+</script>
+
+<div class="flex-1">
+  <InputLabel
+    {hideLabel}
+    {id}
+    {label} />
+  <div class="mt-1">
+    <InputField
+      {disabled}
+      {id}
+      {onChange}
+      {onKeyDown}
+      {placeholder}
+      {type}
+      {value} />
+  </div>
+</div>

package/dist/input/input.svelte.d.ts

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

package/dist/input/input.types.d.ts

@@ -0,0 +1,3 @@
+import type { InputFieldProps } from "./../input-field/input-field.types.ts";
+import type { InputLabelProps } from "./../input-label/input-label.types.ts";
+export type InputProps = InputFieldProps & InputLabelProps;

package/dist/input/input.types.js

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

package/dist/input-field/input-field.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { InputFieldProps } from "./input-field.types.js";
+
+  const {
+    disabled = false,
+    id,
+    onChange,
+    onKeyDown,
+    placeholder = "",
+    type = "text",
+    value,
+    withIconLeft = false,
+  }: InputFieldProps = $props();
+</script>
+
+<input
+  data-testid={id}
+  {id}
+  {disabled}
+  oninput={(e) => onChange?.((e.target as HTMLInputElement).value)}
+  onkeydown={(e) => onKeyDown?.((e.target as HTMLInputElement).value)}
+  {placeholder}
+  {type}
+  {value}
+  class={[
+    "form-input block w-full appearance-none border border-ink-gray bg-white p-2 px-3 text-ink-black ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate dark:text-app-text-dark",
+    withIconLeft === true ? "rounded-l-md" : "rounded-md",
+  ]} />

package/dist/input-field/input-field.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldProps } from "./input-field.types.ts";
+declare const InputField: import("svelte").Component<InputFieldProps, {}, "">;
+type InputField = ReturnType<typeof InputField>;
+export default InputField;

package/dist/input-field/input-field.types.d.ts

@@ -0,0 +1,10 @@
+export interface InputFieldProps {
+    disabled?: boolean;
+    id: string;
+    onChange?: (value: number | string) => void;
+    onKeyDown?: (value: number | string) => void;
+    placeholder?: string;
+    type: "number" | "search" | "text";
+    value: number | string;
+    withIconLeft?: boolean;
+}

package/dist/input-field/input-field.types.js

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

package/dist/input-label/input-label.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { InputLabelProps } from "./input-label.types.js";
+
+  const {
+    hideLabel = false,
+    id,
+    label,
+    value = "",
+  }: InputLabelProps = $props();
+</script>
+
+<div class="flex">
+  <label
+    class={["font-heading mr-auto font-bold", hideLabel && "sr-only"]}
+    for={id}>
+    {label}
+    {#if value !== ""}
+      <span class="sr-only">{value}</span>
+    {/if}
+  </label>
+</div>

package/dist/input-label/input-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputLabelProps } from "./input-label.types.ts";
+declare const InputLabel: import("svelte").Component<InputLabelProps, {}, "">;
+type InputLabel = ReturnType<typeof InputLabel>;
+export default InputLabel;

package/dist/input-label/input-label.types.d.ts

@@ -0,0 +1,6 @@
+export interface InputLabelProps {
+    hideLabel?: boolean;
+    id: string;
+    label: string;
+    value?: string;
+}

package/dist/input-label/input-label.types.js

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

package/dist/select/select.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import InputLabel from "../input-label/input-label.svelte";
+  import SelectField from "../select-field/select-field.svelte";
+  import type { SelectProps } from "./select.types.js";
+
+  const { hideLabel, id, label, onChange, options, value }: SelectProps =
+    $props();
+</script>
+
+<div class="flex-1">
+  <InputLabel
+    {hideLabel}
+    {id}
+    {label} />
+  <div class="mt-1">
+    <SelectField
+      {id}
+      {onChange}
+      {options}
+      {value} />
+  </div>
+</div>

package/dist/select/select.svelte.d.ts

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

package/dist/select/select.types.d.ts

@@ -0,0 +1,3 @@
+import type { InputLabelProps } from "./../input-label/input-label.types.ts";
+import type { SelectFieldProps } from "./../select-field/select-field.types.ts";
+export type SelectProps = InputLabelProps & SelectFieldProps;

package/dist/select/select.types.js

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

package/dist/select-field/select-field.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { SelectFieldProps } from "./select-field.types.js";
+
+  const {
+    id,
+    inInputField = false,
+    onChange,
+    options,
+    value,
+  }: SelectFieldProps = $props();
+</script>
+
+<select
+  class={[
+    "w-full form-select appearance-none rounded-md border border-ink-gray py-2 pr-8 pl-2 text-ink-black focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-slate dark:text-ink-white",
+    inInputField && "h-full rounded-l-none bg-transparent",
+    !inInputField && "block pl-3",
+  ]}
+  data-testid={id}
+  {id}
+  name={id}
+  oninput={(e) => onChange((e.target as HTMLSelectElement).value as string)}
+  {value}>
+  {#each options as option (option.value)}
+    <option value={option.value}>
+      {option.label}
+    </option>
+  {/each}
+</select>

package/dist/select-field/select-field.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SelectFieldProps } from "./select-field.types.ts";
+declare const SelectField: import("svelte").Component<SelectFieldProps, {}, "">;
+type SelectField = ReturnType<typeof SelectField>;
+export default SelectField;

package/dist/select-field/select-field.types.d.ts

@@ -0,0 +1,10 @@
+export interface SelectFieldProps {
+    id: string;
+    inInputField?: boolean;
+    onChange: (value: string) => void;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+}

package/dist/select-field/select-field.types.js

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

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@julianelda/domos",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test": "vitest --project=client",
+    "test:e2e": "playwright test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.58.1",
+    "@prettier/plugin-oxc": "^0.1.3",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-svelte-csf": "^5.0.10",
+    "@storybook/addon-themes": "^10.2.7",
+    "@storybook/sveltekit": "^10.2.7",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24",
+    "@vitest/browser-playwright": "^4.0.18",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^10.2.7",
+    "eslint-plugin-svelte": "^3.14.0",
+    "globals": "^17.3.0",
+    "playwright": "^1.58.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.17",
+    "storybook": "^10.2.7",
+    "svelte": "^5.49.2",
+    "svelte-check": "^4.3.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^2.0.2"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "dependencies": {
+    "@julianelda/chroma": "^1.0.0",
+    "@julianelda/stilo": "^1.0.2",
+    "clsx": "^2.1.1"
+  }
+}