@delightui/components 0.1.18 → 0.1.20

package/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CheckboxProps } from './types';
-declare const Checkbox: (props: CheckboxProps) => import("react").JSX.Element;
+declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/dist/cjs/components/atoms/List/List.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ListItemType, ListProps } from './List.types';
 /**
  * A wrapper component that manages the rendering of either a sortable or regular list based on the provided props.
@@ -6,5 +7,5 @@ import type { ListItemType, ListProps } from './List.types';
  * @param {ListProps<T>} props - The properties for the list wrapper.
  * @returns {JSX.Element} The rendered list component.
  */
-declare const List: <T extends ListItemType>(props: ListProps<T>) => import("react").JSX.Element;
+declare const List: <T extends ListItemType>(props: ListProps<T>) => React.JSX.Element;
 export default List;

package/dist/cjs/components/atoms/List/components/ListItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ListItemProps, ListItemType } from "../List.types";
 /**
  * A list item component that renders a single item.
@@ -6,4 +7,4 @@ import { ListItemProps, ListItemType } from "../List.types";
  * @param {ListItemProps<T>} props - The properties for the list item.
  * @returns {JSX.Element} The rendered list item.
  */
-export declare const ListItem: <T extends ListItemType>(props: ListItemProps<T>) => import("react").JSX.Element;
+export declare const ListItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;

package/dist/cjs/components/atoms/List/components/RootList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ListItemType, RootListProps } from "../List.types";
 /**
  * A root list component that provides layout and styling for list items.
@@ -6,4 +7,4 @@ import { ListItemType, RootListProps } from "../List.types";
  * @param {RootListProps<T>} props - The properties for the root list.
  * @returns {JSX.Element} The rendered root list.
  */
-export declare const RootList: <T extends ListItemType>(props: RootListProps<T>) => import("react").JSX.Element;
+export declare const RootList: <T extends ListItemType>(props: RootListProps<T>) => React.JSX.Element;

package/dist/cjs/components/atoms/List/components/SortableList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SortableListProps } from "../List.types";
 /**
  * A sortable list component that allows drag-and-drop reordering of items.
@@ -8,4 +9,4 @@ import { SortableListProps } from "../List.types";
  */
 export declare const SortableList: <T extends {
     id: string | number;
-}>(props: SortableListProps<T>) => import("react").JSX.Element;
+}>(props: SortableListProps<T>) => React.JSX.Element;

package/dist/cjs/components/atoms/List/components/SortableListItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ListItemProps, ListItemType } from "../List.types";
 /**
  * A sortable item component that integrates with the dnd-kit library for drag-and-drop functionality.
@@ -6,4 +7,4 @@ import { ListItemProps, ListItemType } from "../List.types";
  * @param {ListItemProps<T>} props - The properties for the sortable item.
  * @returns {JSX.Element} The rendered sortable item.
  */
-export declare const SortableItem: <T extends ListItemType>(props: ListItemProps<T>) => import("react").JSX.Element;
+export declare const SortableItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;

package/dist/cjs/library.css

@@ -1623,7 +1623,7 @@ span.flatpickr-weekday {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
-.NavLink-module_navLink__ZbL1G[component-variant^=button-] {
+.NavLink-module_navLink__ZbL1G.NavLink-module_button__fm4B7 {
   height: var(--button-height);
   min-height: var(--button-min-height);
   max-height: var(--button-max-height);
@@ -1657,6 +1657,40 @@ span.flatpickr-weekday {
   line-height: var(--button-line-height);
   color: var(--button-color);
 }
+.NavLink-module_navLink__ZbL1G.NavLink-module_link__FSAEq {
+  height: var(--nav-link-height);
+  min-height: var(--nav-link-min-height);
+  max-height: var(--nav-link-max-height);
+  width: var(--nav-link-width);
+  min-width: var(--nav-link-min-width);
+  max-width: var(--nav-link-max-width);
+  padding-top: calc(var(--nav-link-padding-top) - var(--nav-link-border-top-width));
+  padding-bottom: calc(var(--nav-link-padding-bottom) - var(--nav-link-border-bottom-width));
+  padding-left: calc(var(--nav-link-padding-left) - var(--nav-link-border-left-width));
+  padding-right: calc(var(--nav-link-padding-right) - var(--nav-link-border-right-width));
+  row-gap: var(--nav-link-row-gap);
+  -moz-column-gap: var(--nav-link-column-gap);
+       column-gap: var(--nav-link-column-gap);
+  border-bottom-width: var(--nav-link-border-bottom-width);
+  border-left-width: var(--nav-link-border-left-width);
+  border-right-width: var(--nav-link-border-right-width);
+  border-top-width: var(--nav-link-border-top-width);
+  border-style: var(--nav-link-border-style);
+  border-color: var(--nav-link-border-color);
+  border-top-left-radius: var(--nav-link-border-top-left-radius);
+  border-top-right-radius: var(--nav-link-border-top-right-radius);
+  border-bottom-right-radius: var(--nav-link-border-bottom-right-radius);
+  border-bottom-left-radius: var(--nav-link-border-bottom-left-radius);
+  outline-width: var(--nav-link-outline-width);
+  outline-style: var(--nav-link-outline-style);
+  outline-color: var(--nav-link-outline-color);
+  background-color: var(--nav-link-background-color);
+  font-family: var(--nav-link-font-family);
+  font-size: var(--nav-link-font-size);
+  font-weight: var(--nav-link-font-weight);
+  line-height: var(--nav-link-line-height);
+  color: var(--nav-link-color);
+}
 .NavLink-module_navLink__ZbL1G:disabled {
   cursor: not-allowed;
 }
@@ -12526,6 +12560,114 @@ span.flatpickr-weekday {
     --select-options-paragraph-indent: 0px
 }
 
+[component-variant^="nav-link-"] {
+    --nav-link-opacity: 1;
+    --nav-link-height: auto;
+    --nav-link-min-height: auto;
+    --nav-link-max-height: none;
+    --nav-link-width: auto;
+    --nav-link-min-width: auto;
+    --nav-link-max-width: none;
+    --nav-link-background-color: transparent;
+    --nav-link-fill: currentcolor;
+    --nav-link-border-top-left-radius: 0px;
+    --nav-link-border-top-right-radius: 0px;
+    --nav-link-border-bottom-left-radius: 0px;
+    --nav-link-border-bottom-right-radius: 0px;
+    --nav-link-border-color: transparent;
+    --nav-link-border-style: solid;
+    --nav-link-border-gap: normal;
+    --nav-link-border-dash: none;
+    --nav-link-border-top-width: 0px;
+    --nav-link-border-right-width: 0px;
+    --nav-link-border-bottom-width: 0px;
+    --nav-link-border-left-width: 0px;
+    --nav-link-outline-color: auto;
+    --nav-link-outline-style: solid;
+    --nav-link-outline-width: 0px;
+    --nav-link-padding-left: 0px;
+    --nav-link-padding-right: 0px;
+    --nav-link-padding-top: 0px;
+    --nav-link-padding-bottom: 0px;
+    --nav-link-row-gap: 0px;
+    --nav-link-column-gap: 0px;
+    --nav-link-font-family: sans-serif;
+    --nav-link-font-size: medium;
+    --nav-link-color: currentcolor;
+    --nav-link-letter-spacing: normal;
+    --nav-link-line-height: normal;
+    --nav-link-paragraph-spacing: ;
+    --nav-link-paragraph-indent: 
+}
+
+[component-variant="nav-link-default"] {
+    --nav-link-color: var(--colours-purple-400);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"]:hover:not(:disabled):not([disabled]) {
+    --nav-link-color: var(--text-primary);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"][disabled],
+[component-variant="nav-link-default"]:disabled {
+    --nav-link-color: var(--text-secondary);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"][active]:not(:disabled):not([disabled]),
+[component-variant="nav-link-default"]:active:not(:disabled):not([disabled]) {
+    --nav-link-color: var(--text-primary);
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
+[component-variant="nav-link-default"]:focus-within:not(:disabled):not([disabled]),
+[component-variant="nav-link-default"]:focus-visible:not(:disabled):not([disabled]) {
+    --nav-link-color: var(--text-primary);
+    --nav-link-border-color: var(--colours-grey-0);
+    --nav-link-border-top-width: 1px;
+    --nav-link-border-right-width: 1px;
+    --nav-link-border-bottom-width: 1px;
+    --nav-link-border-left-width: 1px;
+    --nav-link-padding-left: var(--spacing-extra-extra-small);
+    --nav-link-padding-right: var(--spacing-extra-extra-small);
+    --nav-link-font-family: var(--font-family-body);
+    --nav-link-font-size: var(--font-size-body-small);
+    --nav-link-font-weight: var(--font-weight-medium);
+    --nav-link-line-height: var(--line-height-body-small);
+    --nav-link-paragraph-spacing: 0px;
+    --nav-link-paragraph-indent: 0px
+}
+
 [component-variant^="select-list-item-"] {
     --select-list-item-opacity: 1;
     --select-list-item-height: auto;