@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.10

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.
Files changed (112) hide show
  1. package/dist/assets/icons/icon-check-dark-contrast.svg +1 -0
  2. package/dist/assets/icons/icon-check-light-contrast.svg +1 -0
  3. package/dist/assets/icons/icon-copy-dark-contrast.svg +1 -0
  4. package/dist/assets/icons/icon-copy-light-contrast.svg +1 -0
  5. package/dist/components/PineappleSlideToggle.svelte +12 -6
  6. package/dist/components/PineappleSlideToggle.svelte.d.ts +3 -2
  7. package/dist/components/blog_template/BlogTemplate.svelte +3 -1
  8. package/dist/components/blog_template/BlogTemplate.svelte.d.ts +1 -1
  9. package/dist/components/blog_template/BlogTemplateInner.svelte +1 -1
  10. package/dist/components/blog_template/BlogTemplateInner.svelte.d.ts +1 -1
  11. package/dist/components/dialog_manager/DialogManagerStore.d.ts +0 -15
  12. package/dist/components/dialog_manager/DialogManagerStore.js +0 -15
  13. package/dist/components/dialog_manager/DialogMangerInit.d.ts +15 -0
  14. package/dist/components/dialog_manager/DialogMangerInit.js +15 -0
  15. package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js +1 -1
  16. package/dist/components/dialog_overlay/DialogOverlay.svelte +1 -1
  17. package/dist/components/index.d.ts +1 -1
  18. package/dist/components/index.js +1 -1
  19. package/dist/components/layouts/SeaweedBaseLayout.svelte +0 -2
  20. package/dist/components/navigation_component/NavigationComponent.svelte +2 -1
  21. package/dist/components/navigation_component/NavigationControl.svelte +1 -1
  22. package/dist/components/pineapple/PineappleBaseLayout.svelte +2 -1
  23. package/dist/index.d.ts +1 -0
  24. package/dist/index.js +1 -0
  25. package/dist/styles/app.css +92 -1
  26. package/dist/styles/turnip-theme.css +65 -61
  27. package/dist/template/seaweed/CreateUrlForm.svelte +17 -11
  28. package/dist/template/seaweed/CreateUrlForm.svelte.d.ts +4 -1
  29. package/dist/template/seaweed/ToastSettings.d.ts +15 -0
  30. package/dist/template/seaweed/ToastSettings.js +1 -0
  31. package/dist/template/seaweed/entries/ThisWebpage.svelte +1 -1
  32. package/dist/template/seaweed/entries/WorkExperience.svelte +1 -1
  33. package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte +34 -1
  34. package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts +0 -1
  35. package/dist/ui/components/SocialSection.svelte +4 -1
  36. package/dist/ui/components/accordion/PinyaAccordion.svelte +21 -0
  37. package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts +8 -0
  38. package/dist/ui/components/accordion/PinyaAccordionItem.svelte +29 -0
  39. package/dist/ui/components/accordion/PinyaAccordionItem.svelte.d.ts +9 -0
  40. package/dist/ui/components/accordion/index.d.ts +2 -0
  41. package/dist/ui/components/accordion/index.js +2 -0
  42. package/dist/ui/components/index.d.ts +1 -0
  43. package/dist/ui/components/index.js +1 -0
  44. package/dist/ui/elements/CodeBlock/CodeBlock.svelte +65 -0
  45. package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts +5 -0
  46. package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts +11 -0
  47. package/dist/ui/elements/CodeBlock/CodeBlockProps.js +1 -0
  48. package/dist/ui/elements/CodeBlock/index.d.ts +2 -0
  49. package/dist/ui/elements/CodeBlock/index.js +2 -0
  50. package/dist/{components/ElementVisbilityDetector.svelte → ui/elements/ElementVisibilityDetector.svelte} +6 -3
  51. package/dist/ui/elements/ElementVisibilityDetector.svelte.d.ts +8 -0
  52. package/dist/ui/elements/PineappleSwitch.svelte +29 -0
  53. package/dist/ui/elements/PineappleSwitch.svelte.d.ts +10 -0
  54. package/dist/ui/elements/Placeholder.svelte +17 -0
  55. package/dist/ui/elements/Placeholder.svelte.d.ts +7 -0
  56. package/dist/ui/elements/index.d.ts +11 -8
  57. package/dist/ui/elements/index.js +11 -8
  58. package/dist/ui/elements/pinya-button/component.svelte +2 -1
  59. package/dist/ui/elements/pinya-button/props.d.ts +1 -0
  60. package/dist/ui/elements/pinya-card/component.svelte +10 -8
  61. package/dist/ui/elements/pinya-card/component.svelte.d.ts +3 -3
  62. package/dist/ui/elements/pinya-card/props.d.ts +3 -0
  63. package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte +35 -0
  64. package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts +18 -0
  65. package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts +18 -0
  66. package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.js +1 -0
  67. package/dist/ui/elements/text-chip/TextChip.svelte +15 -0
  68. package/dist/ui/elements/text-chip/TextChip.svelte.d.ts +4 -0
  69. package/dist/ui/elements/text-chip/TextChipProps.d.ts +4 -0
  70. package/dist/ui/elements/text-chip/TextChipProps.js +1 -0
  71. package/dist/ui/elements/text-chip/index.d.ts +2 -0
  72. package/dist/ui/elements/text-chip/index.js +2 -0
  73. package/dist/ui/modules/index.d.ts +2 -1
  74. package/dist/ui/modules/index.js +2 -1
  75. package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte +10 -20
  76. package/dist/ui/modules/projects/Hepcat.svelte +71 -0
  77. package/dist/ui/modules/projects/Hepcat.svelte.d.ts +22 -0
  78. package/dist/ui/modules/projects/Pengi.svelte +60 -0
  79. package/dist/ui/modules/projects/Pengi.svelte.d.ts +22 -0
  80. package/dist/ui/modules/projects/Soulwork.svelte +55 -0
  81. package/dist/ui/modules/projects/Soulwork.svelte.d.ts +22 -0
  82. package/dist/ui/modules/projects/ThisWebpage.svelte +62 -0
  83. package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts +22 -0
  84. package/dist/ui/modules/projects/index.d.ts +4 -0
  85. package/dist/ui/modules/projects/index.js +4 -0
  86. package/dist/ui/modules/seaweed/ChumBucket.svelte +38 -38
  87. package/dist/ui/templates/PinyaBase.svelte +9 -6
  88. package/dist/ui/templates/PinyaBase.svelte.d.ts +1 -1
  89. package/dist/ui/templates/index.d.ts +3 -2
  90. package/dist/ui/templates/index.js +3 -2
  91. package/dist/ui/templates/pinya-page-layout/component.svelte +17 -10
  92. package/dist/ui/templates/pinya-page-layout/component.svelte.d.ts +2 -1
  93. package/dist/ui/templates/seaweed-layout/EntryGroup.svelte +89 -0
  94. package/dist/ui/templates/seaweed-layout/EntryGroup.svelte.d.ts +4 -0
  95. package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte +45 -0
  96. package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte.d.ts +9 -0
  97. package/dist/ui/templates/seaweed-layout/ProjectComponentProps.d.ts +4 -0
  98. package/dist/ui/templates/seaweed-layout/ProjectComponentProps.js +1 -0
  99. package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte +316 -0
  100. package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte.d.ts +14 -0
  101. package/dist/ui/templates/seaweed-layout/SeaweedLayout.md +4 -0
  102. package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte +277 -0
  103. package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts +4 -0
  104. package/dist/ui/templates/seaweed-layout/index.d.ts +4 -0
  105. package/dist/ui/templates/seaweed-layout/index.js +4 -0
  106. package/dist/ui/templates/seaweed-layout/props.d.ts +27 -0
  107. package/dist/ui/templates/seaweed-layout/props.js +1 -0
  108. package/dist/util/util.d.ts +1 -0
  109. package/dist/util/util.js +9 -0
  110. package/package.json +20 -15
  111. package/src/lib/styles/app.css +92 -1
  112. package/dist/components/ElementVisbilityDetector.svelte.d.ts +0 -7
@@ -3,7 +3,7 @@
3
3
  import Card from "../../../components/Card.svelte";
4
4
  import GithubIcon from "../../../assets/icons/github-mark.svg";
5
5
  import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
6
- import { Chip } from "../../..";
6
+ import { Chip } from "../../../components/index";
7
7
 
8
8
  // noinspection JSUnusedGlobalSymbols
9
9
  interface Props {
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import SocialSection from "../../../ui/components/SocialSection.svelte";
3
3
  import Card from "../../../components/Card.svelte";
4
- import ElementVisibilityDetector from "../../../components/ElementVisbilityDetector.svelte";
4
+ import ElementVisibilityDetector from "../../../ui/elements/ElementVisibilityDetector.svelte";
5
5
  import type { EntryProps } from "./EntryProps";
6
6
 
7
7
  interface Props {
@@ -8,7 +8,6 @@
8
8
  import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
9
9
  import CloseIcon from "../../../assets/icons/close.svg";
10
10
  import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
11
- import "./entry-order-config.postcss";
12
11
 
13
12
  interface Props {
14
13
  seaweedTemplateData: SeaweedTemplateData;
@@ -260,5 +259,39 @@
260
259
  tfoot > tr {
261
260
  display: flex;
262
261
  }
262
+ .btn-group > button {
263
+ padding: 0.3em 0.75em;
264
+ }
265
+
266
+ .btn-group-header > h2 {
267
+ font-weight: bolder;
268
+ padding-top: 1lh;
269
+ padding-bottom: 1lh;
270
+ margin-bottom: 0;
271
+ padding-inline-start: 1em;
272
+ }
273
+
274
+ .dark .btn-group-header > h2 {
275
+ color: rgb(var(--theme-font-color-dark));
276
+ }
277
+
278
+ .dark .entry-group {
279
+ background-color: rgb(var(--color-surface-800));
280
+ }
263
281
 
282
+ tbody tr:nth-child(odd) {
283
+ background-color: rgb(var(--color-surface-500));
284
+ }
285
+
286
+ .dark tbody tr:nth-child(odd) {
287
+ background-color: rgb(var(--color-surface-900));
288
+ }
289
+
290
+ tbody tr:nth-child(even) {
291
+ background-color: rgb(var(--color-surface-200));
292
+ }
293
+
294
+ .dark tbody tr:nth-child(even) {
295
+ background-color: rgb(var(--color-surface-800));
296
+ }
264
297
  </style>
@@ -1,5 +1,4 @@
1
1
  import { type ComponentMeta, type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
2
- import "./entry-order-config.postcss";
3
2
  interface Props {
4
3
  seaweedTemplateData: SeaweedTemplateData;
5
4
  seaweedEntries: EntryGroup[];
@@ -63,7 +63,9 @@
63
63
  <PinyaButton
64
64
  buttonVariant={ButtonVariant.SmallIcon}
65
65
  title="https://turnipxenon.itch.io/"
66
- onclick={() => window.open("https://turnipxenon.itch.io/")}>
66
+ onclick={() => window.open("https://turnipxenon.itch.io/")}
67
+ classes="h-full"
68
+ >
67
69
  <ImageIcon src={ItchLogoHotLink} alt="itch icon" />
68
70
  {#if (!isSmallVersion)}
69
71
  <span>TurnipXenon</span>
@@ -83,5 +85,6 @@
83
85
  flex-wrap: wrap;
84
86
  justify-content: var(--preferred-justify-content);
85
87
  gap: 0.7rem;
88
+ align-items: stretch;
86
89
  }
87
90
  </style>
@@ -0,0 +1,21 @@
1
+ <script lang="ts">
2
+ import { Accordion } from "@skeletonlabs/skeleton-svelte";
3
+ import type { Snippet } from "svelte";
4
+
5
+ let {
6
+ value = $bindable(),
7
+ children,
8
+ }: {
9
+ value: string[],
10
+ children: Snippet,
11
+ } = $props();
12
+ </script>
13
+
14
+ <Accordion
15
+ classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
16
+ {value}
17
+ onValueChange={(e) => (value = e.value)}
18
+ collapsible
19
+ >
20
+ {@render children()}
21
+ </Accordion>
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from "svelte";
2
+ type $$ComponentProps = {
3
+ value: string[];
4
+ children: Snippet;
5
+ };
6
+ declare const PinyaAccordion: import("svelte").Component<$$ComponentProps, {}, "value">;
7
+ type PinyaAccordion = ReturnType<typeof PinyaAccordion>;
8
+ export default PinyaAccordion;
@@ -0,0 +1,29 @@
1
+ <script lang="ts">
2
+ // noinspection ES6UnusedImports
3
+ import { Accordion } from "@skeletonlabs/skeleton-svelte";
4
+ import type { Snippet } from "svelte";
5
+
6
+ let {
7
+ value,
8
+ control: controlSnippet,
9
+ panel: panelSnippet,
10
+ }: {
11
+ value: string,
12
+ control: Snippet;
13
+ panel: Snippet;
14
+ } = $props();
15
+ </script>
16
+
17
+ <Accordion.Item
18
+ {value}
19
+ controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
20
+ >
21
+ <!-- Control -->
22
+ {#snippet control()}
23
+ {@render controlSnippet()}
24
+ {/snippet}
25
+ <!-- Panel -->
26
+ {#snippet panel()}
27
+ {@render panelSnippet()}
28
+ {/snippet}
29
+ </Accordion.Item>
@@ -0,0 +1,9 @@
1
+ import type { Snippet } from "svelte";
2
+ type $$ComponentProps = {
3
+ value: string;
4
+ control: Snippet;
5
+ panel: Snippet;
6
+ };
7
+ declare const PinyaAccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ type PinyaAccordionItem = ReturnType<typeof PinyaAccordionItem>;
9
+ export default PinyaAccordionItem;
@@ -0,0 +1,2 @@
1
+ export { default as PinyaAccordion } from "./PinyaAccordion.svelte";
2
+ export { default as PinyaAccordionItem } from "./PinyaAccordionItem.svelte";
@@ -0,0 +1,2 @@
1
+ export { default as PinyaAccordion } from "./PinyaAccordion.svelte";
2
+ export { default as PinyaAccordionItem } from "./PinyaAccordionItem.svelte";
@@ -1,3 +1,4 @@
1
1
  export { default as ModalBase } from "./ModalBase.svelte";
2
2
  export { default as FourPartCard } from "./FourPartCard.svelte";
3
3
  export { default as SocialSection } from "./SocialSection.svelte";
4
+ export * from "./accordion";
@@ -1,3 +1,4 @@
1
1
  export { default as ModalBase } from "./ModalBase.svelte";
2
2
  export { default as FourPartCard } from "./FourPartCard.svelte";
3
3
  export { default as SocialSection } from "./SocialSection.svelte";
4
+ export * from "./accordion";
@@ -0,0 +1,65 @@
1
+ <!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
2
+
3
+ <script module>
4
+ import { addCopyButton } from "shiki-transformer-copy-button";
5
+ import { createHighlighterCoreSync } from "shiki/core";
6
+ import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
7
+ // Themes
8
+ // https://shiki.style/themes
9
+ import themeLight from "shiki/themes/catppuccin-latte.mjs";
10
+ import themeDark from "shiki/themes/catppuccin-frappe.mjs";
11
+ // Languages
12
+ // https://shiki.style/languages
13
+ import console from "shiki/langs/console.mjs";
14
+ import html from "shiki/langs/html.mjs";
15
+ import css from "shiki/langs/css.mjs";
16
+ import js from "shiki/langs/javascript.mjs";
17
+ import ts from "shiki/langs/typescript.mjs";
18
+ import markdown from "shiki/langs/markdown.mjs";
19
+
20
+ // https://shiki.style/guide/sync-usage
21
+ const shiki = createHighlighterCoreSync({
22
+ engine: createJavaScriptRegexEngine(),
23
+ // Implement your import theme.
24
+ themes: [themeLight, themeDark],
25
+ // Implement your imported and supported languages.
26
+ langs: [console, html, css, js, ts, markdown]
27
+ });
28
+ </script>
29
+
30
+ <script lang="ts">
31
+ import type { CodeBlockProps } from "./CodeBlockProps";
32
+
33
+ let {
34
+ code = "",
35
+ lang = "console",
36
+ // Base Style Props
37
+ base = " overflow-hidden",
38
+ rounded = "rounded-container",
39
+ shadow = "",
40
+ classes = "",
41
+ // Pre Style Props
42
+ preBase = "",
43
+ prePadding = "[&>pre]:p-4",
44
+ preClasses = ""
45
+ }: CodeBlockProps = $props();
46
+
47
+ // Shiki convert to HTML
48
+ const generatedHtml = $derived(shiki.codeToHtml(code, {
49
+ lang,
50
+ themes: {
51
+ light: "catppuccin-latte",
52
+ dark: "catppuccin-frappe"
53
+ },
54
+ transformers: [
55
+ addCopyButton({ toggle: 2000 })
56
+ ]
57
+ }));
58
+ </script>
59
+
60
+ <div
61
+ class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
62
+ >
63
+ <!-- Output Shiki's Generated HTML -->
64
+ {@html generatedHtml}
65
+ </div>
@@ -0,0 +1,5 @@
1
+ import type { CodeBlockProps } from "./CodeBlockProps";
2
+ /** Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ */
3
+ declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
4
+ type CodeBlock = ReturnType<typeof CodeBlock>;
5
+ export default CodeBlock;
@@ -0,0 +1,11 @@
1
+ export interface CodeBlockProps {
2
+ code?: string;
3
+ lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
4
+ base?: string;
5
+ rounded?: string;
6
+ shadow?: string;
7
+ classes?: string;
8
+ preBase?: string;
9
+ prePadding?: string;
10
+ preClasses?: string;
11
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ export { default as CodeBlock } from "./CodeBlock.svelte";
2
+ export * from "./CodeBlockProps";
@@ -0,0 +1,2 @@
1
+ export { default as CodeBlock } from "./CodeBlock.svelte";
2
+ export * from "./CodeBlockProps";
@@ -1,12 +1,15 @@
1
1
  <script lang="ts">
2
- import {onMount} from "svelte";
2
+ import { onMount, type Snippet } from "svelte";
3
3
 
4
4
  interface Props {
5
5
  isVisible?: boolean;
6
- children?: import('svelte').Snippet;
6
+ children?: Snippet;
7
7
  }
8
8
 
9
- let { isVisible = $bindable(true), children }: Props = $props();
9
+ let {
10
+ isVisible = $bindable(true),
11
+ children
12
+ }: Props = $props();
10
13
 
11
14
  let stickyElem: HTMLElement = $state();
12
15
 
@@ -0,0 +1,8 @@
1
+ import { type Snippet } from "svelte";
2
+ interface Props {
3
+ isVisible?: boolean;
4
+ children?: Snippet;
5
+ }
6
+ declare const ElementVisibilityDetector: import("svelte").Component<Props, {}, "isVisible">;
7
+ type ElementVisibilityDetector = ReturnType<typeof ElementVisibilityDetector>;
8
+ export default ElementVisibilityDetector;
@@ -0,0 +1,29 @@
1
+ <script lang="ts">
2
+ import { Switch } from "@skeletonlabs/skeleton-svelte";
3
+ import type { Snippet } from "svelte";
4
+
5
+ interface Props {
6
+ checked?: boolean;
7
+ name: string;
8
+ onChange?: (() => void);
9
+ children?: Snippet;
10
+ }
11
+
12
+ let {
13
+ checked = $bindable(false),
14
+ name,
15
+ onChange = undefined,
16
+ children = undefined
17
+ }: Props = $props();
18
+ </script>
19
+
20
+ <Switch name={name}
21
+ controlActive="bg-secondary-400 dark:bg-secondary-500"
22
+ controlInactive="bg-surface-700 dark:bg-surface-800"
23
+ checked={checked}
24
+ onCheckedChange={(e) => {
25
+ checked = e.checked;
26
+ onChange?.();
27
+ }}>
28
+ {@render children?.()}
29
+ </Switch>
@@ -0,0 +1,10 @@
1
+ import type { Snippet } from "svelte";
2
+ interface Props {
3
+ checked?: boolean;
4
+ name: string;
5
+ onChange?: (() => void);
6
+ children?: Snippet;
7
+ }
8
+ declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
9
+ type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
10
+ export default PineappleSwitch;
@@ -0,0 +1,17 @@
1
+ <script lang="ts">
2
+ let {
3
+ isCircle = false,
4
+ classes = '',
5
+ }: {
6
+ isCircle?: boolean;
7
+ classes?: string;
8
+ } = $props();
9
+ </script>
10
+
11
+ <div
12
+ class="
13
+ {isCircle ?'placeholder-circle' : 'placeholder'}
14
+ animate-pulse bg-surface-600 dark:bg-surface-800
15
+ {classes}
16
+ "
17
+ ></div>
@@ -0,0 +1,7 @@
1
+ type $$ComponentProps = {
2
+ isCircle?: boolean;
3
+ classes?: string;
4
+ };
5
+ declare const Placeholder: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type Placeholder = ReturnType<typeof Placeholder>;
7
+ export default Placeholder;
@@ -1,8 +1,11 @@
1
- export { default as ImageIcon } from './ImageIcon.svelte';
2
- export { default as TextLink } from './TextLink.svelte';
3
- export * from './ColorScheme';
4
- export * from './GeneralUIProps';
5
- export * from './OnBackground';
6
- export * from './pinya-card/index';
7
- export * from './WrapperProps';
8
- export * from './pinya-button/index';
1
+ export { default as ImageIcon } from "./ImageIcon.svelte";
2
+ export { default as TextLink } from "./TextLink.svelte";
3
+ export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
4
+ export * from "./ColorScheme";
5
+ export * from "./GeneralUIProps";
6
+ export * from "./OnBackground";
7
+ export * from "./pinya-card/index";
8
+ export * from "./WrapperProps";
9
+ export * from "./pinya-button/index";
10
+ export * from "./text-chip";
11
+ export * from "./CodeBlock";
@@ -1,8 +1,11 @@
1
- export { default as ImageIcon } from './ImageIcon.svelte';
2
- export { default as TextLink } from './TextLink.svelte';
3
- export * from './ColorScheme';
4
- export * from './GeneralUIProps';
5
- export * from './OnBackground';
6
- export * from './pinya-card/index';
7
- export * from './WrapperProps';
8
- export * from './pinya-button/index';
1
+ export { default as ImageIcon } from "./ImageIcon.svelte";
2
+ export { default as TextLink } from "./TextLink.svelte";
3
+ export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
4
+ export * from "./ColorScheme";
5
+ export * from "./GeneralUIProps";
6
+ export * from "./OnBackground";
7
+ export * from "./pinya-card/index";
8
+ export * from "./WrapperProps";
9
+ export * from "./pinya-button/index";
10
+ export * from "./text-chip";
11
+ export * from "./CodeBlock";
@@ -8,6 +8,7 @@
8
8
  paddingClass = '',
9
9
  buttonVariant = ButtonVariant.Default,
10
10
  colorClass = '',
11
+ classes = '',
11
12
  ...props
12
13
  }: PinyaButtonProps = $props();
13
14
 
@@ -41,7 +42,7 @@
41
42
  <button
42
43
  {...props}
43
44
  class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
44
- class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass}`}
45
+ class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
45
46
  >
46
47
  {@render children()}
47
48
  </button>
@@ -10,4 +10,5 @@ export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIPr
10
10
  paddingClass?: string;
11
11
  buttonVariant?: ButtonVariant;
12
12
  colorClass?: string;
13
+ classes?: string;
13
14
  };
@@ -1,19 +1,21 @@
1
1
  <script lang="ts">/**
2
- * When with texts, wrap the text content inside a div so flex wont apply
3
- */
4
- import type { PinyaCardProps } from './props';
2
+ * When with texts, wrap the text content inside a div so flex wont apply
3
+ */
4
+ import type { PinyaCardProps } from "./props";
5
5
 
6
- let {
7
- paddingClass = 'pt-[1lh] pb-[1lh] pl-16 pr-16',
8
- flexClass = 'flex flex-col',
9
- widthClass = 'max-w-md',
6
+ let {
7
+ paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
8
+ flexClass = "flex flex-col",
9
+ widthClass = "max-w-md",
10
+ borderClass = "border-[2px] border-primary-500 dark:border-0",
11
+ marginClass = "",
10
12
  className,
11
13
  children
12
14
  }: PinyaCardProps = $props();
13
15
  </script>
14
16
 
15
17
  <div
16
- class={`card bg-surface-200 dark:bg-surface-900 border-[2px] border-primary-500 dark:border-0 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass}`}
18
+ class={`card bg-surface-200 dark:bg-surface-900 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
17
19
  >
18
20
  {@render children?.()}
19
21
  </div>
@@ -1,7 +1,7 @@
1
1
  /**
2
- * When with texts, wrap the text content inside a div so flex wont apply
3
- */
4
- import type { PinyaCardProps } from './props';
2
+ * When with texts, wrap the text content inside a div so flex wont apply
3
+ */
4
+ import type { PinyaCardProps } from "./props";
5
5
  declare const Component: import("svelte").Component<PinyaCardProps, {}, "">;
6
6
  type Component = ReturnType<typeof Component>;
7
7
  export default Component;
@@ -4,4 +4,7 @@ export interface PinyaCardProps extends WrapperProps {
4
4
  className?: string;
5
5
  flexClass?: string;
6
6
  widthClass?: string;
7
+ borderClass?: string;
8
+ marginClass?: string;
9
+ includeDataNoSnippet?: boolean;
7
10
  }
@@ -0,0 +1,35 @@
1
+ <script lang="ts" generics="T extends string">
2
+ import { Combobox } from '@skeletonlabs/skeleton-svelte';
3
+ import { getLocale, localizeHref } from '../../../paraglide/runtime';
4
+ import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
5
+
6
+ let {
7
+ contentZIndex = 'auto',
8
+ value = $bindable(),
9
+ onValueChange = () => {},
10
+ onValueChangeBase = undefined,
11
+ ...props
12
+ }: PinyaComboboxProps<T> = $props();
13
+
14
+ const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
15
+ value = e.value as T[];
16
+ onValueChange(e);
17
+ };
18
+ </script>
19
+
20
+ <Combobox
21
+ width="w-full"
22
+ labelText="text-md"
23
+ inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
24
+ inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
25
+ inputGroupButton="size-[3rem]"
26
+ inputGroupArrow="size-[2rem] m-auto"
27
+ contentBackground="bg-surface-100-900 border-primary-500 border-2"
28
+ zIndex={contentZIndex}
29
+ optionActive="bg-secondary-400-600"
30
+ optionHover="hover:brightness-75 dark:hover:brightness-125"
31
+ optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
32
+ onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
33
+ {value}
34
+ {...props}
35
+ />
@@ -0,0 +1,18 @@
1
+ import type { PinyaComboboxProps } from "./PinyaComboboxProps";
2
+ declare class __sveltets_Render<T extends string> {
3
+ props(): PinyaComboboxProps<T>;
4
+ events(): {};
5
+ slots(): {};
6
+ bindings(): "value";
7
+ exports(): {};
8
+ }
9
+ interface $$IsomorphicComponent {
10
+ new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
11
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
12
+ } & ReturnType<__sveltets_Render<T>['exports']>;
13
+ <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
14
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
15
+ }
16
+ declare const PinyaCombobox: $$IsomorphicComponent;
17
+ type PinyaCombobox<T extends string> = InstanceType<typeof PinyaCombobox<T>>;
18
+ export default PinyaCombobox;
@@ -0,0 +1,18 @@
1
+ export interface GenericComboboxItem<T extends string> {
2
+ label: string;
3
+ value: T;
4
+ }
5
+ export interface ValueChangeDetails<T extends string> {
6
+ value: string[];
7
+ items: T[];
8
+ }
9
+ export interface PinyaComboboxProps<T extends string> {
10
+ data: GenericComboboxItem<T>[];
11
+ defaultValue: T[];
12
+ value: T[];
13
+ label: string;
14
+ placeholder: string;
15
+ onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
16
+ onValueChangeBase?: (selectedList: ValueChangeDetails<T>) => void;
17
+ contentZIndex?: string;
18
+ }
@@ -0,0 +1,15 @@
1
+ <script lang="ts">
2
+ import type { TextChipProps } from "./TextChipProps";
3
+
4
+ let { children, queryClass = "" }: TextChipProps = $props();
5
+ </script>
6
+
7
+ <span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
8
+
9
+ <style>
10
+ /*noinspection CssUnusedSymbol*/
11
+ :global(.highlight-chip.text-chip) {
12
+ background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
13
+ color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
14
+ }
15
+ </style>
@@ -0,0 +1,4 @@
1
+ import type { TextChipProps } from "./TextChipProps";
2
+ declare const TextChip: import("svelte").Component<TextChipProps, {}, "">;
3
+ type TextChip = ReturnType<typeof TextChip>;
4
+ export default TextChip;
@@ -0,0 +1,4 @@
1
+ import type { WrapperProps } from "../index";
2
+ export interface TextChipProps extends WrapperProps {
3
+ queryClass?: string;
4
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ export { default as TextChip } from "./TextChip.svelte";
2
+ export * from "./TextChipProps";
@@ -0,0 +1,2 @@
1
+ export { default as TextChip } from "./TextChip.svelte";
2
+ export * from "./TextChipProps";
@@ -1 +1,2 @@
1
- export * from "./seaweed/index";
1
+ export * from "./seaweed";
2
+ export * from "./projects";
@@ -1 +1,2 @@
1
- export * from "./seaweed/index";
1
+ export * from "./seaweed";
2
+ export * from "./projects";