@lux-design-system/components-react 1.0.0-alpha.2 → 1.0.0

package/dist/src/alert/Alert.d.ts

@@ -0,0 +1,7 @@
+import { AlertProps as UtrechtAlertProps, AlertType as UtrechtAlertType } from '@utrecht/component-library-react/dist/css-module';
+type AlertType = Exclude<UtrechtAlertType, 'ok'> | 'success';
+export interface LuxAlertProps extends Omit<UtrechtAlertProps, 'type'> {
+    type: AlertType;
+}
+export declare const LuxAlert: (props: LuxAlertProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/button/Button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps as UtrechtButtonProps } from '@utrecht/component-library-react/dist/css-module';
+type IconPosition = 'start' | 'end';
+type Size = 'small';
+export type LuxButtonProps = UtrechtButtonProps & {
+    size?: Size;
+    iconPosition?: IconPosition;
+};
+export declare const LuxButton: (props: LuxButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxProps as UtrechtCheckboxProps } from '@utrecht/component-library-react/dist/css-module';
+export type LuxCheckboxProps = Omit<UtrechtCheckboxProps, 'appearance'> & {
+    withTarget?: boolean;
+};
+export declare const LuxCheckbox: import('react').ForwardRefExoticComponent<Omit<UtrechtCheckboxProps, "appearance"> & {
+    withTarget?: boolean;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/src/document/Document.d.ts

@@ -0,0 +1,5 @@
+import { DocumentProps } from '@utrecht/component-library-react/dist/css-module';
+export declare const LuxDocument: import('react').ForwardRefExoticComponent<DocumentProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export type LuxDocumentProps = DocumentProps;

package/dist/src/form-field/FormField.d.ts

@@ -0,0 +1,3 @@
+import { FormFieldProps as UtrechtFormFieldProps } from '@utrecht/component-library-react/dist/css-module';
+export declare const LuxFormField: import('react').ForwardRefExoticComponent<UtrechtFormFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export type LuxFormFieldProps = UtrechtFormFieldProps;

package/dist/src/form-field-checkbox/FormFieldCheckbox.d.ts

@@ -0,0 +1,11 @@
+import { LuxCheckboxProps } from '../checkbox/Checkbox';
+import { LuxFormFieldProps } from '../form-field/FormField';
+import { LuxFormFieldDescriptionAppearance } from '../form-field-description/FormFieldDescription';
+export type LuxFormFieldCheckboxProps = LuxFormFieldProps & LuxCheckboxProps & {
+    checked?: boolean;
+    disabled?: boolean;
+    appearance?: LuxFormFieldDescriptionAppearance;
+    withTarget?: boolean;
+    distanced?: boolean;
+};
+export declare const LuxFormFieldCheckbox: ({ label, description, errorMessage, checked, disabled, invalid, appearance, withTarget, distanced, children, ...restProps }: LuxFormFieldCheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/form-field-description/FormFieldDescription.d.ts

@@ -0,0 +1,9 @@
+import { FormFieldDescriptionProps as UtrechtFormFieldDescriptionProps } from '@utrecht/component-library-react/dist/css-module';
+export type LuxFormFieldDescriptionAppearance = 'valid' | 'invalid';
+export interface LuxFormFieldDescriptionProps extends Omit<UtrechtFormFieldDescriptionProps, 'valid' | 'invalid'> {
+    appearance?: LuxFormFieldDescriptionAppearance;
+}
+export declare const LuxFormFieldDescription: {
+    (props: LuxFormFieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/form-field-error-message/FormFieldErrorMessage.d.ts

@@ -0,0 +1,9 @@
+import { FormFieldErrorMessageProps as UtrechtFormFieldErrorMessageProps } from '@utrecht/component-library-react/dist/css-module';
+export type LuxFormFieldErrorMessageProps = UtrechtFormFieldErrorMessageProps & {
+    distanced?: boolean;
+};
+export declare const LuxFormFieldErrorMessage: import('react').ForwardRefExoticComponent<UtrechtFormFieldErrorMessageProps & {
+    distanced?: boolean;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLParagraphElement>>;

package/dist/src/form-field-label/FormFieldLabel.d.ts

@@ -0,0 +1,9 @@
+import { LabelHTMLAttributes } from 'react';
+export interface LuxFormFieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    type?: 'checkbox' | 'radio';
+    disabled?: boolean;
+    checked?: boolean;
+}
+export declare const LuxFormFieldLabel: import('react').ForwardRefExoticComponent<LuxFormFieldLabelProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/src/form-field-radio-group/FormFieldRadioGroup.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+type RadioOptionValue = string | number;
+interface RadioOption {
+    value: RadioOptionValue;
+    label: string;
+    disabled?: boolean;
+    description?: React.ReactNode;
+}
+export interface LuxFormFieldRadioGroupProps {
+    name: string;
+    label: string;
+    description?: string;
+    errorMessage?: string;
+    options: RadioOption[];
+    value?: RadioOptionValue;
+    invalid?: boolean;
+    required?: boolean;
+    className?: string;
+    onChange?: (value: string) => void;
+}
+export declare const LuxFormFieldRadioGroup: React.ForwardRefExoticComponent<LuxFormFieldRadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+export {};

package/dist/src/form-field-radio-option/FormFieldRadioOption.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { LuxRadioButtonProps } from '../radio-button/RadioButton';
+export type LuxFormFieldRadioOptionProps = LuxRadioButtonProps & {
+    label: string | React.ReactNode;
+    description?: React.ReactNode;
+    checked?: boolean;
+};
+export declare const LuxFormFieldRadioOption: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+} & {
+    invalid?: boolean;
+    name: string;
+    checked?: boolean;
+} & {
+    label: string | React.ReactNode;
+    description?: React.ReactNode;
+    checked?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/src/form-field-select/FormFieldSelect.d.ts

@@ -0,0 +1,14 @@
+import { FormFieldProps as UtrechtFormFieldProps } from '@utrecht/component-library-react/dist/css-module';
+import { Ref } from 'react';
+import { LuxFormFieldDescriptionAppearance } from '../form-field-description/FormFieldDescription';
+import { LuxSelectOptionProps, LuxSelectProps } from '../select/Select';
+export type LuxFormFieldSelectOptionsProps = LuxSelectOptionProps & {
+    label?: string | number;
+};
+export interface LuxFormFieldSelectProps extends Omit<UtrechtFormFieldProps, 'type' | 'onBlur' | 'onChange' | 'onFocus'>, Pick<LuxSelectProps, 'defaultValue' | 'busy' | 'className' | 'disabled' | 'invalid' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required' | 'size' | 'value'> {
+    options?: LuxFormFieldSelectOptionsProps[];
+    appearance?: LuxFormFieldDescriptionAppearance;
+    distanced?: boolean;
+    inputRef?: Ref<HTMLSelectElement>;
+}
+export declare const LuxFormFieldSelect: ({ label, options, description, errorMessage, disabled, invalid, appearance, distanced, className, inputRef, ...restProps }: LuxFormFieldSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/form-field-textbox/FormFieldTextbox.d.ts

@@ -0,0 +1,9 @@
+import { FormFieldTextboxProps as UtrechtFormFieldTextboxProps } from '@utrecht/component-library-react/dist/css-module';
+import { LuxFormFieldDescriptionAppearance } from '../form-field-description/FormFieldDescription';
+import { Direction } from '../textbox/Textbox';
+export type LuxFormFieldTextboxProps = UtrechtFormFieldTextboxProps & {
+    appearance?: LuxFormFieldDescriptionAppearance;
+    distanced?: boolean;
+    inputDir?: Direction;
+};
+export declare const LuxFormFieldTextbox: ({ label, type, description, errorMessage, disabled, invalid, appearance, distanced, className, inputRef, inputDir, ...restProps }: LuxFormFieldTextboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/heading/Heading.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
+export interface LuxHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    appearance?: HeadingLevels;
+    level: HeadingLevels;
+}
+export declare const LuxHeading: ({ children, level, appearance, ...restProps }: PropsWithChildren<LuxHeadingProps>) => ReactNode;
+export declare const LuxHeading1: ({ ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) => ReactNode;
+export declare const LuxHeading2: ({ ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) => ReactNode;
+export declare const LuxHeading3: ({ ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) => ReactNode;
+export declare const LuxHeading4: ({ ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) => ReactNode;
+export declare const LuxHeading5: ({ ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) => ReactNode;
+export declare const LuxHeading6: ({ ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) => ReactNode;
+export {};

package/dist/src/heading-group/HeadingGroup.d.ts

@@ -0,0 +1,5 @@
+import { HeadingGroupProps } from '@utrecht/component-library-react/dist/css-module';
+export declare const LuxHeadingGroup: import('react').ForwardRefExoticComponent<HeadingGroupProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export type LuxHeadingGroupProps = HeadingGroupProps;

package/dist/src/icon/FallbackIcon.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * Lux lamp icoon
+ *
+ * @param {SVGProps<SVGSVGElement>} props SVG Attributes
+ * @returns {*} SVG Element
+ */
+declare const FallbackIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FallbackIcon;

package/dist/src/icon/Icon.d.ts

@@ -0,0 +1,8 @@
+import { IconId } from '@lux-design-system/icons';
+import { IconProps as UtrechtIconProps } from '@utrecht/component-library-react';
+import { PropsWithChildren, ReactNode } from 'react';
+export type LuxIconProps = UtrechtIconProps & {
+    iconId: IconId | string;
+    library?: Record<string, ReactNode>;
+};
+export declare const LuxIcon: ({ iconId, library, children }: PropsWithChildren<LuxIconProps>) => ReactNode;

package/dist/src/index.d.ts

@@ -0,0 +1,22 @@
+export { LuxAlert, type LuxAlertProps } from './alert/Alert';
+export { LuxButton, type LuxButtonProps } from './button/Button';
+export { LuxCheckbox, type LuxCheckboxProps } from './checkbox/Checkbox';
+export { LuxDocument, type LuxDocumentProps } from './document/Document';
+export { LuxHeading, LuxHeading1, LuxHeading2, LuxHeading3, LuxHeading4, LuxHeading5, LuxHeading6, type LuxHeadingProps, } from './heading/Heading';
+export { LuxHeadingGroup, type LuxHeadingGroupProps } from './heading-group/HeadingGroup';
+export { LuxIcon, type LuxIconProps } from './icon/Icon';
+export { LuxFormField, type LuxFormFieldProps } from './form-field/FormField';
+export { LuxFormFieldCheckbox, type LuxFormFieldCheckboxProps } from './form-field-checkbox/FormFieldCheckbox';
+export { LuxFormFieldDescription, type LuxFormFieldDescriptionProps, } from './form-field-description/FormFieldDescription';
+export { LuxFormFieldErrorMessage, type LuxFormFieldErrorMessageProps, } from './form-field-error-message/FormFieldErrorMessage';
+export { LuxFormFieldLabel, type LuxFormFieldLabelProps } from './form-field-label/FormFieldLabel';
+export { LuxFormFieldSelect, type LuxFormFieldSelectProps, type LuxFormFieldSelectOptionsProps, } from './form-field-select/FormFieldSelect';
+export { LuxFormFieldTextbox, type LuxFormFieldTextboxProps } from './form-field-textbox/FormFieldTextbox';
+export { LuxParagraph, type LuxParagraphProps } from './paragraph/Paragraph';
+export { LuxFormFieldRadioOption, type LuxFormFieldRadioOptionProps, } from './form-field-radio-option/FormFieldRadioOption';
+export { LuxFormFieldRadioGroup, type LuxFormFieldRadioGroupProps } from './form-field-radio-group/FormFieldRadioGroup';
+export { LuxLink, type LuxLinkProps } from './link/Link';
+export { LuxPreHeading, type LuxPreHeadingProps } from './pre-heading/PreHeading';
+export { LuxSection, type LuxSectionProps } from './section/Section';
+export { LuxSelect, LuxSelectOption, type LuxSelectProps, type LuxSelectOptionProps } from './select/Select';
+export { LuxTextbox, INPUT_TYPES, type LuxTextboxProps } from './textbox/Textbox';

package/dist/src/link/Link.d.ts

@@ -0,0 +1,10 @@
+import { LinkProps as UtrechtLinkProps } from '@utrecht/component-library-react/dist/css-module';
+import { ReactElement } from 'react';
+type IconPosition = 'start' | 'end';
+export type LuxLinkProps = UtrechtLinkProps & {
+    external?: boolean;
+    icon?: ReactElement | undefined;
+    iconPosition?: IconPosition;
+};
+export declare const LuxLink: (props: LuxLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/paragraph/Paragraph.d.ts

@@ -0,0 +1,5 @@
+import { ParagraphProps } from '@utrecht/component-library-react/dist/css-module';
+export type LuxParagraphProps = Omit<ParagraphProps, 'lead' | 'small'> & {
+    appearance?: 'lead' | 'small';
+};
+export declare const LuxParagraph: (props: LuxParagraphProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/pre-heading/PreHeading.d.ts

@@ -0,0 +1,5 @@
+import { PreHeadingProps } from '@utrecht/component-library-react/dist/css-module';
+export declare const LuxPreHeading: import('react').ForwardRefExoticComponent<PreHeadingProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLParagraphElement>>;
+export type LuxPreHeadingProps = PreHeadingProps;

package/dist/src/radio-button/RadioButton.d.ts

@@ -0,0 +1,15 @@
+import { RadioButtonProps as UtrechtRadioButtonProps } from '@utrecht/component-library-react/dist/css-module';
+export type LuxRadioButtonProps = UtrechtRadioButtonProps & {
+    invalid?: boolean;
+    name: string;
+    checked?: boolean;
+};
+export declare const LuxRadioButton: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
+    invalid?: boolean;
+} & {
+    invalid?: boolean;
+    name: string;
+    checked?: boolean;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/src/section/Section.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+export interface LuxSectionProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const LuxSection: ({ children, className, ...otherProps }: PropsWithChildren<LuxSectionProps>) => ReactNode;

package/dist/src/select/Select.d.ts

@@ -0,0 +1,7 @@
+import { SelectOptionProps as UtrechtSelectOptionProps, SelectProps as UtrechtSelectProps } from '@utrecht/component-library-react/dist/css-module';
+export type LuxSelectProps = UtrechtSelectProps;
+export type LuxSelectOptionProps = UtrechtSelectOptionProps;
+export declare const LuxSelect: import('react').ForwardRefExoticComponent<UtrechtSelectProps & import('react').RefAttributes<HTMLSelectElement>>;
+export declare const LuxSelectOption: import('react').ForwardRefExoticComponent<UtrechtSelectOptionProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLOptionElement>>;

package/dist/src/textbox/Textbox.d.ts

@@ -0,0 +1,31 @@
+import { InputHTMLAttributes } from 'react';
+export declare const INPUT_TYPES: {
+    readonly TEXT: "text";
+    readonly EMAIL: "email";
+    readonly URL: "url";
+    readonly TEL: "tel";
+    readonly SEARCH: "search";
+    readonly PASSWORD: "password";
+    readonly NUMBER: "number";
+    readonly DATE: "date";
+    readonly DATETIME_LOCAL: "datetime-local";
+    readonly MONTH: "month";
+    readonly TIME: "time";
+    readonly WEEK: "week";
+};
+export type InputType = (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
+export type Direction = 'ltr' | 'rtl' | 'auto';
+export interface LuxTextboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    type?: InputType;
+    invalid?: boolean;
+    dir?: Direction;
+    focus?: boolean;
+    focusVisible?: boolean;
+    autoComplete?: string;
+    minLength?: number;
+    placeholderDir?: Direction;
+    spellCheck?: boolean;
+}
+export declare const LuxTextbox: import('react').ForwardRefExoticComponent<LuxTextboxProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/src/utils/object.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Pick only certain keys form object.
+ *
+ * @export
+ * @template {object} T
+ * @template {keyof T} U
+ * @param {T} obj Object to pick from
+ * @param {Array<U>} keys Keys to pick
+ * @returns {Pick<T, U>} Object containing only picked keys
+ */
+export declare function pick<T extends object, U extends keyof T>(obj: T, keys: Array<U>): Pick<T, U>;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0",
   "author": "Community for NL Design System",
-  "description": "React component library  for LUX, the Design System for Logius, based on the NL Design System architecture",
+  "description": "React component library for LUX, the Design System for Logius, based on the NL Design System architecture",
   "license": "EUPL-1.2",
   "name": "@lux-design-system/components-react",
   "keywords": [
@@ -17,18 +17,26 @@
     "url": "git@github.com:nl-design-system/lux-community.git",
     "directory": "packages/components-react"
   },
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
   "files": [
-    "dist/",
-    "src/"
+    "dist/"
   ],
   "dependencies": {
-    "@utrecht/component-library-react": "5",
+    "@utrecht/component-library-css": "6.1.0",
+    "@utrecht/component-library-react": "7.1.0",
+    "@utrecht/focus-ring-css": "2.3.0",
     "clsx": "2.1.1",
     "date-fns": "3.6.0",
-    "lodash.chunk": "4.2.0"
+    "lodash.chunk": "4.2.0",
+    "@lux-design-system/icons": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
@@ -38,35 +46,30 @@
     "@babel/preset-typescript": "7.24.7",
     "@babel/runtime": "7.25.0",
     "@jest/globals": "29.7.0",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "26.0.1",
-    "@rollup/plugin-node-resolve": "15.2.3",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
     "@types/lodash.chunk": "4.2.9",
     "@types/react": "18.3.3",
     "@vitejs/plugin-react": "4.3.1",
+    "cross-env": "7.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "mkdirp": "3.0.1",
     "next": "14.2.5",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
     "rollup": "4.20.0",
-    "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.1.2",
-    "rollup-plugin-node-polyfills": "0.2.1",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-typescript2": "0.36.0",
     "sass": "1.77.8",
     "tslib": "2.6.3",
     "typescript": "5.5.4",
     "vite": "5.3.5",
+    "vite-plugin-css-injected-by-js": "3.5.2",
+    "vite-plugin-dts": "4.2.3",
     "vite-plugin-runtime-config": "1.0.2",
     "@lux-design-system/components-css": "1.0.0-alpha.0"
   },
@@ -80,7 +83,8 @@
     "build:components": "vite build",
     "clean": "rimraf dist/ pages/",
     "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
-    "test": "mkdir -p pages && NODE_OPTIONS=--experimental-vm-modules jest --verbose",
-    "watch:test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
+    "test": "mkdirp pages && cross-env NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "watch:components": "vite build --watch",
+    "watch:test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
   }
 }