@common-origin/design-system 1.9.9 → 1.10.0
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/components/molecules/ArtCard/ArtCard.d.ts +12 -0
- package/dist/components/molecules/ArtCard/index.d.ts +1 -0
- package/dist/components/molecules/DesignCard/DesignCard.d.ts +13 -0
- package/dist/components/molecules/DesignCard/index.d.ts +1 -0
- package/dist/components/molecules/ReleaseCard/ReleaseCard.d.ts +9 -0
- package/dist/components/molecules/ReleaseCard/index.d.ts +1 -0
- package/dist/components/molecules/TextField/InputBase.d.ts +19 -0
- package/dist/components/molecules/TextField/TextField.d.ts +56 -0
- package/dist/components/molecules/TextField/index.d.ts +4 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.d.ts +40 -0
- package/dist/index.esm.js +283 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +284 -101
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +43 -3
- package/dist/tokens/index.esm.js +43 -3
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +43 -3
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +40 -0
- package/package.json +1 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type ArtCardProps = {
|
|
3
|
+
title: string;
|
|
4
|
+
excerpt: string;
|
|
5
|
+
tag: string;
|
|
6
|
+
artist: string;
|
|
7
|
+
labels: string[];
|
|
8
|
+
coverImage: string;
|
|
9
|
+
onImageClick?: () => void;
|
|
10
|
+
imageHref?: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const ArtCard: ({ title, excerpt, tag, artist, labels, coverImage, onImageClick, imageHref, }: ArtCardProps) => import("react").JSX.Element | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ArtCard';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type DesignCardProps = {
|
|
3
|
+
title: string;
|
|
4
|
+
excerpt: string;
|
|
5
|
+
labels: string[];
|
|
6
|
+
tag: string;
|
|
7
|
+
coverImage: string;
|
|
8
|
+
date: string;
|
|
9
|
+
onReadMore?: () => void;
|
|
10
|
+
readMoreHref?: string;
|
|
11
|
+
readMoreText?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const DesignCard: React.FC<DesignCardProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DesignCard';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ReleaseCard';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* Shared input states for text-based form controls
|
|
4
|
+
*/
|
|
5
|
+
export type InputState = 'default' | 'focus' | 'error' | 'disabled';
|
|
6
|
+
/**
|
|
7
|
+
* Base styled input component with all common styling
|
|
8
|
+
* Reusable across TextField, TextArea, PasswordInput, NumberInput
|
|
9
|
+
*/
|
|
10
|
+
interface StyledInputBaseProps {
|
|
11
|
+
$hasError?: boolean;
|
|
12
|
+
$disabled?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const StyledInputBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputBaseProps>> & string;
|
|
15
|
+
/**
|
|
16
|
+
* Base styled textarea with shared styling
|
|
17
|
+
*/
|
|
18
|
+
export declare const StyledTextAreaBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledInputBaseProps>> & string;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the TextField component
|
|
4
|
+
*/
|
|
5
|
+
export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
6
|
+
/**
|
|
7
|
+
* Label text for the input
|
|
8
|
+
*/
|
|
9
|
+
label?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Helper text displayed below the input
|
|
12
|
+
*/
|
|
13
|
+
helperText?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Error message to display
|
|
16
|
+
*/
|
|
17
|
+
error?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Whether the field is required
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
required?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Whether the input is disabled
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Input type
|
|
30
|
+
* @default 'text'
|
|
31
|
+
*/
|
|
32
|
+
type?: 'text' | 'email' | 'tel' | 'url' | 'search';
|
|
33
|
+
/**
|
|
34
|
+
* Unique identifier for the input
|
|
35
|
+
* Generated automatically if not provided
|
|
36
|
+
*/
|
|
37
|
+
id?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Test identifier for automated testing
|
|
40
|
+
*/
|
|
41
|
+
'data-testid'?: string;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* TextField component for text input with label, helper text, and error states
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <TextField
|
|
49
|
+
* label="Email"
|
|
50
|
+
* type="email"
|
|
51
|
+
* helperText="We'll never share your email"
|
|
52
|
+
* required
|
|
53
|
+
* />
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
|
package/dist/index.d.ts
CHANGED
|
@@ -493,6 +493,46 @@ export declare const tokens: {
|
|
|
493
493
|
};
|
|
494
494
|
};
|
|
495
495
|
};
|
|
496
|
+
input: {
|
|
497
|
+
default: {
|
|
498
|
+
backgroundColor: string;
|
|
499
|
+
textColor: string;
|
|
500
|
+
borderColor: string;
|
|
501
|
+
borderRadius: string;
|
|
502
|
+
borderWidth: string;
|
|
503
|
+
paddingY: string;
|
|
504
|
+
paddingX: string;
|
|
505
|
+
font: string;
|
|
506
|
+
};
|
|
507
|
+
placeholder: {
|
|
508
|
+
textColor: string;
|
|
509
|
+
};
|
|
510
|
+
hover: {
|
|
511
|
+
borderColor: string;
|
|
512
|
+
};
|
|
513
|
+
focus: {
|
|
514
|
+
borderColor: string;
|
|
515
|
+
outline: string;
|
|
516
|
+
outlineOffset: string;
|
|
517
|
+
};
|
|
518
|
+
error: {
|
|
519
|
+
borderColor: string;
|
|
520
|
+
focus: {
|
|
521
|
+
borderColor: string;
|
|
522
|
+
outline: string;
|
|
523
|
+
outlineOffset: string;
|
|
524
|
+
};
|
|
525
|
+
hover: {
|
|
526
|
+
borderColor: string;
|
|
527
|
+
};
|
|
528
|
+
};
|
|
529
|
+
disabled: {
|
|
530
|
+
backgroundColor: string;
|
|
531
|
+
textColor: string;
|
|
532
|
+
borderColor: string;
|
|
533
|
+
cursor: string;
|
|
534
|
+
};
|
|
535
|
+
};
|
|
496
536
|
$ref: string;
|
|
497
537
|
};
|
|
498
538
|
semantic: {
|