@donotdev/components 0.0.13 → 0.0.14
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.
- package/dist/advanced/Code/CodeContent.d.ts.map +1 -1
- package/dist/advanced/Code/CodeContent.js +5 -1
- package/dist/advanced/Code/CodeSkeleton.d.ts.map +1 -1
- package/dist/advanced/Code/CodeSkeleton.js +2 -1
- package/dist/advanced/JsonViewer/JsonViewer.d.ts.map +1 -1
- package/dist/advanced/JsonViewer/JsonViewer.js +2 -1
- package/dist/atomic/Button/index.d.ts.map +1 -1
- package/dist/atomic/Checkbox/index.d.ts +16 -2
- package/dist/atomic/Checkbox/index.d.ts.map +1 -1
- package/dist/atomic/Checkbox/index.js +20 -4
- package/dist/atomic/Collapsible/index.d.ts.map +1 -1
- package/dist/atomic/Collapsible/index.js +5 -1
- package/dist/atomic/Icons/Partner/providerIcons.d.ts.map +1 -1
- package/dist/atomic/Icons/Partner/providerIcons.js +17 -1
- package/dist/atomic/Input/index.d.ts +6 -1
- package/dist/atomic/Input/index.d.ts.map +1 -1
- package/dist/atomic/Input/index.js +10 -5
- package/dist/atomic/Label/FloatingLabel.d.ts +3 -1
- package/dist/atomic/Label/FloatingLabel.d.ts.map +1 -1
- package/dist/atomic/Label/FloatingLabel.js +2 -2
- package/dist/atomic/Pagination/index.d.ts +7 -29
- package/dist/atomic/Pagination/index.d.ts.map +1 -1
- package/dist/atomic/Pagination/index.js +101 -71
- package/dist/atomic/PasswordInput/index.d.ts.map +1 -1
- package/dist/atomic/PasswordInput/index.js +1 -1
- package/dist/atomic/RangeInput/index.d.ts +45 -0
- package/dist/atomic/RangeInput/index.d.ts.map +1 -0
- package/dist/atomic/RangeInput/index.js +63 -0
- package/dist/atomic/Select/index.d.ts.map +1 -1
- package/dist/atomic/Select/index.js +1 -1
- package/dist/atomic/Slider/index.d.ts.map +1 -1
- package/dist/atomic/Slider/index.js +7 -4
- package/dist/atomic/Table/index.d.ts +18 -5
- package/dist/atomic/Table/index.d.ts.map +1 -1
- package/dist/atomic/Table/index.js +91 -31
- package/dist/atomic/Textarea/index.d.ts +4 -0
- package/dist/atomic/Textarea/index.d.ts.map +1 -1
- package/dist/atomic/Textarea/index.js +3 -3
- package/dist/atomic/Toaster/Toast.types.d.ts +17 -0
- package/dist/atomic/Toaster/Toast.types.d.ts.map +1 -0
- package/dist/atomic/Toaster/Toast.types.js +2 -0
- package/dist/atomic/Toaster/ToastPrimitive.d.ts +1 -1
- package/dist/atomic/Toaster/ToastPrimitive.d.ts.map +1 -1
- package/dist/atomic/VideoPlayer/index.d.ts +11 -1
- package/dist/atomic/VideoPlayer/index.d.ts.map +1 -1
- package/dist/atomic/VideoPlayer/index.js +6 -8
- package/dist/atomic/index.d.ts +2 -0
- package/dist/atomic/index.d.ts.map +1 -1
- package/dist/atomic/index.js +1 -0
- package/dist/hooks/index.d.ts +2 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/useToast.d.ts +1 -8
- package/dist/hooks/useToast.d.ts.map +1 -1
- package/dist/hooks/useToast.js +1 -0
- package/dist/index.js +4 -4
- package/dist/styles/index.css +186 -72
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeContent.d.ts","sourceRoot":"","sources":["../../../src/advanced/Code/CodeContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeContent.d.ts","sourceRoot":"","sources":["../../../src/advanced/Code/CodeContent.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,eAAsB,EACtB,SAAiB,EACjB,cAAqB,EACrB,MAAM,EACN,OAAe,GAChB,EAAE,SAAS,2CAsOX;AAED,eAAe,IAAI,CAAC"}
|
|
@@ -12,7 +12,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
12
12
|
* @author AMBROISE PARK Consulting
|
|
13
13
|
*/
|
|
14
14
|
import { useEffect, useState, useMemo } from 'react';
|
|
15
|
-
import
|
|
15
|
+
import ScrollArea from '../../atomic/ScrollArea';
|
|
16
|
+
import CopyToClipboard from '../../atomic/CopyToClipboard';
|
|
17
|
+
import Stack from '../../atomic/Stack';
|
|
18
|
+
import Text from '../../atomic/Text';
|
|
19
|
+
import { useIsDark } from '../../utils/isDark';
|
|
16
20
|
/**
|
|
17
21
|
* Professional IDE-style code display component with Shiki syntax highlighting
|
|
18
22
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSkeleton.d.ts","sourceRoot":"","sources":["../../../src/advanced/Code/CodeSkeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeSkeleton.d.ts","sourceRoot":"","sources":["../../../src/advanced/Code/CodeSkeleton.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAsB,EACtB,cAAqB,EACrB,OAAe,EACf,SAAc,GACf,EAAE,iBAAiB,2CAyFnB;AAED,eAAe,YAAY,CAAC"}
|
|
@@ -8,7 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
* @since 0.0.1
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
|
-
import { cn
|
|
11
|
+
import { cn } from '../../utils/helpers';
|
|
12
|
+
import Stack from '../../atomic/Stack';
|
|
12
13
|
function CodeSkeleton({ className, showLineNumbers = true, showCopyButton = true, compact = false, lineCount = 10, }) {
|
|
13
14
|
return (_jsx("div", { className: cn('dndev-relative', className), style: {
|
|
14
15
|
opacity: 'var(--opacity-muted)',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonViewer.d.ts","sourceRoot":"","sources":["../../../src/advanced/JsonViewer/JsonViewer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JsonViewer.d.ts","sourceRoot":"","sources":["../../../src/advanced/JsonViewer/JsonViewer.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,IAAI,EAAE,GAAG,CAAC;IAEV,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAoID;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,UAAU;oEAMb,eAAe;;CA0FjB,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
|
@@ -11,7 +11,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
|
11
11
|
*/
|
|
12
12
|
import { Copy, ChevronRight, ChevronDown } from 'lucide-react';
|
|
13
13
|
import { useState, useMemo, useCallback } from 'react';
|
|
14
|
-
import { cn
|
|
14
|
+
import { cn } from '../../utils/helpers';
|
|
15
|
+
import Button, { BUTTON_VARIANT } from '../../atomic/Button';
|
|
15
16
|
const JsonNode = ({ data, keyName, depth, defaultDepth, path, collapsed, onToggle, expandedPaths, }) => {
|
|
16
17
|
const isExpanded = expandedPaths.has(path) || (depth < defaultDepth && !collapsed);
|
|
17
18
|
const isObject = typeof data === 'object' && data !== null && !Array.isArray(data);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Button/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAM1D,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;CAKjB,CAAC;AAEX,QAAA,MAAM,cAAc;;8EAmBlB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;AAE3E;;;;;;GAMG;AACH,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SACE,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Button/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAM1D,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;CAKjB,CAAC;AAEX,QAAA,MAAM,cAAc;;8EAmBlB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;AAE3E;;;;;;GAMG;AACH,qEAAqE;AACrE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SACE,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,MAAM,2GAiKX,CAAC;AAIF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,24 +1,38 @@
|
|
|
1
1
|
import CheckboxPrimitive, { type CheckboxProps as CheckboxPrimitiveProps } from './CheckboxPrimitive';
|
|
2
2
|
import { CONTROL_VARIANT, type ControlVariant } from '../../utils/constants';
|
|
3
|
+
import type { ReactNode } from 'react';
|
|
3
4
|
import './Checkbox.css';
|
|
4
5
|
export interface CheckboxProps extends CheckboxPrimitiveProps {
|
|
5
6
|
/** Semantic color variant */
|
|
6
7
|
variant?: ControlVariant;
|
|
8
|
+
/** Optional label text - automatically composes with Label component */
|
|
9
|
+
label?: ReactNode;
|
|
10
|
+
/** Whether the label should show required indicator */
|
|
11
|
+
required?: boolean;
|
|
7
12
|
}
|
|
8
13
|
/**
|
|
9
14
|
* Accessible checkbox control with semantic color variants.
|
|
10
15
|
* Supports smooth animations and full state management.
|
|
16
|
+
* Optionally accepts a label prop for convenience (automatically composes with Label).
|
|
11
17
|
*
|
|
12
18
|
* @component
|
|
13
19
|
* @example
|
|
14
20
|
* ```tsx
|
|
21
|
+
* // Simple checkbox without label
|
|
15
22
|
* <Checkbox checked={agreed} onCheckedChange={setAgreed} variant="success" />
|
|
16
|
-
*
|
|
23
|
+
*
|
|
24
|
+
* // Checkbox with label (convenience prop)
|
|
25
|
+
* <Checkbox
|
|
26
|
+
* checked={consent}
|
|
27
|
+
* onCheckedChange={setConsent}
|
|
28
|
+
* label="I agree to the terms"
|
|
29
|
+
* required
|
|
30
|
+
* />
|
|
17
31
|
* ```
|
|
18
32
|
* @param {CheckboxProps} props - The props for the checkbox
|
|
19
33
|
* @returns {JSX.Element} The rendered checkbox
|
|
20
34
|
*/
|
|
21
|
-
declare const Checkbox: ({ className, variant, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare const Checkbox: ({ className, variant, label, required, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
36
|
export default Checkbox;
|
|
23
37
|
export { CheckboxPrimitive, CONTROL_VARIANT as CHECKBOX_VARIANT };
|
|
24
38
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Checkbox/index.tsx"],"names":[],"mappings":"AAaA,OAAO,iBAAiB,EAAE,EACxB,KAAK,aAAa,IAAI,sBAAsB,EAC7C,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Checkbox/index.tsx"],"names":[],"mappings":"AAaA,OAAO,iBAAiB,EAAE,EACxB,KAAK,aAAa,IAAI,sBAAsB,EAC7C,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAK7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,QAAQ,GAAI,mDAAmD,aAAa,4CAsBjF,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,eAAe,IAAI,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// packages/components/src/atomic/Checkbox/index.tsx
|
|
3
3
|
/**
|
|
4
4
|
* @fileoverview Checkbox component
|
|
@@ -12,6 +12,8 @@ import { cva } from 'class-variance-authority';
|
|
|
12
12
|
import CheckboxPrimitive, {} from './CheckboxPrimitive';
|
|
13
13
|
import { CONTROL_VARIANT } from '../../utils/constants';
|
|
14
14
|
import { cn, getVariantDataAttrs } from '../../utils/helpers';
|
|
15
|
+
import Label from '../Label';
|
|
16
|
+
import Stack from '../Stack';
|
|
15
17
|
import './Checkbox.css';
|
|
16
18
|
const checkboxVariants = cva('dndev-control', {
|
|
17
19
|
variants: {
|
|
@@ -33,19 +35,33 @@ const checkboxVariants = cva('dndev-control', {
|
|
|
33
35
|
/**
|
|
34
36
|
* Accessible checkbox control with semantic color variants.
|
|
35
37
|
* Supports smooth animations and full state management.
|
|
38
|
+
* Optionally accepts a label prop for convenience (automatically composes with Label).
|
|
36
39
|
*
|
|
37
40
|
* @component
|
|
38
41
|
* @example
|
|
39
42
|
* ```tsx
|
|
43
|
+
* // Simple checkbox without label
|
|
40
44
|
* <Checkbox checked={agreed} onCheckedChange={setAgreed} variant="success" />
|
|
41
|
-
*
|
|
45
|
+
*
|
|
46
|
+
* // Checkbox with label (convenience prop)
|
|
47
|
+
* <Checkbox
|
|
48
|
+
* checked={consent}
|
|
49
|
+
* onCheckedChange={setConsent}
|
|
50
|
+
* label="I agree to the terms"
|
|
51
|
+
* required
|
|
52
|
+
* />
|
|
42
53
|
* ```
|
|
43
54
|
* @param {CheckboxProps} props - The props for the checkbox
|
|
44
55
|
* @returns {JSX.Element} The rendered checkbox
|
|
45
56
|
*/
|
|
46
|
-
const Checkbox = ({ className, variant, ...props }) => {
|
|
57
|
+
const Checkbox = ({ className, variant, label, required, ...props }) => {
|
|
47
58
|
const variantAttrs = getVariantDataAttrs({ variant });
|
|
48
|
-
|
|
59
|
+
const checkboxElement = (_jsx(CheckboxPrimitive, { className: cn(checkboxVariants({ variant }), className), ...variantAttrs, ...props }));
|
|
60
|
+
// If label is provided, compose with Label and Stack
|
|
61
|
+
if (label) {
|
|
62
|
+
return (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [checkboxElement, _jsx(Label, { required: required, children: label })] }));
|
|
63
|
+
}
|
|
64
|
+
return checkboxElement;
|
|
49
65
|
};
|
|
50
66
|
export default Checkbox;
|
|
51
67
|
export { CheckboxPrimitive, CONTROL_VARIANT as CHECKBOX_VARIANT };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Collapsible/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,SAAwB,EACxB,SAAS,GACV,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Collapsible/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,SAAwB,EACxB,SAAS,GACV,EAAE,gBAAgB,2CAmElB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -42,7 +42,11 @@ function Collapsible({ trigger, children, open, onOpenChange, defaultOpen, disab
|
|
|
42
42
|
if (!trigger)
|
|
43
43
|
return null;
|
|
44
44
|
if (showIcon) {
|
|
45
|
-
const IconComponent = iconStyle === 'chevron'
|
|
45
|
+
const IconComponent = iconStyle === 'chevron'
|
|
46
|
+
? ChevronDown
|
|
47
|
+
: isOpen
|
|
48
|
+
? CircleMinus
|
|
49
|
+
: CirclePlus;
|
|
46
50
|
return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Stack, { as: "div", direction: "row", align: "center", justify: "between", className: "dndev-collapsible-trigger", children: [trigger, iconStyle === 'chevron' ? (_jsx(ChevronDown, { className: "dndev-collapsible-icon dndev-collapsible-chevron", "aria-hidden": "true" })) : (_jsx(IconComponent, { className: "dndev-collapsible-icon", "aria-hidden": "true" }))] }) }));
|
|
47
51
|
}
|
|
48
52
|
return _jsx(CollapsibleTrigger, { asChild: true, children: trigger });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"providerIcons.d.ts","sourceRoot":"","sources":["../../../../src/atomic/Icons/Partner/providerIcons.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"providerIcons.d.ts","sourceRoot":"","sources":["../../../../src/atomic/Icons/Partner/providerIcons.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKrD,iBAAS,mBAAmB,CAAC,EAC3B,SAAc,EACd,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,aAAa,CAAC,2CASzB;AAED;;;;;;GAMG;AACH,eAAe,mBAAmB,CAAC;AAEnC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBjB,CAAC;AAEX;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAKrE"}
|
|
@@ -9,7 +9,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
11
|
import { Mail, MailCheck } from 'lucide-react';
|
|
12
|
-
import
|
|
12
|
+
import GoogleIcon from './GoogleIcon';
|
|
13
|
+
import GitHubIcon from './GitHubIcon';
|
|
14
|
+
import MicrosoftIcon from './MicrosoftIcon';
|
|
15
|
+
import AppleIcon from './AppleIcon';
|
|
16
|
+
import DiscordIcon from './DiscordIcon';
|
|
17
|
+
import SpotifyIcon from './SpotifyIcon';
|
|
18
|
+
import TwitchIcon from './TwitchIcon';
|
|
19
|
+
import RedditIcon from './RedditIcon';
|
|
20
|
+
import LinkedInIcon from './LinkedinIcon';
|
|
21
|
+
import SlackIcon from './SlackIcon';
|
|
22
|
+
import NotionIcon from './NotionIcon';
|
|
23
|
+
import MediumIcon from './MediumIcon';
|
|
24
|
+
import XIcon from './XIcon';
|
|
25
|
+
import MastodonIcon from './MastodonIcon';
|
|
26
|
+
import YouTubeIcon from './YouTubeIcon';
|
|
27
|
+
import YahooIcon from './YahooIcon';
|
|
28
|
+
import FacebookIcon from './FacebookIcon';
|
|
13
29
|
// Import all the existing icon components
|
|
14
30
|
// Default Icon (fallback) - Handshake icon
|
|
15
31
|
function DefaultProviderIcon({ className = '', ...props }) {
|
|
@@ -11,6 +11,11 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
11
11
|
iconEnd?: boolean;
|
|
12
12
|
/** Label for floating label - always shown small at top-left when provided */
|
|
13
13
|
label?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Bare mode - no border/shadow (for use inside FloatingLabel or custom wrappers).
|
|
16
|
+
* Auto-enabled when `label` is provided.
|
|
17
|
+
*/
|
|
18
|
+
bare?: boolean;
|
|
14
19
|
/** React 19 native ref support */
|
|
15
20
|
ref?: Ref<HTMLInputElement>;
|
|
16
21
|
}
|
|
@@ -32,6 +37,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
32
37
|
* @param {InputProps} props - The props for the input
|
|
33
38
|
* @returns {JSX.Element} The rendered input
|
|
34
39
|
*/
|
|
35
|
-
declare const Input: ({ className, type, icon, iconEnd, label, value, onFocus, onBlur, required, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
declare const Input: ({ className, type, icon, iconEnd, label, bare, value, onFocus, onBlur, required, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
41
|
export default Input;
|
|
37
42
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Input/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,gDAAgD;IAChD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,KAAK,GAAI,6FAYZ,UAAU,4CA2EZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
* @since 0.0.1
|
|
9
9
|
* @author AMBROISE PARK Consulting
|
|
10
10
|
*/
|
|
11
|
-
import {
|
|
11
|
+
import { useId } from 'react';
|
|
12
12
|
import { cn } from '../../utils/helpers';
|
|
13
13
|
import Icon from '../Icons/Icon';
|
|
14
14
|
import { FloatingLabel } from '../Label';
|
|
@@ -31,16 +31,21 @@ import './Input.css';
|
|
|
31
31
|
* @param {InputProps} props - The props for the input
|
|
32
32
|
* @returns {JSX.Element} The rendered input
|
|
33
33
|
*/
|
|
34
|
-
const Input = ({ className, type, icon, iconEnd = false, label, value, onFocus, onBlur, required, ...props }) => {
|
|
34
|
+
const Input = ({ className, type, icon, iconEnd = false, label, bare, value, onFocus, onBlur, required, ...props }) => {
|
|
35
35
|
const id = useId();
|
|
36
36
|
const hasIcon = !!icon;
|
|
37
37
|
const isLeading = !iconEnd;
|
|
38
38
|
const isTrailing = iconEnd;
|
|
39
39
|
const hasLabel = !!label;
|
|
40
|
+
// Auto-bare when label is provided (FloatingLabel provides border)
|
|
41
|
+
const isBare = bare || hasLabel;
|
|
40
42
|
const inputClasses = cn('dndev-input', hasIcon && isLeading && 'dndev-input-with-leading-icon', hasIcon && isTrailing && 'dndev-input-with-trailing-icon', className);
|
|
41
43
|
// Explicitly exclude children to prevent void element error (input is a void element)
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
+
// If we have a label, extract style to pass to FloatingLabel wrapper instead of input
|
|
45
|
+
const { children: _children, style, ...inputProps } = props;
|
|
46
|
+
const inputElement = (_jsx("input", { id: id, type: type, value: value, required: required, className: inputClasses, "data-bare": isBare || undefined, ...inputProps,
|
|
47
|
+
// Only apply style to input if there's no label (label wrapper gets it)
|
|
48
|
+
style: hasLabel ? undefined : style }));
|
|
44
49
|
const needsWrapper = hasIcon || hasLabel;
|
|
45
50
|
// Build input with optional icon wrapper
|
|
46
51
|
const inputWithIcon = hasIcon ? (_jsxs("div", { className: "dndev-relative", children: [inputElement, _jsx("div", { className: cn('dndev-input-icon', isLeading && 'dndev-input-icon-leading', isTrailing && 'dndev-input-icon-trailing'), children: _jsx(Icon, { icon: icon, className: "dndev-size-md", ariaHidden: true }) })] })) : (inputElement);
|
|
@@ -49,7 +54,7 @@ const Input = ({ className, type, icon, iconEnd = false, label, value, onFocus,
|
|
|
49
54
|
}
|
|
50
55
|
// With label: use FloatingLabel wrapper (fieldset/legend)
|
|
51
56
|
if (hasLabel) {
|
|
52
|
-
return (_jsx(FloatingLabel, { htmlFor: id, label: label, disabled: props.disabled, required: required, children: inputWithIcon }));
|
|
57
|
+
return (_jsx(FloatingLabel, { htmlFor: id, label: label, disabled: props.disabled, required: required, style: style, children: inputWithIcon }));
|
|
53
58
|
}
|
|
54
59
|
// Icon only, no label
|
|
55
60
|
return inputWithIcon;
|
|
@@ -25,6 +25,8 @@ export interface FloatingLabelProps {
|
|
|
25
25
|
children: ReactNode;
|
|
26
26
|
/** Additional className for the fieldset */
|
|
27
27
|
className?: string;
|
|
28
|
+
/** Inline styles for the fieldset */
|
|
29
|
+
style?: React.CSSProperties;
|
|
28
30
|
}
|
|
29
31
|
/**
|
|
30
32
|
* FloatingLabel - Fieldset/legend wrapper for floating labels
|
|
@@ -40,6 +42,6 @@ export interface FloatingLabelProps {
|
|
|
40
42
|
* </FloatingLabel>
|
|
41
43
|
* ```
|
|
42
44
|
*/
|
|
43
|
-
export declare function FloatingLabel({ htmlFor, label, disabled, truncate, required, children, className, }: FloatingLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare function FloatingLabel({ htmlFor, label, disabled, truncate, required, children, className, style, }: FloatingLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
44
46
|
export default FloatingLabel;
|
|
45
47
|
//# sourceMappingURL=FloatingLabel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLabel.d.ts","sourceRoot":"","sources":["../../../src/atomic/Label/FloatingLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"FloatingLabel.d.ts","sourceRoot":"","sources":["../../../src/atomic/Label/FloatingLabel.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAgB,EAChB,QAAe,EACf,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,2CA8BpB;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -25,8 +25,8 @@ import './Label.css';
|
|
|
25
25
|
* </FloatingLabel>
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
|
-
export function FloatingLabel({ htmlFor, label, disabled = false, truncate =
|
|
29
|
-
return (_jsxs("fieldset", { className: `dndev-floating-fieldset ${className || ''}`, disabled: disabled, "data-disabled": disabled ? 'true' : undefined, children: [_jsx("legend", { className: "dndev-floating-legend", "data-truncate": truncate ?
|
|
28
|
+
export function FloatingLabel({ htmlFor, label, disabled = false, truncate = true, required = false, children, className, style, }) {
|
|
29
|
+
return (_jsxs("fieldset", { className: `dndev-floating-fieldset ${className || ''}`, disabled: disabled, "data-disabled": disabled ? 'true' : undefined, style: style, children: [_jsx("legend", { className: "dndev-floating-legend", "data-truncate": truncate ? undefined : 'false', children: _jsxs("label", { htmlFor: htmlFor, children: [label, required && (_jsx("span", { style: {
|
|
30
30
|
color: 'var(--destructive-foreground)',
|
|
31
31
|
marginInlineStart: 'var(--gap-tight)',
|
|
32
32
|
}, "aria-hidden": "true", children: "*" }))] }) }), children] }));
|
|
@@ -1,41 +1,19 @@
|
|
|
1
|
-
import type { ComponentProps } from 'react';
|
|
2
1
|
import './Pagination.css';
|
|
3
|
-
export interface PaginationProps
|
|
4
|
-
/** Current page (1-indexed) */
|
|
2
|
+
export interface PaginationProps {
|
|
5
3
|
currentPage: number;
|
|
6
|
-
/** Total number of pages */
|
|
7
4
|
totalPages: number;
|
|
8
|
-
/** Callback when page changes */
|
|
9
5
|
onPageChange: (page: number) => void;
|
|
10
|
-
|
|
6
|
+
pageSize?: number;
|
|
7
|
+
total?: number;
|
|
8
|
+
onPageSizeChange?: (pageSize: number) => void;
|
|
11
9
|
maxVisible?: number;
|
|
12
|
-
/** Show previous/next buttons (default: true) */
|
|
13
10
|
showNavigation?: boolean;
|
|
14
|
-
/** Label for previous button (default: "Previous") */
|
|
15
11
|
previousLabel?: string;
|
|
16
|
-
/** Label for next button (default: "Next") */
|
|
17
12
|
nextLabel?: string;
|
|
18
|
-
|
|
13
|
+
itemsPerPagePlaceholder?: string;
|
|
14
|
+
showingLabel?: string;
|
|
19
15
|
className?: string;
|
|
20
16
|
}
|
|
21
|
-
|
|
22
|
-
* Accessible pagination component with props-based API.
|
|
23
|
-
* Handles page number generation, ellipsis truncation, and navigation controls.
|
|
24
|
-
*
|
|
25
|
-
* React 19: ref is a native prop, no forwardRef needed.
|
|
26
|
-
*
|
|
27
|
-
* @component
|
|
28
|
-
* @example
|
|
29
|
-
* ```tsx
|
|
30
|
-
* <Pagination
|
|
31
|
-
* currentPage={1}
|
|
32
|
-
* totalPages={10}
|
|
33
|
-
* onPageChange={handlePageChange}
|
|
34
|
-
* />
|
|
35
|
-
* ```
|
|
36
|
-
* @param {PaginationProps} props - The props for the pagination
|
|
37
|
-
* @returns {JSX.Element} The rendered pagination
|
|
38
|
-
*/
|
|
39
|
-
declare const Pagination: ({ currentPage, totalPages, onPageChange, maxVisible, showNavigation, previousLabel, nextLabel, className, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare const Pagination: ({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, total: totalProp, onPageSizeChange, maxVisible, showNavigation, previousLabel, nextLabel, itemsPerPagePlaceholder, showingLabel, className, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
40
18
|
export default Pagination;
|
|
41
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Pagination/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Pagination/index.tsx"],"names":[],"mappings":"AAIA,OAAO,kBAAkB,CAAC;AAM1B,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,gNAcjB,eAAe,4CA0LjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,77 +1,107 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
// packages/components/src/atomic/Pagination/index.tsx
|
|
3
|
-
|
|
4
|
-
* @fileoverview Pagination component
|
|
5
|
-
* @description Accessible pagination component with props-based API
|
|
6
|
-
*
|
|
7
|
-
* @version 0.0.1
|
|
8
|
-
* @since 0.0.1
|
|
9
|
-
* @author AMBROISE PARK Consulting
|
|
10
|
-
*/
|
|
3
|
+
import { useMemo, useState } from 'react';
|
|
11
4
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
12
|
-
import { useMemo } from 'react';
|
|
13
|
-
import { cn } from '../../utils/helpers';
|
|
14
|
-
import Stack from '../Stack';
|
|
15
5
|
import './Pagination.css';
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
6
|
+
import Button from '../Button';
|
|
7
|
+
import Select from '../Select';
|
|
8
|
+
import Text from '../Text';
|
|
9
|
+
import { cn } from '../../utils/helpers';
|
|
10
|
+
const Pagination = ({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, total: totalProp, onPageSizeChange, maxVisible = 5, // Default to 5 to fit safe on mobile (48px * 7 items ~= 336px)
|
|
11
|
+
showNavigation = true, previousLabel = 'Previous', nextLabel = 'Next', itemsPerPagePlaceholder = 'Items per page', showingLabel, className, }) => {
|
|
12
|
+
const [internalPageSize, setInternalPageSize] = useState(12);
|
|
13
|
+
const pageSize = pageSizeProp ?? internalPageSize;
|
|
14
|
+
const total = totalProp;
|
|
15
|
+
const handlePageSizeChange = (value) => {
|
|
16
|
+
const newPageSize = value === 'all' ? 0 : Number(value);
|
|
17
|
+
if (onPageSizeChange) {
|
|
18
|
+
onPageSizeChange(newPageSize);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
setInternalPageSize(newPageSize);
|
|
22
|
+
}
|
|
23
|
+
onPageChange(1);
|
|
24
|
+
};
|
|
25
|
+
const isShowingAll = pageSize === 0;
|
|
26
|
+
const effectiveTotalPages = isShowingAll
|
|
27
|
+
? 1
|
|
28
|
+
: total && total > 0
|
|
29
|
+
? Math.ceil(total / pageSize)
|
|
30
|
+
: totalPages;
|
|
31
|
+
const selectValue = isShowingAll ? 'all' : String(pageSize);
|
|
32
|
+
let pageSizeOptions = [];
|
|
33
|
+
if (typeof total === 'number' && total > 0) {
|
|
34
|
+
if (total < 12) {
|
|
35
|
+
pageSizeOptions = [];
|
|
36
|
+
}
|
|
37
|
+
else if (total < 36) {
|
|
38
|
+
pageSizeOptions = [
|
|
39
|
+
{ value: '12', label: '12' },
|
|
40
|
+
{ value: 'all', label: String(total) },
|
|
41
|
+
];
|
|
42
|
+
}
|
|
43
|
+
else if (total < 120) {
|
|
44
|
+
pageSizeOptions = [
|
|
45
|
+
{ value: '12', label: '12' },
|
|
46
|
+
{ value: '36', label: '36' },
|
|
47
|
+
{ value: 'ALL', label: String(total) },
|
|
48
|
+
];
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
pageSizeOptions = [
|
|
52
|
+
{ value: '12', label: '12' },
|
|
53
|
+
{ value: '36', label: '36' },
|
|
54
|
+
{ value: '120', label: '120' },
|
|
55
|
+
{ value: 'all', label: String(total) },
|
|
56
|
+
];
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
pageSizeOptions = [
|
|
61
|
+
{ value: '12', label: '12' },
|
|
62
|
+
{ value: '36', label: '36' },
|
|
63
|
+
{ value: '120', label: '120' },
|
|
64
|
+
{ value: 'all', label: 'All' },
|
|
65
|
+
];
|
|
66
|
+
}
|
|
67
|
+
const showPageSizeSelector = pageSizeOptions.length > 1;
|
|
36
68
|
const pageNumbers = useMemo(() => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
pages.push(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
return (_jsx("li", { className: "dndev-pagination-item", children: _jsx("button", { type: "button", onClick: () => onPageChange(page), "aria-current": page === currentPage ? 'page' : undefined, "aria-label": `Page ${page}`, className: "dndev-pagination-button", children: page }) }, page));
|
|
75
|
-
}), showNavigation && currentPage < totalPages && (_jsx("li", { className: "dndev-pagination-item", children: _jsx("button", { type: "button", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), className: "dndev-pagination-button", "aria-label": nextLabel, children: _jsx(ChevronRight, { className: "dndev-size-md" }) }) }, "next"))] }) }));
|
|
69
|
+
if (isShowingAll)
|
|
70
|
+
return [1];
|
|
71
|
+
if (effectiveTotalPages <= maxVisible) {
|
|
72
|
+
return Array.from({ length: effectiveTotalPages }, (_, i) => i + 1);
|
|
73
|
+
}
|
|
74
|
+
const pages = [];
|
|
75
|
+
const half = Math.floor(maxVisible / 2);
|
|
76
|
+
if (currentPage <= half + 1) {
|
|
77
|
+
for (let i = 1; i <= maxVisible - 2; i++)
|
|
78
|
+
pages.push(i);
|
|
79
|
+
pages.push('ellipsis', effectiveTotalPages);
|
|
80
|
+
}
|
|
81
|
+
else if (currentPage >= effectiveTotalPages - half) {
|
|
82
|
+
pages.push(1, 'ellipsis');
|
|
83
|
+
for (let i = effectiveTotalPages - (maxVisible - 3); i <= effectiveTotalPages; i++)
|
|
84
|
+
pages.push(i);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
pages.push(1, 'ellipsis');
|
|
88
|
+
for (let i = currentPage - 1; i <= currentPage + 1; i++)
|
|
89
|
+
pages.push(i);
|
|
90
|
+
pages.push('ellipsis', effectiveTotalPages);
|
|
91
|
+
}
|
|
92
|
+
return pages;
|
|
93
|
+
}, [currentPage, effectiveTotalPages, maxVisible, isShowingAll]);
|
|
94
|
+
const startItem = (currentPage - 1) * pageSize + 1;
|
|
95
|
+
const endItem = Math.min(currentPage * pageSize, total || 0);
|
|
96
|
+
const showInfo = typeof total === 'number' && total > 0;
|
|
97
|
+
const showingText = showInfo && showingLabel
|
|
98
|
+
? showingLabel
|
|
99
|
+
.replace('{{from}}', String(startItem))
|
|
100
|
+
.replace('{{to}}', String(endItem))
|
|
101
|
+
.replace('{{total}}', String(total))
|
|
102
|
+
: showInfo
|
|
103
|
+
? `Showing ${startItem}-${endItem} of ${total}`
|
|
104
|
+
: null;
|
|
105
|
+
return (_jsxs("nav", { role: "navigation", "aria-label": "pagination", className: cn('dndev-pagination', className), children: [_jsx("div", { className: "dndev-pagination-info", children: showingText && (_jsx(Text, { level: "small", variant: "muted", children: showingText })) }), _jsx("div", { className: "dndev-pagination-size", children: showPageSizeSelector && (_jsxs(_Fragment, { children: [_jsx("span", { className: "dndev-pagination-size-label", children: _jsx(Text, { level: "small", variant: "muted", children: itemsPerPagePlaceholder }) }), _jsx(Select, { value: selectValue, onValueChange: handlePageSizeChange, options: pageSizeOptions, placeholder: String(pageSize) })] })) }), _jsxs("div", { className: "dndev-pagination-nav", children: [showNavigation && (_jsx(Button, { variant: "ghost", className: "dndev-pagination-button", icon: ChevronLeft, onClick: () => onPageChange(Math.max(1, currentPage - 1)), disabled: currentPage <= 1, "aria-label": previousLabel })), _jsx("ul", { className: "dndev-pagination-list", children: pageNumbers.map((page, index) => page === 'ellipsis' ? (_jsx("li", { children: _jsx("div", { className: "dndev-pagination-button", children: _jsx(Text, { level: "small", variant: "muted", children: "..." }) }) }, `ellipsis-${index}`)) : (_jsx("li", { children: _jsx(Button, { variant: page === currentPage ? 'default' : 'ghost', className: "dndev-pagination-button", onClick: () => onPageChange(page), "aria-current": page === currentPage ? 'page' : undefined, "aria-label": `Page ${page}`, children: page }) }, page))) }), showNavigation && (_jsx(Button, { variant: "ghost", className: "dndev-pagination-button", icon: ChevronRight, onClick: () => onPageChange(Math.min(effectiveTotalPages, currentPage + 1)), disabled: currentPage >= effectiveTotalPages, "aria-label": nextLabel }))] })] }));
|
|
76
106
|
};
|
|
77
107
|
export default Pagination;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/PasswordInput/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,aAAa,GAAI,kHAUpB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/PasswordInput/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,aAAa,GAAI,kHAUpB,kBAAkB,4CAoEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -55,7 +55,7 @@ const PasswordInput = ({ className, visible: controlledVisible, onVisibilityChan
|
|
|
55
55
|
}
|
|
56
56
|
onVisibilityChange?.(newVisible);
|
|
57
57
|
};
|
|
58
|
-
const inputContent = (_jsxs("div", { className: "dndev-relative", children: [_jsx("input", { id: id, type: isVisible ? 'text' : 'password', value: value, className: cn('dndev-input', 'dndev-password-input-with-toggle', className), onFocus: onFocus, onBlur: onBlur, required: required, ...props }), _jsx("button", { type: "button", className: "dndev-password-toggle-button", onClick: toggleVisibility, "aria-label": isVisible ? 'Hide password' : 'Show password', "aria-describedby": props['aria-describedby'], tabIndex: -1, children: isVisible ? (_jsx(EyeOff, { className: "dndev-size-md dndev-password-toggle-icon" })) : (_jsx(Eye, { className: "dndev-size-md dndev-password-toggle-icon" })) })] }));
|
|
58
|
+
const inputContent = (_jsxs("div", { className: "dndev-relative", children: [_jsx("input", { id: id, type: isVisible ? 'text' : 'password', value: value, className: cn('dndev-input', 'dndev-password-input-with-toggle', className), "data-bare": hasLabel || undefined, onFocus: onFocus, onBlur: onBlur, required: required, ...props }), _jsx("button", { type: "button", className: "dndev-password-toggle-button", onClick: toggleVisibility, "aria-label": isVisible ? 'Hide password' : 'Show password', "aria-describedby": props['aria-describedby'], tabIndex: -1, children: isVisible ? (_jsx(EyeOff, { className: "dndev-size-md dndev-password-toggle-icon" })) : (_jsx(Eye, { className: "dndev-size-md dndev-password-toggle-icon" })) })] }));
|
|
59
59
|
if (!hasLabel) {
|
|
60
60
|
return inputContent;
|
|
61
61
|
}
|