@hyvor/design 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- as?: "button" | "a" | undefined;
5
+ as?: "a" | "button" | undefined;
6
6
  size?: "small" | "medium" | "large" | "x-small" | undefined;
7
7
  color?: "danger" | "accent" | "soft" | "light" | "invisible" | undefined;
8
8
  block?: boolean | undefined;
@@ -0,0 +1,53 @@
1
+ <script>export let color = "var(--accent-lightest)";
2
+ export let height = 1;
3
+ export let width = 100;
4
+ export let margin = 0;
5
+ export let align = "center";
6
+ </script>
7
+ <!-- <div
8
+ class="line"
9
+ style="
10
+ background-color: {color};
11
+ height: {height}px;
12
+ width: {width}%;
13
+ margin: {margin}px 0;
14
+ align: {align};
15
+ "
16
+ />
17
+
18
+ <style>
19
+
20
+ </style> -->
21
+
22
+ <!-- <div
23
+ class="line"
24
+ style="
25
+ background-color: {color};
26
+ height: {height}px;
27
+ width: {width}%;
28
+ margin-top: {margin}px;
29
+ margin-bottom: {margin}px;
30
+ margin-left: {align === 'end' ? 'auto' : '0'};
31
+ margin-right: {align === 'start' ? 'auto' : '0'};
32
+ "
33
+ /> -->
34
+
35
+ <div
36
+ class="line"
37
+ style="
38
+ background-color: {color};
39
+ height: {height}px;
40
+ width: {width}%;
41
+ margin-top: {margin}px;
42
+ margin-bottom: {margin}px;
43
+ margin-left: {align === 'center' || align === 'end' ? 'auto' : 0};
44
+ margin-right: {align === 'center' ? 'auto' : 0};
45
+ display: flex;
46
+ "
47
+ />
48
+
49
+ <style>
50
+ .line {
51
+ display: block;
52
+ }
53
+ </style>
@@ -0,0 +1,20 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ height?: number | undefined;
6
+ width?: number | undefined;
7
+ margin?: number | undefined;
8
+ align?: "start" | "end" | "center" | undefined;
9
+ };
10
+ events: {
11
+ [evt: string]: CustomEvent<any>;
12
+ };
13
+ slots: {};
14
+ };
15
+ export type DividerProps = typeof __propDef.props;
16
+ export type DividerEvents = typeof __propDef.events;
17
+ export type DividerSlots = typeof __propDef.slots;
18
+ export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
19
+ }
20
+ export {};
@@ -1,4 +1,4 @@
1
- <div class="form-control">
1
+ <div class="form-control" {...$$restProps}>
2
2
  <slot />
3
3
  </div>
4
4
 
@@ -2,7 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} FormControlEvents */
3
3
  /** @typedef {typeof __propDef.slots} FormControlSlots */
4
4
  export default class FormControl extends SvelteComponent<{
5
- [x: string]: never;
5
+ [x: string]: any;
6
6
  }, {
7
7
  [evt: string]: CustomEvent<any>;
8
8
  }, {
@@ -15,7 +15,7 @@ export type FormControlSlots = typeof __propDef.slots;
15
15
  import { SvelteComponent } from "svelte";
16
16
  declare const __propDef: {
17
17
  props: {
18
- [x: string]: never;
18
+ [x: string]: any;
19
19
  };
20
20
  events: {
21
21
  [evt: string]: CustomEvent<any>;
@@ -4,7 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  size?: "small" | "medium" | "large" | undefined;
6
6
  color?: "danger" | "accent" | "soft" | "invisible" | undefined;
7
- as?: "button" | "a" | undefined;
7
+ as?: "a" | "button" | undefined;
8
8
  };
9
9
  events: {
10
10
  keyup: KeyboardEvent;
@@ -1,12 +1,14 @@
1
1
  <script>export let small = false;
2
2
  export let light = false;
3
3
  export let normal = false;
4
+ export let bold = false;
4
5
  </script>
5
6
 
6
7
  <span
7
8
  class:light
8
9
  class:small
9
10
  class:normal
11
+ class:bold
10
12
 
11
13
  {...$$restProps}
12
14
  >
@@ -23,4 +25,7 @@ export let normal = false;
23
25
  span.normal {
24
26
  font-weight: 400;
25
27
  }
28
+ span.bold {
29
+ font-weight: 600;
30
+ }
26
31
  </style>
@@ -5,6 +5,7 @@ declare const __propDef: {
5
5
  small?: boolean | undefined;
6
6
  light?: boolean | undefined;
7
7
  normal?: boolean | undefined;
8
+ bold?: boolean | undefined;
8
9
  };
9
10
  events: {
10
11
  [evt: string]: CustomEvent<any>;
@@ -27,6 +27,17 @@ let input;
27
27
  <input
28
28
  {...$$restProps}
29
29
  bind:this={input}
30
+
31
+ on:keyup
32
+ on:keydown
33
+ on:keypress
34
+ on:focus
35
+ on:blur
36
+ on:click
37
+ on:mouseover
38
+ on:mouseenter
39
+ on:mouseleave
40
+ on:change
30
41
  />
31
42
 
32
43
  {#if $$slots.end}
@@ -7,6 +7,17 @@ declare const __propDef: {
7
7
  block?: boolean | undefined;
8
8
  };
9
9
  events: {
10
+ keyup: KeyboardEvent;
11
+ keydown: KeyboardEvent;
12
+ keypress: KeyboardEvent;
13
+ focus: FocusEvent;
14
+ blur: FocusEvent;
15
+ click: MouseEvent;
16
+ mouseover: MouseEvent;
17
+ mouseenter: MouseEvent;
18
+ mouseleave: MouseEvent;
19
+ change: Event;
20
+ } & {
10
21
  [evt: string]: CustomEvent<any>;
11
22
  };
12
23
  slots: {
@@ -12,6 +12,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
12
12
  export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
13
13
  export { default as DarkToggle } from './Dark/DarkToggle.svelte';
14
14
  export { default as Dropdown } from './Dropdown/Dropdown.svelte';
15
+ export { default as Divider } from './Divider/Divider.svelte';
15
16
  export { default as Caption } from './FormControl/Caption.svelte';
16
17
  export { default as FormControl } from './FormControl/FormControl.svelte';
17
18
  export { default as InputGroup } from './FormControl/InputGroup.svelte';
@@ -27,5 +28,6 @@ export { default as Switch } from './Switch/Switch.svelte';
27
28
  export { default as Table } from './Table/Table.svelte';
28
29
  export { default as TableRow } from './Table/TableRow.svelte';
29
30
  export { default as Textarea } from './Textarea/Textarea.svelte';
31
+ export { default as Text } from './Text/Text.svelte';
30
32
  export { default as TextInput } from './TextInput/TextInput.svelte';
31
33
  export { default as Tooltip } from './Tooltip/Tooltip.svelte';
@@ -1,3 +1,5 @@
1
+ import Nav from '../marketing/Docs/Nav/Nav.svelte';
2
+ import NavLink from './NavLink/NavLink.svelte';
1
3
  export { default as ActionList } from './ActionList/ActionList.svelte';
2
4
  export { default as ActionListItem } from './ActionList/ActionListItem.svelte';
3
5
  export { default as ActionListGroup } from './ActionList/ActionListGroup.svelte';
@@ -12,6 +14,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
12
14
  export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
13
15
  export { default as DarkToggle } from './Dark/DarkToggle.svelte';
14
16
  export { default as Dropdown } from './Dropdown/Dropdown.svelte';
17
+ export { default as Divider } from './Divider/Divider.svelte';
15
18
  export { default as Caption } from './FormControl/Caption.svelte';
16
19
  export { default as FormControl } from './FormControl/FormControl.svelte';
17
20
  export { default as InputGroup } from './FormControl/InputGroup.svelte';
@@ -27,5 +30,6 @@ export { default as Switch } from './Switch/Switch.svelte';
27
30
  export { default as Table } from './Table/Table.svelte';
28
31
  export { default as TableRow } from './Table/TableRow.svelte';
29
32
  export { default as Textarea } from './Textarea/Textarea.svelte';
33
+ export { default as Text } from './Text/Text.svelte';
30
34
  export { default as TextInput } from './TextInput/TextInput.svelte';
31
35
  export { default as Tooltip } from './Tooltip/Tooltip.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "scripts": {