@dsn-starter-kit/components-react 1.0.0

package/dist/TextArea/TextArea.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './TextArea.css';
+/**
+ * Text Area component
+ * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextArea placeholder="Enter your bio" rows={4} />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="bio">Biography</FormFieldLabel>
+ * <TextArea id="bio" rows={6} />
+ *
+ * // Disabled
+ * <TextArea disabled value="Cannot edit" rows={3} />
+ *
+ * // Invalid
+ * <TextArea invalid aria-invalid="true" aria-describedby="error" rows={4} />
+ *
+ * // Read-only
+ * <TextArea readOnly value="View only" rows={3} />
+ * ```
+ */
+export const TextArea = React.forwardRef(({ className, invalid, width, rows = 4, ...props }, ref) => {
+    const classes = classNames('dsn-text-area', width && `dsn-text-area--width-${width}`, className);
+    return (_jsx("textarea", { ref: ref, className: classes, rows: rows, "aria-invalid": invalid || undefined, ...props }));
+});
+TextArea.displayName = 'TextArea';
+//# sourceMappingURL=TextArea.js.map

package/dist/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,gBAAgB,CAAC;AAqBxB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzD,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,KAAK,IAAI,wBAAwB,KAAK,EAAE,EACxC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,kBACI,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/TextArea/index.d.ts

@@ -0,0 +1,3 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';
+//# sourceMappingURL=index.d.ts.map

package/dist/TextArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/TextArea/index.js

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+//# sourceMappingURL=index.js.map

package/dist/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/TextInput/TextInput.css

@@ -0,0 +1,122 @@
+/**
+ * TextInput Component Styles for React
+ * Re-exports the base TextInput styles from components-html
+ */
+
+/**
+ * Text Input Component
+ * Single-line text input with support for various states
+ *
+ * Usage:
+ * <input type="text" class="dsn-text-input" />
+ */
+
+.dsn-text-input {
+  /* Typography */
+  font-family: var(--dsn-text-input-font-family);
+  font-size: var(--dsn-text-input-font-size);
+  font-weight: var(--dsn-text-input-font-weight);
+  line-height: var(--dsn-text-input-line-height);
+
+  /* Colors */
+  color: var(--dsn-text-input-color);
+  background-color: var(--dsn-text-input-background-color);
+
+  /* Border */
+  border: var(--dsn-text-input-border-width) solid
+    var(--dsn-text-input-border-color);
+  border-radius: var(--dsn-text-input-border-radius);
+
+  /* Spacing */
+  padding-block-start: var(--dsn-text-input-padding-block-start);
+  padding-block-end: var(--dsn-text-input-padding-block-end);
+  padding-inline-start: var(--dsn-text-input-padding-inline-start);
+  padding-inline-end: var(--dsn-text-input-padding-inline-end);
+
+  /* Sizing */
+  min-block-size: var(--dsn-text-input-min-block-size);
+  min-inline-size: var(--dsn-text-input-min-inline-size);
+  inline-size: 100%;
+  max-inline-size: var(--dsn-form-control-max-inline-size);
+
+  /* Display */
+  display: block;
+  box-sizing: border-box;
+
+  /* Transitions */
+  transition-property: border-color, box-shadow, background-color;
+  transition-duration: var(--dsn-transition-duration-normal);
+  transition-timing-function: var(--dsn-transition-easing-default);
+}
+
+/* Placeholder */
+.dsn-text-input::placeholder {
+  color: var(--dsn-text-input-placeholder-color);
+  opacity: 1;
+}
+
+/* Hover state */
+.dsn-text-input:hover:not(:disabled):not(:read-only) {
+  box-shadow: inset 0 0 0 var(--dsn-text-input-hover-box-shadow-spread)
+    var(--dsn-text-input-hover-box-shadow-color);
+}
+
+/* Focus state */
+.dsn-text-input:focus {
+  outline: none;
+  background-color: var(--dsn-text-input-focus-background-color);
+  border-color: var(--dsn-text-input-focus-border-color);
+  box-shadow: inset 0 0 0 var(--dsn-text-input-focus-box-shadow-spread)
+    var(--dsn-text-input-focus-box-shadow-color);
+}
+
+/* Disabled state */
+.dsn-text-input:disabled {
+  color: var(--dsn-text-input-disabled-color);
+  background-color: var(--dsn-text-input-disabled-background-color);
+  border-color: var(--dsn-text-input-disabled-border-color);
+  cursor: not-allowed;
+}
+
+/* Read-only state */
+.dsn-text-input:read-only {
+  color: var(--dsn-text-input-read-only-color);
+  background-color: var(--dsn-text-input-read-only-background-color);
+  border-color: var(--dsn-text-input-read-only-border-color);
+  cursor: default;
+}
+
+/* Invalid state (using aria-invalid or :invalid) */
+.dsn-text-input:invalid,
+.dsn-text-input[aria-invalid='true'] {
+  background-color: var(--dsn-text-input-invalid-background-color);
+  border-color: var(--dsn-text-input-invalid-border-color);
+  box-shadow: inset 0 0 0 var(--dsn-text-input-invalid-box-shadow-spread)
+    var(--dsn-text-input-invalid-box-shadow-color);
+}
+
+/* Width variants */
+.dsn-text-input--width-xs {
+  max-inline-size: var(--dsn-form-control-width-xs);
+}
+
+.dsn-text-input--width-sm {
+  max-inline-size: var(--dsn-form-control-width-sm);
+}
+
+.dsn-text-input--width-md {
+  max-inline-size: var(--dsn-form-control-width-md);
+}
+
+.dsn-text-input--width-lg {
+  max-inline-size: var(--dsn-form-control-width-lg);
+}
+
+.dsn-text-input--width-xl {
+  max-inline-size: var(--dsn-form-control-width-xl);
+}
+
+.dsn-text-input--width-full {
+  max-inline-size: var(--dsn-form-control-width-full);
+}
+

package/dist/TextInput/TextInput.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import './TextInput.css';
+export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Whether the input is in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Width variant for the input
+     * @default undefined (uses default max-width from form-control)
+     */
+    width?: FormControlWidth;
+}
+/**
+ * Text Input component
+ * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextInput placeholder="Enter your name" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="email">Email</FormFieldLabel>
+ * <TextInput id="email" type="email" />
+ *
+ * // Disabled
+ * <TextInput disabled value="Read only value" />
+ *
+ * // Invalid
+ * <TextInput invalid aria-invalid="true" aria-describedby="error" />
+ *
+ * // Read-only
+ * <TextInput readOnly value="Cannot edit this" />
+ * ```
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,yFAkBrB,CAAC"}

package/dist/TextInput/TextInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './TextInput.css';
+/**
+ * Text Input component
+ * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextInput placeholder="Enter your name" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="email">Email</FormFieldLabel>
+ * <TextInput id="email" type="email" />
+ *
+ * // Disabled
+ * <TextInput disabled value="Read only value" />
+ *
+ * // Invalid
+ * <TextInput invalid aria-invalid="true" aria-describedby="error" />
+ *
+ * // Read-only
+ * <TextInput readOnly value="Cannot edit this" />
+ * ```
+ */
+export const TextInput = React.forwardRef(({ className, invalid, width, type = 'text', ...props }, ref) => {
+    const classes = classNames('dsn-text-input', width && `dsn-text-input--width-${width}`, className);
+    return (_jsx("input", { ref: ref, type: type, className: classes, "aria-invalid": invalid || undefined, ...props }));
+});
+TextInput.displayName = 'TextInput';
+//# sourceMappingURL=TextInput.js.map

package/dist/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,iBAAiB,CAAC;AAqBzB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,CACxB,gBAAgB,EAChB,KAAK,IAAI,yBAAyB,KAAK,EAAE,EACzC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,kBACJ,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/TextInput/index.d.ts

@@ -0,0 +1,3 @@
+export { TextInput } from './TextInput';
+export type { TextInputProps } from './TextInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/TextInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/TextInput/index.js

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+//# sourceMappingURL=index.js.map

package/dist/TextInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/TimeInput/TimeInput.css

@@ -0,0 +1,37 @@
+/**
+ * TimeInput Component Styles
+ * Fixed-width wrapper positions the Button (subtle, small, icon-only) at inline-end inside the input.
+ * The input uses dsn-text-input base styles with extra padding-inline-end
+ * to prevent typed text from overlapping the button.
+ * Button hover/focus/color states come from the Button component itself.
+ */
+
+/* Wrapper — fixed sm width, positions clock button absolutely inside the input */
+.dsn-time-input-wrapper {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--dsn-form-control-width-sm);
+}
+
+/* Clock button — centered vertically, positioned at inline-end with reduced margin */
+.dsn-time-input__button {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--dsn-time-input-button-inset-inline-end);
+  transform: translateY(-50%);
+}
+
+/* Input — extra padding-inline-end to make room for the clock button */
+/* Hide the native browser clock/time picker indicator */
+.dsn-time-input {
+  padding-inline-end: var(--dsn-time-input-padding-inline-end-with-icon);
+}
+
+.dsn-time-input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.dsn-time-input::-webkit-inner-spin-button {
+  display: none;
+}

package/dist/TimeInput/TimeInput.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import '../TextInput/TextInput.css';
+import './TimeInput.css';
+export interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Whether the input is in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Time Input component
+ * Time input with an interactive clock button at inline-end that opens the native time picker.
+ * Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TimeInput />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="time">Tijd</FormFieldLabel>
+ * <TimeInput id="time" />
+ *
+ * // With default value
+ * <TimeInput defaultValue="14:30" />
+ *
+ * // Invalid state
+ * <TimeInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TimeInput.d.ts.map

package/dist/TimeInput/TimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,yFAyDrB,CAAC"}

package/dist/TimeInput/TimeInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import '../TextInput/TextInput.css';
+import './TimeInput.css';
+/**
+ * Time Input component
+ * Time input with an interactive clock button at inline-end that opens the native time picker.
+ * Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TimeInput />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="time">Tijd</FormFieldLabel>
+ * <TimeInput id="time" />
+ *
+ * // With default value
+ * <TimeInput defaultValue="14:30" />
+ *
+ * // Invalid state
+ * <TimeInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export const TimeInput = React.forwardRef(({ className, invalid, disabled, readOnly, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    // Merge external ref with internal ref
+    const handleRef = React.useCallback((node) => {
+        inputRef.current =
+            node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const handleButtonClick = () => {
+        if (inputRef.current && 'showPicker' in inputRef.current) {
+            inputRef.current.showPicker();
+        }
+    };
+    const inputClasses = classNames('dsn-text-input', 'dsn-time-input', className);
+    return (_jsxs("div", { className: "dsn-time-input-wrapper", children: [_jsx("input", { ref: handleRef, type: "time", className: inputClasses, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readOnly, ...props }), !disabled && !readOnly && (_jsx(Button, { variant: "subtle", size: "small", iconOnly: true, iconStart: _jsx(Icon, { name: "clock", "aria-hidden": true }), className: "dsn-time-input__button", onClick: handleButtonClick, children: "Tijdkiezer openen" }))] }));
+});
+TimeInput.displayName = 'TimeInput';
+//# sourceMappingURL=TimeInput.js.map

package/dist/TimeInput/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AAkBzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,uCAAuC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,IAA6B,EAAE,EAAE;QAC/B,QAA4D,CAAC,OAAO;YACnE,IAAI,CAAC;QACP,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;QACZ,CAAC;aAAM,IAAI,GAAG,EAAE,CAAC;YACd,GAAuD,CAAC,OAAO;gBAC9D,IAAI,CAAC;QACT,CAAC;IACH,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,QAAQ,CAAC,OAAO,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACzD,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,YAAY,kBACT,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACT,EACD,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CACzB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,wBAAe,EAC5C,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,iBAAiB,kCAGnB,CACV,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/TimeInput/index.d.ts

@@ -0,0 +1,3 @@
+export { TimeInput } from './TimeInput';
+export type { TimeInputProps } from './TimeInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/TimeInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/TimeInput/index.js

@@ -0,0 +1,2 @@
+export { TimeInput } from './TimeInput';
+//# sourceMappingURL=index.js.map

package/dist/TimeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TimeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/UnorderedList/UnorderedList.css

@@ -0,0 +1,38 @@
+/**
+ * UnorderedList Component Styles for React
+ * Re-exports the base UnorderedList styles from components-html
+ */
+
+/**
+ * Unordered List Component
+ * Uses component tokens for consistent styling.
+ * Bullet markers are colored via the marker-color token.
+ */
+
+.dsn-unordered-list {
+  font-family: var(--dsn-unordered-list-font-family);
+  font-weight: var(--dsn-unordered-list-font-weight);
+  color: var(--dsn-unordered-list-color);
+  font-size: var(--dsn-unordered-list-font-size);
+  line-height: var(--dsn-unordered-list-line-height);
+  max-inline-size: var(--dsn-unordered-list-max-inline-size);
+  padding-inline-start: var(--dsn-unordered-list-padding-inline-start);
+  margin-block-start: 0;
+  margin-block-end: var(--dsn-unordered-list-margin-block-end);
+  list-style-type: disc;
+}
+
+/* Colored bullet markers */
+.dsn-unordered-list ::marker {
+  color: var(--dsn-unordered-list-marker-color);
+}
+
+/* Spacing between list items */
+.dsn-unordered-list > li {
+  margin-block-end: var(--dsn-unordered-list-gap);
+}
+
+.dsn-unordered-list > li:last-child {
+  margin-block-end: 0;
+}
+

package/dist/UnorderedList/UnorderedList.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import './UnorderedList.css';
+export interface UnorderedListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * List content (li elements)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Unordered list component with accent-colored bullet markers
+ *
+ * @example
+ * ```tsx
+ * <UnorderedList>
+ *   <li>First item</li>
+ *   <li>Second item</li>
+ *   <li>Third item</li>
+ * </UnorderedList>
+ * ```
+ */
+export declare const UnorderedList: React.ForwardRefExoticComponent<UnorderedListProps & React.RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=UnorderedList.d.ts.map

package/dist/UnorderedList/UnorderedList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnorderedList.d.ts","sourceRoot":"","sources":["../../src/UnorderedList/UnorderedList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAChF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,6FAWxB,CAAC"}

package/dist/UnorderedList/UnorderedList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './UnorderedList.css';
+/**
+ * Unordered list component with accent-colored bullet markers
+ *
+ * @example
+ * ```tsx
+ * <UnorderedList>
+ *   <li>First item</li>
+ *   <li>Second item</li>
+ *   <li>Third item</li>
+ * </UnorderedList>
+ * ```
+ */
+export const UnorderedList = React.forwardRef(({ className, children, ...props }, ref) => {
+    const classes = classNames('dsn-unordered-list', className);
+    return (_jsx("ul", { ref: ref, className: classes, ...props, children: children }));
+});
+UnorderedList.displayName = 'UnorderedList';
+//# sourceMappingURL=UnorderedList.js.map

package/dist/UnorderedList/UnorderedList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnorderedList.js","sourceRoot":"","sources":["../../src/UnorderedList/UnorderedList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,qBAAqB,CAAC;AAc7B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CACL,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACxC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/UnorderedList/index.d.ts

@@ -0,0 +1,3 @@
+export { UnorderedList } from './UnorderedList';
+export type { UnorderedListProps } from './UnorderedList';
+//# sourceMappingURL=index.d.ts.map

package/dist/UnorderedList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UnorderedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/UnorderedList/index.js

@@ -0,0 +1,2 @@
+export { UnorderedList } from './UnorderedList';
+//# sourceMappingURL=index.js.map

package/dist/UnorderedList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/UnorderedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}