@public-ui/sample-react 2.1.7 → 2.1.8-rc.0

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 (150) hide show
  1. package/dist/1487.js +1 -1
  2. package/dist/1636.js +1 -1
  3. package/dist/1792.js +1 -1
  4. package/dist/1795.js +1 -1
  5. package/dist/1938.js +2 -0
  6. package/dist/2017.js +1 -1
  7. package/dist/2322.js +1 -1
  8. package/dist/2538.js +1 -1
  9. package/dist/2567.js +1 -1
  10. package/dist/263.js +1 -1
  11. package/dist/2719.js +1 -1
  12. package/dist/3064.js +1 -1
  13. package/dist/3077.js +1 -1
  14. package/dist/3238.js +1 -1
  15. package/dist/3395.js +1 -1
  16. package/dist/35.js +1 -1
  17. package/dist/3521.js +1 -1
  18. package/dist/356.js +1 -1
  19. package/dist/3714.js +1 -1
  20. package/dist/3735.js +1 -1
  21. package/dist/3766.js +1 -1
  22. package/dist/3994.js +1 -1
  23. package/dist/4025.js +1 -1
  24. package/dist/4118.js +1 -1
  25. package/dist/4182.js +1 -1
  26. package/dist/4188.js +1 -1
  27. package/dist/4332.js +1 -1
  28. package/dist/4402.js +1 -1
  29. package/dist/4556.js +2 -0
  30. package/dist/4818.js +1 -1
  31. package/dist/4892.js +1 -1
  32. package/dist/4933.js +1 -1
  33. package/dist/4943.js +1 -1
  34. package/dist/495.js +1 -1
  35. package/dist/5034.js +1 -1
  36. package/dist/5056.js +1 -1
  37. package/dist/5138.js +1 -1
  38. package/dist/5296.js +1 -1
  39. package/dist/5356.js +1 -1
  40. package/dist/5551.js +1 -1
  41. package/dist/5835.js +1 -1
  42. package/dist/5840.js +1 -1
  43. package/dist/5889.js +1 -1
  44. package/dist/5912.js +1 -1
  45. package/dist/6082.js +1 -1
  46. package/dist/6099.js +1 -1
  47. package/dist/6181.js +1 -1
  48. package/dist/619.js +1 -1
  49. package/dist/6671.js +1 -1
  50. package/dist/6775.js +1 -1
  51. package/dist/6812.js +2 -0
  52. package/dist/7274.js +1 -1
  53. package/dist/7795.js +1 -1
  54. package/dist/7802.js +1 -1
  55. package/dist/7860.js +1 -1
  56. package/dist/8092.js +1 -1
  57. package/dist/8111.js +1 -1
  58. package/dist/8146.js +1 -1
  59. package/dist/8427.js +1 -1
  60. package/dist/8495.js +1 -1
  61. package/dist/8672.js +1 -1
  62. package/dist/8737.js +1 -1
  63. package/dist/8786.js +1 -1
  64. package/dist/8796.js +1 -1
  65. package/dist/8853.js +2 -0
  66. package/dist/8977.js +1 -1
  67. package/dist/9333.js +1 -1
  68. package/dist/9389.js +1 -1
  69. package/dist/9561.js +1 -1
  70. package/dist/9599.js +1 -1
  71. package/dist/9612.js +1 -1
  72. package/dist/9890.js +1 -1
  73. package/dist/index.html +1 -1
  74. package/dist/main.css +3 -3
  75. package/dist/main.js +1 -1
  76. package/dist/main.js.LICENSE.txt +2 -2
  77. package/package.json +13 -14
  78. package/public/index.html +1 -1
  79. package/src/@shared/_mixins.scss +3 -0
  80. package/src/App.tsx +1 -1
  81. package/src/components/FormWrap.tsx +1 -1
  82. package/src/components/Navigation.tsx +63 -0
  83. package/src/components/Sidebar.tsx +5 -41
  84. package/src/components/abbr/basic.tsx +12 -12
  85. package/src/components/alert/card-msg.tsx +3 -1
  86. package/src/components/alert/html.tsx +4 -2
  87. package/src/components/button/baselined.tsx +1 -1
  88. package/src/components/button/partials/variants.tsx +15 -17
  89. package/src/components/button/width.tsx +2 -2
  90. package/src/components/button-link/basic.tsx +3 -3
  91. package/src/components/button-link/image.tsx +0 -1
  92. package/src/components/card/basic.tsx +1 -1
  93. package/src/components/combobox/partials/variants.tsx +1 -1
  94. package/src/components/details/basic.tsx +2 -2
  95. package/src/components/form/basic.tsx +1 -1
  96. package/src/components/form/error-list.tsx +1 -0
  97. package/src/components/input-checkbox/partials/variants.tsx +22 -10
  98. package/src/components/input-date/reset.tsx +1 -1
  99. package/src/components/input-password/show-password.tsx +1 -1
  100. package/src/components/input-text/partials/cases.tsx +1 -1
  101. package/src/components/input-text/text-formatter.tsx +45 -43
  102. package/src/components/link/image.tsx +0 -1
  103. package/src/components/link/target.tsx +1 -1
  104. package/src/components/modal/basic.tsx +1 -1
  105. package/src/components/nav/basic.tsx +23 -12
  106. package/src/components/nav/horizontal.tsx +12 -3
  107. package/src/components/nav/links.ts +36 -0
  108. package/src/components/table/column-alignment.tsx +64 -62
  109. package/src/components/table/complex-headers.tsx +80 -78
  110. package/src/components/table/horizontal-scrollbar.tsx +30 -28
  111. package/src/components/table/interactive-child-elements.tsx +69 -68
  112. package/src/components/table/pagination-position.tsx +15 -13
  113. package/src/components/table/render-cell.tsx +1 -1
  114. package/src/components/table/sort-data.tsx +11 -8
  115. package/src/components/table/stateful-with-selection.tsx +36 -27
  116. package/src/components/table/stateful-with-single-selection.tsx +36 -27
  117. package/src/components/table/stateless-with-selection.tsx +26 -17
  118. package/src/components/table/stateless-with-single-selection.tsx +26 -17
  119. package/src/components/table/stateless.tsx +29 -27
  120. package/src/components/table/with-footer.tsx +1 -0
  121. package/src/components/table/with-pagination.tsx +1 -1
  122. package/src/components/tabs/behavior.tsx +61 -0
  123. package/src/components/tabs/routes.ts +2 -0
  124. package/src/components/textarea/adjust-height.tsx +1 -1
  125. package/src/components/textarea/counter.tsx +4 -1
  126. package/src/components/textarea/resize.tsx +1 -1
  127. package/src/components/textarea/rows.tsx +1 -1
  128. package/src/components/toast/basic.tsx +13 -11
  129. package/src/react.main.tsx +6 -1
  130. package/src/scenarios/appointment-form/AppointmentForm.tsx +1 -0
  131. package/src/scenarios/disabled-interactive-elements.tsx +1 -1
  132. package/src/scenarios/focus-elements.tsx +21 -16
  133. package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx +1 -1
  134. package/src/scenarios/horizontal-scrollbar-advanced/layout.scss +19 -0
  135. package/src/scenarios/input-group-with-error.tsx +41 -0
  136. package/src/scenarios/inputs-get-value.tsx +121 -119
  137. package/src/scenarios/routes.ts +4 -2
  138. package/src/scenarios/static-form.tsx +65 -62
  139. package/src/style.scss +10 -13
  140. package/tsconfig.json +1 -2
  141. package/unocss.config.ts +213 -0
  142. package/dist/3171.js +0 -2
  143. package/dist/4262.js +0 -2
  144. package/dist/479.js +0 -2
  145. package/dist/8710.js +0 -2
  146. package/src/scenarios/horizontal-scrollbar-advanced/layout.css +0 -31
  147. /package/dist/{3171.js.LICENSE.txt → 1938.js.LICENSE.txt} +0 -0
  148. /package/dist/{4262.js.LICENSE.txt → 4556.js.LICENSE.txt} +0 -0
  149. /package/dist/{479.js.LICENSE.txt → 6812.js.LICENSE.txt} +0 -0
  150. /package/dist/{8710.js.LICENSE.txt → 8853.js.LICENSE.txt} +0 -0
package/dist/main.js.LICENSE.txt CHANGED
@@ -33,7 +33,7 @@
33
33
  */
34
34
 
35
35
  /**
36
- * @remix-run/router v1.19.0
36
+ * @remix-run/router v1.19.2
37
37
  *
38
38
  * Copyright (c) Remix Software Inc.
39
39
  *
@@ -44,7 +44,7 @@
44
44
  */
45
45
 
46
46
  /**
47
- * React Router v6.26.0
47
+ * React Router v6.26.2
48
48
  *
49
49
  * Copyright (c) Remix Software Inc.
50
50
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "2.1.7",
3
+ "version": "2.1.8-rc.0",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "repository": {
@@ -11,34 +11,33 @@
11
11
  "@leanup/stack": "1.3.54",
12
12
  "@leanup/stack-react": "1.3.54",
13
13
  "@leanup/stack-webpack": "1.3.54",
14
- "@types/node": "ts5.4",
15
- "@types/react": "18.3.3",
14
+ "@playwright/test": "1.47.1",
15
+ "@types/node": "ts5.6",
16
+ "@types/react": "18.3.4",
16
17
  "@types/react-dom": "18.3.0",
17
18
  "@unocss/preset-uno": "0.58.9",
18
19
  "@unocss/webpack": "0.58.9",
20
+ "adopted-style-sheets": "1.1.5-rc.3",
19
21
  "ajv": "8.17.1",
20
22
  "chromedriver": "124.0.4",
21
23
  "cpy-cli": "5.0.0",
22
- "eslint-plugin-jsx-a11y": "6.9.0",
23
- "eslint-plugin-react": "7.35.0",
24
+ "eslint-plugin-jsx-a11y": "6.10.0",
25
+ "eslint-plugin-react": "7.36.1",
24
26
  "formik": "2.4.6",
25
27
  "nightwatch-axe-verbose": "2.3.1",
26
28
  "npm-run-all": "4.1.5",
27
29
  "react": "18.3.1",
28
30
  "react-dom": "18.3.1",
29
- "react-router": "6.26.0",
30
- "react-router-dom": "6.26.0",
31
+ "react-router": "6.26.2",
32
+ "react-router-dom": "6.26.2",
31
33
  "rimraf": "5.0.10",
32
34
  "ts-prune": "0.10.3",
33
- "typescript": "5.5.4",
35
+ "typescript": "5.6.2",
34
36
  "world_countries_lists": "2.9.0",
35
37
  "yup": "1.4.0",
36
- "@public-ui/components": "2.1.7",
37
- "@public-ui/react": "2.1.7",
38
- "@public-ui/themes": "2.1.7"
39
- },
40
- "devDependencies": {
41
- "@playwright/test": "1.45.3"
38
+ "@public-ui/components": "2.1.8-rc.0",
39
+ "@public-ui/react": "2.1.8-rc.0",
40
+ "@public-ui/themes": "2.1.8-rc.0"
42
41
  },
43
42
  "files": [
44
43
  ".eslintignore",
package/public/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="de" dir="ltr">
2
+ <html lang="en" dir="ltr">
3
3
  <head>
4
4
  <title>Code-Samples | KoliBri – Public UI</title>
5
5
  <meta charset="UTF-8" />
package/src/@shared/_mixins.scss ADDED
@@ -0,0 +1,3 @@
1
+ @function rem($size) {
2
+ @return calc(#{$size}rem / var(--kolibri-root-font-size, 16));
3
+ }
package/src/App.tsx CHANGED
@@ -138,7 +138,7 @@ export const App: FC = () => {
138
138
  />
139
139
  )}
140
140
 
141
- <main className="p-4" id="route-container">
141
+ <main className="flex flex-col items-start p-4" id="route-container">
142
142
  {!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
143
143
  <Routes>
144
144
  {ROUTE_TREE}
package/src/components/FormWrap.tsx CHANGED
@@ -4,7 +4,7 @@ import { KolButton, KolForm } from '@public-ui/react';
4
4
 
5
5
  export const FormWrap = <P,>({ RefComponent: Component, ...props }: { RefComponent: any } & Partial<P>) => {
6
6
  return (
7
- <KolForm>
7
+ <KolForm className="w-full">
8
8
  <div className="grid gap-4">
9
9
  <Component {...props} />
10
10
  <div className="flex gap-4">
package/src/components/Navigation.tsx ADDED
@@ -0,0 +1,63 @@
1
+ import * as React from 'react';
2
+ import { KolAccordion, KolTree, KolTreeItem } from '@public-ui/react';
3
+ import { useMobile } from '../hooks/useMobile';
4
+ import type { Routes, Route } from '../shares/types';
5
+ import { useHref, useMatch, useResolvedPath } from 'react-router-dom';
6
+
7
+ type NavigationProps = {
8
+ routes: Routes;
9
+ };
10
+
11
+ function ComponentNavContainer({ children }: { children?: React.ReactNode }): React.ReactNode {
12
+ const isMobile = useMobile();
13
+
14
+ return isMobile ? (
15
+ <KolAccordion _label="All components" class="mt">
16
+ {children}
17
+ </KolAccordion>
18
+ ) : (
19
+ <div className="mt scrollable-container">{children}</div>
20
+ );
21
+ }
22
+
23
+ function TreeItem({ label, to, children }: any) {
24
+ const href = useHref(to);
25
+ const resolved = useResolvedPath(to);
26
+ const match = useMatch({ path: resolved.pathname, end: true });
27
+
28
+ return (
29
+ <KolTreeItem _label={label} _href={href} _active={!!match}>
30
+ {children}
31
+ </KolTreeItem>
32
+ );
33
+ }
34
+
35
+ function Navigation({ routes }: NavigationProps): React.ReactNode {
36
+ const buildSubTree = (parentName: string, children: Route) => {
37
+ return Object.keys(children).map((childName) => {
38
+ const isTreeExample = parentName === 'tree' && childName === 'basic/:subPage';
39
+ const subPathName = isTreeExample ? 'basic/home' : childName;
40
+ const label = isTreeExample ? 'basic' : childName;
41
+
42
+ return <TreeItem key={[parentName, childName].join('/')} label={label} to={[parentName, subPathName].join('/')}></TreeItem>;
43
+ });
44
+ };
45
+
46
+ const parentTreeElements = Object.entries(routes).map(([parentName, children]) => (
47
+ <TreeItem key={parentName} label={parentName} to={parentName}>
48
+ {buildSubTree(parentName, children)}
49
+ </TreeItem>
50
+ ));
51
+
52
+ return (
53
+ <ComponentNavContainer>
54
+ <nav>
55
+ <KolTree _label="Navigation" class="block">
56
+ {parentTreeElements}
57
+ </KolTree>
58
+ </nav>
59
+ </ComponentNavContainer>
60
+ );
61
+ }
62
+
63
+ export default Navigation;
package/src/components/Sidebar.tsx CHANGED
@@ -1,12 +1,12 @@
1
- import type { FC, PropsWithChildren } from 'react';
1
+ import type { FC } from 'react';
2
2
  import React from 'react';
3
3
 
4
- import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
4
+ import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react';
5
5
 
6
- import { useMobile } from '../hooks/useMobile';
7
6
  import { THEME_OPTIONS } from '../shares/theme';
8
7
 
9
8
  import type { Routes } from '../shares/types';
9
+ import Navigation from './Navigation';
10
10
  type Props = {
11
11
  version: string;
12
12
  theme: string;
@@ -18,17 +18,8 @@ type Props = {
18
18
  onThemeChange: (theme: unknown) => void;
19
19
  };
20
20
 
21
- const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMobile: boolean }>) =>
22
- isMobile ? (
23
- <KolAccordion _label="Alle Komponenten" class="mt">
24
- {children}
25
- </KolAccordion>
26
- ) : (
27
- <div className="mt scrollable-container">{children}</div>
28
- );
29
21
  export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
30
22
  /* KolSelect calls onChange initially by design - work around this with a state variable */
31
- const isMobile = useMobile();
32
23
 
33
24
  const getIndexOfSample = () => routeList.indexOf(sample);
34
25
  const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
@@ -37,11 +28,6 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
37
28
  onThemeChange((value as [string])[0]);
38
29
  };
39
30
 
40
- const handleLinkClick = (event: Event) => {
41
- location.replace((event.target as HTMLLinkElement).href); // KoliBri prevents the default click behavior as soon as an event listener is set, so we need to reimplement it.
42
- document.querySelector('#route-container')?.scrollIntoView({ behavior: 'smooth' });
43
- };
44
-
45
31
  const handlePreviousClick = () => {
46
32
  const currentIndex = getIndexOfSample();
47
33
  const nextIndex = currentIndex <= 0 ? routeList.length - 1 : currentIndex - 1;
@@ -74,35 +60,13 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
74
60
  <KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
75
61
  <div className="flex flex-justify-between flex-items-center mt">
76
62
  <KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
77
- <span className="text-center">
63
+ <span className="text-base text-center">
78
64
  {formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
79
65
  </span>
80
66
  <KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
81
67
  </div>
82
68
 
83
- <ComponentNavContainer isMobile={isMobile}>
84
- <nav>
85
- <ul className="m0 p0 list-inside">
86
- {Object.entries(routes).map(([parentName, children]) => (
87
- <li key={parentName} className="mt-2">
88
- {parentName}
89
- <ul className="list-inside ml p0">
90
- {Object.keys(children).map((childName) => (
91
- <li key={`${parentName}/${childName}`}>
92
- {/* Handle special case for nested routes in tree example - this might need a proper refactoring in the future */}
93
- {parentName === 'tree' && childName === 'basic/:subPage' ? (
94
- <KolLink _label="basic" _href={`#/${parentName}/basic/home`} _on={{ onClick: handleLinkClick }} />
95
- ) : (
96
- <KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
97
- )}
98
- </li>
99
- ))}
100
- </ul>
101
- </li>
102
- ))}
103
- </ul>
104
- </nav>
105
- </ComponentNavContainer>
69
+ <Navigation routes={routes} />
106
70
  </div>
107
71
  </aside>
108
72
  );
package/src/components/abbr/basic.tsx CHANGED
@@ -14,32 +14,32 @@ export const AbbrBasic: FC = () => (
14
14
  I am <KolAbbr _label="zum Beispiel">e.g.</KolAbbr> an abbreviation.
15
15
  </p>
16
16
  <p>
17
- I am{' '}
17
+ I am&nbsp;
18
18
  <KolAbbr _label="zum Beispiel" _tooltipAlign="right">
19
19
  e.g.
20
- </KolAbbr>{' '}
21
- an abbreviation (right).
20
+ </KolAbbr>
21
+ &nbsp;an abbreviation (right).
22
22
  </p>
23
23
  <p>
24
- I am{' '}
24
+ I am&nbsp;
25
25
  <KolAbbr _label="zum Beispiel" _tooltipAlign="bottom">
26
26
  e.g.
27
- </KolAbbr>{' '}
28
- an abbreviation (below).
27
+ </KolAbbr>
28
+ &nbsp;an abbreviation (below).
29
29
  </p>
30
30
  <p>
31
- I am{' '}
31
+ I am&nbsp;
32
32
  <KolAbbr _label="zum Beispiel" _tooltipAlign="left">
33
33
  e.g.
34
- </KolAbbr>{' '}
35
- an abbreviation (left).
34
+ </KolAbbr>
35
+ &nbsp;an abbreviation (left).
36
36
  </p>
37
37
  <p>
38
- I am{' '}
38
+ I am&nbsp;
39
39
  <KolAbbr _label="zum Beispiel" _tooltipAlign="top">
40
40
  e.g.
41
- </KolAbbr>{' '}
42
- an abbreviation (top).
41
+ </KolAbbr>
42
+ &nbsp;an abbreviation (top).
43
43
  </p>
44
44
  </>
45
45
  );
package/src/components/alert/card-msg.tsx CHANGED
@@ -13,6 +13,8 @@ export const AlertCardMsg: FC = () => (
13
13
  </p>
14
14
  </SampleDescription>
15
15
 
16
- <AlertVariants variant="card" />
16
+ <section className="w-full">
17
+ <AlertVariants variant="card" />
18
+ </section>
17
19
  </>
18
20
  );
package/src/components/alert/html.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import { KolAlert } from '@public-ui/react';
3
+ import { KolAlert, KolHeading } from '@public-ui/react';
4
4
  import { SampleDescription } from '../SampleDescription';
5
5
  import type { FC } from 'react';
6
6
 
@@ -12,7 +12,9 @@ export const AlertHtml: FC = () => (
12
12
 
13
13
  <div>
14
14
  <KolAlert _label="Output of HTML code in the alert" _type="info">
15
- <h2 className="mt-2 mb-3">An H2 heading is output here</h2>
15
+ <div className="mt-2 mb-3">
16
+ <KolHeading _level={2} _label="An H2 heading is output here" />
17
+ </div>
16
18
  <div className="grid gap-4 sm:grid-cols-2">
17
19
  <div>
18
20
  <h3>Text in a left-hand column</h3>
package/src/components/button/baselined.tsx CHANGED
@@ -11,7 +11,7 @@ export const ButtonBaselined: FC = () => (
11
11
  <p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
12
12
  </SampleDescription>
13
13
 
14
- <div className="inline-block">
14
+ <div className="flex">
15
15
  <KolButton _label="Label-Text"></KolButton>
16
16
  <KolButton _label="Label-Text"></KolButton>
17
17
  <KolButton _label="Label-Text"></KolButton>
package/src/components/button/partials/variants.tsx CHANGED
@@ -1,26 +1,24 @@
1
1
  import React from 'react';
2
2
 
3
3
  import { ButtonCases } from './cases';
4
+ import { KolHeading } from '@public-ui/react';
5
+ import type { Components } from '@public-ui/components';
4
6
 
5
7
  export const ButtonVariants = function ButtonVariant() {
8
+ const examples: { label: string; buttonProps: Partial<Components.KolButton> }[] = [
9
+ { label: 'Button', buttonProps: {} },
10
+ { label: 'Button (disabled)', buttonProps: { _disabled: true } },
11
+ { label: 'Button (hideLabel)', buttonProps: { _hideLabel: true } },
12
+ { label: 'Button (disabled, hideLabel)', buttonProps: { _disabled: true, _hideLabel: true } },
13
+ ];
6
14
  return (
7
- <div className="grid gap-4">
8
- <section>
9
- <h2>Button</h2>
10
- <ButtonCases />
11
- </section>
12
- <section>
13
- <h2>Button (disabled)</h2>
14
- <ButtonCases _disabled />
15
- </section>
16
- <section>
17
- <h2>Button (hideLabel)</h2>
18
- <ButtonCases _hideLabel />
19
- </section>
20
- <section>
21
- <h2>Button (disabled, hideLabel)</h2>
22
- <ButtonCases _disabled _hideLabel />
23
- </section>
15
+ <div className="grid gap-8">
16
+ {examples.map(({ label, buttonProps }, index) => (
17
+ <section key={index} className="grid gap-4">
18
+ <KolHeading _level={2} _label={label} />
19
+ <ButtonCases {...buttonProps} />
20
+ </section>
21
+ ))}
24
22
  </div>
25
23
  );
26
24
  };
package/src/components/button/width.tsx CHANGED
@@ -19,14 +19,14 @@ export const ButtonWidth: FC = () => (
19
19
  </SampleDescription>
20
20
 
21
21
  <div className="grid gap-14">
22
- <div className="flex flex-wrap gap-14">
22
+ <div className="flex flex-wrap gap-4">
23
23
  <KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
24
24
  <KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
25
25
  <KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
26
26
  <KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
27
27
  <KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
28
28
  </div>
29
- <div className="flex flex-wrap gap-14">
29
+ <div className="flex flex-wrap gap-4">
30
30
  <KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
31
31
  <KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
32
32
  <KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
package/src/components/button-link/basic.tsx CHANGED
@@ -13,14 +13,14 @@ export const ButtonLinkBasic: FC = () => (
13
13
  such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.
14
14
  </p>
15
15
  </SampleDescription>
16
- <div>
16
+ <section className="text-base">
17
17
  <p>
18
18
  In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
19
19
  <strong>inline element</strong>.
20
20
  </p>
21
21
  <p>
22
22
  In this paragraph, a link is inserted that is rendered as an inline-block element.
23
- <KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
23
+ <KolButtonLink className="m-4" style={{ display: 'inline-block', border: '1px dotted' }} _label="Simple Link" />. This allows you to assign width,
24
24
  height, and other properties to it using CSS styles.
25
25
  <br />
26
26
  <br />
@@ -31,6 +31,6 @@ export const ButtonLinkBasic: FC = () => (
31
31
  <p>
32
32
  <KolButtonLink _label="Disabled ButtonLink" _disabled />
33
33
  </p>
34
- </div>
34
+ </section>
35
35
  </>
36
36
  );
package/src/components/button-link/image.tsx CHANGED
@@ -13,7 +13,6 @@ export const ButtonLinkImage: FC = () => (
13
13
 
14
14
  <div className="grid gap-4">
15
15
  <KolButtonLink _label="I am a link that is rendered as text" />
16
- <br />
17
16
  <KolButtonLink _label="">
18
17
  <img alt="Presentation of the KoliBri theming" slot="expert" src="abgrenzung.jpg" width="300" />
19
18
  </KolButtonLink>
package/src/components/card/basic.tsx CHANGED
@@ -11,7 +11,7 @@ export const CardBasic: FC = () => (
11
11
  <p>KolCard shows a card with title and slot content. The second sample features a close button.</p>
12
12
  </SampleDescription>
13
13
 
14
- <div className="grid grid-cols-2 gap-4">
14
+ <div className="w-full grid grid-cols-2 gap-4">
15
15
  <KolCard _label="Card with title and content">
16
16
  <div>Card contents.</div>
17
17
  </KolCard>
package/src/components/combobox/partials/variants.tsx CHANGED
@@ -5,7 +5,7 @@ import { ComboboxCases } from './cases';
5
5
 
6
6
  export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
7
7
  return (
8
- <div className="grid md:grid-cols-2 gap-4">
8
+ <div className="w-full grid md:grid-cols-2 gap-4">
9
9
  <fieldset>
10
10
  <legend>Text</legend>
11
11
  <ComboboxCases {...props} />
package/src/components/details/basic.tsx CHANGED
@@ -14,7 +14,7 @@ export const DetailsBasic: FC = () => (
14
14
  </p>
15
15
  </SampleDescription>
16
16
 
17
- <p className="grid gap-4">
17
+ <section className="grid gap-4">
18
18
  <KolDetails _label="Closed initially">
19
19
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
20
20
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -30,6 +30,6 @@ export const DetailsBasic: FC = () => (
30
30
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
31
31
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
32
32
  </KolDetails>
33
- </p>
33
+ </section>
34
34
  </>
35
35
  );
package/src/components/form/basic.tsx CHANGED
@@ -9,7 +9,7 @@ export const FormBasic: FC = () => (
9
9
  <p>KolForm renders a form around the input components provided in a slot. This sample shows a basic form with three input fields.</p>
10
10
  </SampleDescription>
11
11
 
12
- <KolForm>
12
+ <KolForm className="w-full">
13
13
  <div className="grid gap-2">
14
14
  <KolInputText id="input1" _label="Input 1" />
15
15
  <KolInputText id="input2" _label="Input 2" />
package/src/components/form/error-list.tsx CHANGED
@@ -10,6 +10,7 @@ export const FormErrorList: FC = () => (
10
10
  </SampleDescription>
11
11
 
12
12
  <KolForm
13
+ className="w-full"
13
14
  _errorList={[
14
15
  {
15
16
  message: 'Error in Input 2',
package/src/components/input-checkbox/partials/variants.tsx CHANGED
@@ -5,15 +5,27 @@ import { InputCheckboxCases } from './cases';
5
5
  import type { Components } from '@public-ui/components';
6
6
  export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
7
7
  return (
8
- <div className="grid md:grid-cols-2 gap-4">
9
- <fieldset>
10
- <legend>Checkbox</legend>
11
- <InputCheckboxCases {...props} />
12
- </fieldset>
13
- <fieldset>
14
- <legend>Checkbox (hideLabel)</legend>
15
- <InputCheckboxCases ref={ref} {...props} _hideLabel />
16
- </fieldset>
17
- </div>
8
+ <>
9
+ <div className="grid md:grid-cols-2 gap-4">
10
+ <fieldset>
11
+ <legend>Label align &quot;left&quot; with label</legend>
12
+ <InputCheckboxCases {...props} _labelAlign="left" />
13
+ </fieldset>
14
+ <fieldset>
15
+ <legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
16
+ <InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
17
+ </fieldset>
18
+ </div>
19
+ <div className="grid md:grid-cols-2 gap-4">
20
+ <fieldset>
21
+ <legend>Label align &quot;right&quot; with label</legend>
22
+ <InputCheckboxCases {...props} />
23
+ </fieldset>
24
+ <fieldset>
25
+ <legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
26
+ <InputCheckboxCases ref={ref} {...props} _hideLabel />
27
+ </fieldset>
28
+ </div>
29
+ </>
18
30
  );
19
31
  });
package/src/components/input-date/reset.tsx CHANGED
@@ -14,7 +14,7 @@ export const InputDateReset = () => {
14
14
  </p>
15
15
  </SampleDescription>
16
16
 
17
- <KolInputDate ref={dateRef} _label="Resettable Input Date" _value="2024-02-10" />
17
+ <KolInputDate className="w-full" ref={dateRef} _label="Resettable Input Date" _value="2024-02-10" />
18
18
  <KolButton className="mt" _label={'Reset'} _on={{ onClick: () => dateRef.current?.reset() }} />
19
19
  </>
20
20
  );
package/src/components/input-password/show-password.tsx CHANGED
@@ -16,7 +16,7 @@ export const InputPasswordShowPassword: FC = () => {
16
16
  </p>
17
17
  </SampleDescription>
18
18
 
19
- <KolForm>
19
+ <KolForm className="w-full">
20
20
  <KolInputPassword _placeholder="With 'Show password' button" _label="Password" ref={passwordRef} className="block" _variant="visibility-toggle" />
21
21
  <KolInputPassword
22
22
  _placeholder="With 'Show password' button and disabled"
package/src/components/input-text/partials/cases.tsx CHANGED
@@ -38,7 +38,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
38
38
  <KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
39
39
  <KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'warning', _description: 'Small warning' }} />
40
40
  <KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'success', _description: 'Success message' }} />
41
- <KolInputText {...props} _placeholder="Placeholder" _label="With counter" _hasCounter _maxLength={10} />
41
+ <KolInputText {...props} _placeholder="Placeholder" _label="With counter" _hasCounter _maxLength={10} _value="Lorem Ipsum" />
42
42
  <KolInputText {...props} _placeholder="Placeholder" _readOnly _label="First name (text, readonly)" />
43
43
  <KolInputText {...props} _value="Value" _readOnly _label="First name (text, readonly)" />
44
44
  <KolInputText {...props} _placeholder="Placeholder" _disabled _label="First name (text, disabled)" />