@skf-design-system/ui-components 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/react/skf-progress/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/progress/progress.js';
+const tagName = 'skf-progress';
+Component.define('skf-progress');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfProgress',
+});
+export default reactWrapper;

package/dist/react/skf-tab/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/tab/tab.js';
+import { type SkfTab } from '../../components/tab/tab.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfTabSelect: EventName<Event & {
+        target: SkfTab;
+    }>;
+    onClick: EventName<Event & {
+        target: SkfTab;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-tab/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab/tab.js';
+import {} from '../../components/tab/tab.js';
+import {} from '@lit/react';
+const tagName = 'skf-tab';
+Component.define('skf-tab');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfTabSelect: 'skf-tab-select',
+        onClick: 'click',
+    },
+    displayName: 'SkfTab',
+});
+export default reactWrapper;

package/dist/react/skf-tab-group/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/tab-group/tab-group.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-tab-group/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab-group/tab-group.js';
+const tagName = 'skf-tab-group';
+Component.define('skf-tab-group');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfTabGroup',
+});
+export default reactWrapper;

package/dist/react/skf-tab-panel/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/tab-panel/tab-panel.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-tab-panel/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab-panel/tab-panel.js';
+const tagName = 'skf-tab-panel';
+Component.define('skf-tab-panel');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfTabPanel',
+});
+export default reactWrapper;

package/dist/react/skf-toast/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/toast/toast.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-toast/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast/toast.js';
+const tagName = 'skf-toast';
+Component.define('skf-toast');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfToast',
+});
+export default reactWrapper;

package/dist/react/skf-toast-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/toast-wrapper/toast-wrapper.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-toast-wrapper/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast-wrapper/toast-wrapper.js';
+const tagName = 'skf-toast-wrapper';
+Component.define('skf-toast-wrapper');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfToastWrapper',
+});
+export default reactWrapper;

package/dist/styles/component.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-const o = e`
+const t = e`
 	@layer reset, globals, components, overrides;
 
 	@layer reset {
@@ -24,6 +24,19 @@ const o = e`
 	}
 
 	@layer globals {
+		:host {
+			--skf-is-tablet: false;
+			--skf-box-spacing: var(--skf-spacing-100);
+
+			/* mq-token needed here */
+			@media screen and (width >= 768px) {
+				--skf-is-tablet: true;
+				--skf-box-spacing: var(--skf-spacing-150);
+			}
+
+			color: var(--skf-text-color-primary);
+		}
+
 		:is(button, input, label, select) {
 			cursor: pointer;
 
@@ -35,5 +48,5 @@ const o = e`
 	}
 `;
 export {
-  o as default
+  t as default
 };

package/dist/styles/form-field.styles.js

@@ -6,11 +6,15 @@ const i = e`
 		}
 
 		/* stylelint-disable no-descending-specificity */
-		#field {
+		#root {
 			color: var(--_skf-field-color, var(--skf-text-color-primary));
 			display: grid;
 			gap: var(--skf-spacing-25);
 
+			:host([disabled]) & {
+				--_skf-field-color: var(--skf-interactive-text-color-disabled);
+			}
+
 			:host([size='sm']) & {
 				font-size: var(--skf-font-size-75);
 				font-weight: var(--skf-font-weight-medium);