@julianelda/domos 0.0.1 → 1.0.0

package/README.md

@@ -1,65 +0,0 @@
-# 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/assets/styles.css

@@ -0,0 +1,36 @@
+body {
+  --grid-color: 150;
+  background-size: 1.75rem 1.75rem;
+  background-image:
+    linear-gradient(
+      to right,
+      rgba(var(--grid-color), var(--grid-color), var(--grid-color), 0.03) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to bottom,
+      rgba(var(--grid-color), var(--grid-color), var(--grid-color), 0.03) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to top,
+      rgba(var(--grid-color), var(--grid-color), var(--grid-color), 0.03) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      to left,
+      rgba(var(--grid-color), var(--grid-color), var(--grid-color), 0.03) 1px,
+      transparent 1px
+    );
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}

package/dist/button/button.stories.svelte

@@ -1,9 +1,8 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Button from "./button.svelte";
   import { fn } from "storybook/test";
+  import Button from "./button.svelte";
 
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
     title: "Button",
     component: Button,

package/dist/card/card.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <div
-  class="rounded-md bg-card-background-light p-1 shadow-sm
-        sm:p-4
-        dark:bg-card-background-dark">
+  class="rounded-md bg-card-background-light p-1 shadow-sm sm:p-4 dark:bg-card-background-dark">
   {@render children?.()}
 </div>

package/dist/checkbox/checkbox.stories.svelte

@@ -0,0 +1,44 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { fn } from "storybook/test";
+  import Checkbox from "./checkbox.svelte";
+
+  const { Story } = defineMeta({
+    title: "Checkbox",
+    component: Checkbox,
+    argTypes: {
+      id: { control: "text" },
+      label: { control: "text" },
+      value: { control: "boolean" },
+      hideLabel: { control: "boolean" },
+    },
+    args: {
+      onChange: fn(),
+    },
+  });
+</script>
+
+<Story
+  name="Checked"
+  args={{
+    id: "checkbox-checked",
+    label: "Checked Checkbox",
+    value: true,
+  }} />
+
+<Story
+  name="Unchecked"
+  args={{
+    id: "checkbox-unchecked",
+    label: "Unchecked Checkbox",
+    value: false,
+  }} />
+
+<Story
+  name="Hidden Label"
+  args={{
+    id: "checkbox-hidden-label",
+    label: "Hidden Label Checkbox",
+    value: false,
+    hideLabel: true,
+  }} />

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

@@ -0,0 +1,27 @@
+export default Checkbox;
+type Checkbox = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Checkbox from "./checkbox.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/checkbox/checkbox.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import InputLabel from "../input-label/input-label.svelte";
+  import type { CheckboxProps } from "./checkbox.types.js";
+
+  const { hideLabel, id, label, onChange, value }: CheckboxProps = $props();
+</script>
+
+<div class="relative flex items-start gap-1">
+  <div class="flex h-6 items-center">
+    <input
+      checked={value}
+      class="form-checkbox inline-block size-4 rounded-md border-0 bg-white p-1 text-primary-500 accent-primary-500 ring-1 ring-ink-500 ring-inset focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset dark:bg-ink-500"
+      data-testid={id}
+      {id}
+      name={id}
+      onchange={(event) => onChange((event.target as HTMLInputElement).checked)}
+      type="checkbox" />
+  </div>
+  <div class="leading-6">
+    <InputLabel
+      hideLabel={Boolean(hideLabel)}
+      {id}
+      {label} />
+  </div>
+</div>

package/dist/checkbox/checkbox.svelte.d.ts

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

package/dist/checkbox/checkbox.types.d.ts

@@ -0,0 +1,7 @@
+export interface CheckboxProps {
+    hideLabel?: boolean;
+    id: string;
+    label: string;
+    onChange: (value: boolean) => void;
+    value: boolean;
+}

package/dist/checkbox/checkbox.types.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/input-button/input-button.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import InputField from "../input-field/input-field.svelte";
+  import InputLabel from "../input-label/input-label.svelte";
+  import type { InputButtonProps } from "./input-button.types.js";
+
+  const {
+    buttonAriaLabel,
+    disabled,
+    hideLabel,
+    icon,
+    id,
+    label,
+    onButtonClick,
+    onChange,
+    onKeyDown,
+    placeholder,
+    type,
+    value,
+  }: InputButtonProps = $props();
+</script>
+
+<div class="flex-1">
+  <InputLabel
+    hideLabel={Boolean(hideLabel)}
+    {id}
+    {label} />
+  <div class="mt-1 flex">
+    <div class="relative flex grow items-stretch focus-within:z-10">
+      <InputField
+        {disabled}
+        {id}
+        onChange={(value) => onChange?.(value)}
+        onKeyDown={(value) => onKeyDown?.(value)}
+        {placeholder}
+        {type}
+        {value}
+        withIconLeft={true} />
+    </div>
+    <button
+      aria-label={buttonAriaLabel}
+      class="relative -ml-px inline-flex cursor-pointer appearance-none items-center gap-x-1.5 rounded-r-md border border-l-0 border-ink-gray px-3 py-2 text-sm font-bold ring-inset hover:bg-primary-500 hover:text-ink-white focus:border-primary-300 focus:ring-1 focus:ring-primary-300 focus:ring-inset active:bg-primary-700"
+      data-testid={id + "-button"}
+      onclick={() => onButtonClick()}
+      type="button">
+      {#if icon}
+        {@const Component = icon}
+        <Component />
+      {/if}
+    </button>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,10 @@
+import type { Component } from "svelte";
+import type { InputFieldProps } from "./../input-field/input-field.types.ts";
+import type { InputLabelProps } from "./../input-label/input-label.types.ts";
+export type InputButtonProps = IconButtonProps & InputFieldProps & InputLabelProps;
+interface IconButtonProps {
+    buttonAriaLabel: string;
+    icon?: Component;
+    onButtonClick: () => void;
+}
+export {};

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

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

package/dist/input-select/input-select.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import InputField from "../input-field/input-field.svelte";
+  import InputLabel from "../input-label/input-label.svelte";
+  import SelectField from "../select-field/select-field.svelte";
+  import type { InputSelectProps } from "./input-select.types.js";
+
+  const {
+    hideLabel,
+    inputDisabled,
+    inputId,
+    inputLabel,
+    inputPlaceholder,
+    inputValue,
+    onInputChange,
+    onInputKeydown,
+    onSelectChange,
+    options,
+    selectId,
+    selectLabel,
+    selectValue,
+    type,
+  }: InputSelectProps = $props();
+</script>
+
+<div class="flex-1">
+  <InputLabel
+    {hideLabel}
+    id={inputId}
+    label={inputLabel} />
+  <div class="relative mt-1 rounded-md shadow-xs">
+    <InputField
+      disabled={inputDisabled}
+      id={inputId}
+      onChange={(value) => onInputChange?.(value)}
+      onKeyDown={(value) => onInputKeydown?.(value)}
+      placeholder={inputPlaceholder}
+      {type}
+      value={inputValue} />
+    <div class="absolute inset-y-0 right-0 flex items-center">
+      <InputLabel
+        hideLabel={true}
+        id={selectId}
+        label={selectLabel} />
+      <SelectField
+        id={selectId}
+        inInputField={true}
+        onChange={(value) => onSelectChange?.(value)}
+        {options}
+        value={selectValue} />
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,19 @@
+export interface InputSelectProps {
+    hideLabel?: boolean;
+    inputDisabled?: boolean;
+    inputId: string;
+    inputLabel: string;
+    inputPlaceholder?: string;
+    inputValue: number | string;
+    onInputChange?: (value: number | string) => void;
+    onInputKeydown?: (key: number | string) => void;
+    onSelectChange?: (value: string) => void;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    selectId: string;
+    selectLabel: string;
+    selectValue: string;
+    type: "number" | "search" | "text";
+}

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

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

package/dist/tailwind.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@import "@julianelda/chroma";
+
+@custom-variant dark (&:is(.dark *));
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@julianelda/domos",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -41,6 +41,7 @@
   "devDependencies": {
     "@eslint/compat": "^2.0.2",
     "@eslint/js": "^9.39.2",
+    "@lucide/svelte": "^0.563.1",
     "@playwright/test": "^1.58.1",
     "@prettier/plugin-oxc": "^0.1.3",
     "@storybook/addon-a11y": "^10.2.7",
@@ -81,7 +82,6 @@
   ],
   "dependencies": {
     "@julianelda/chroma": "^1.0.0",
-    "@julianelda/stilo": "^1.0.2",
-    "clsx": "^2.1.1"
+    "@julianelda/stilo": "^1.0.2"
   }
 }