@fpkit/acss 4.1.0 → 5.0.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/libs/components/icons/icon.d.cts +1 -1
- package/libs/components/icons/icon.d.ts +1 -1
- package/libs/{icons-952d9bc5.d.ts → icons-df8e744f.d.ts} +32 -32
- package/libs/icons.d.cts +1 -1
- package/libs/icons.d.ts +1 -1
- package/libs/index.cjs +1 -1
- package/libs/index.cjs.map +1 -1
- package/libs/index.d.cts +2 -2
- package/libs/index.d.ts +2 -2
- package/libs/index.js +1 -1
- package/libs/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/alert/views/alert-view.tsx +6 -2
- package/src/components/form/input.stories.tsx +17 -4
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@fpkit/acss",
|
|
3
3
|
"description": "A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles.",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "
|
|
5
|
+
"version": "5.0.0",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=22.12.0",
|
|
8
8
|
"npm": ">=8.0.0"
|
|
@@ -126,5 +126,5 @@
|
|
|
126
126
|
"publishConfig": {
|
|
127
127
|
"access": "public"
|
|
128
128
|
},
|
|
129
|
-
"gitHead": "
|
|
129
|
+
"gitHead": "79600c132b52299259f087d029847acfcb2196e1"
|
|
130
130
|
}
|
|
@@ -143,8 +143,12 @@ export const AlertView = React.forwardRef<HTMLDivElement, AlertViewProps>(
|
|
|
143
143
|
{...props}
|
|
144
144
|
>
|
|
145
145
|
<AlertScreenReaderText severity={severity} />
|
|
146
|
-
<AlertIcon
|
|
147
|
-
|
|
146
|
+
<AlertIcon
|
|
147
|
+
severity={severity}
|
|
148
|
+
iconProps={iconProps}
|
|
149
|
+
hideIcon={hideIcon}
|
|
150
|
+
/>
|
|
151
|
+
<UI as="div" classes="alert-message">
|
|
148
152
|
<AlertTitle title={title} titleLevel={titleLevel} />
|
|
149
153
|
<AlertContent contentType={contentType}>{children}</AlertContent>
|
|
150
154
|
<AlertActions actions={actions} />
|
|
@@ -407,7 +407,8 @@ export const CheckboxWithHint: Story = {
|
|
|
407
407
|
/**
|
|
408
408
|
* CheckboxCustomSize - Custom sized checkboxes using CSS variables
|
|
409
409
|
*
|
|
410
|
-
* Demonstrates responsive sizing
|
|
410
|
+
* Demonstrates responsive sizing by overriding --checkbox-size and --checkbox-gap variables.
|
|
411
|
+
* Useful for contexts requiring larger touch targets or compact layouts.
|
|
411
412
|
*/
|
|
412
413
|
export const CheckboxCustomSize: Story = {
|
|
413
414
|
render: () => (
|
|
@@ -415,21 +416,33 @@ export const CheckboxCustomSize: Story = {
|
|
|
415
416
|
<CheckboxComponent
|
|
416
417
|
id="small"
|
|
417
418
|
label="Small (1rem)"
|
|
418
|
-
styles={{
|
|
419
|
+
styles={{
|
|
420
|
+
"--checkbox-size": "1rem",
|
|
421
|
+
"--checkbox-gap": "0.5rem",
|
|
422
|
+
} as React.CSSProperties}
|
|
419
423
|
/>
|
|
420
424
|
<CheckboxComponent
|
|
421
425
|
id="medium"
|
|
422
426
|
label="Medium (1.25rem - default)"
|
|
427
|
+
styles={{
|
|
428
|
+
"--checkbox-gap": "0.5rem",
|
|
429
|
+
} as React.CSSProperties}
|
|
423
430
|
/>
|
|
424
431
|
<CheckboxComponent
|
|
425
432
|
id="large"
|
|
426
433
|
label="Large (1.5rem)"
|
|
427
|
-
styles={{
|
|
434
|
+
styles={{
|
|
435
|
+
"--checkbox-size": "1.5rem",
|
|
436
|
+
"--checkbox-gap": "0.625rem",
|
|
437
|
+
} as React.CSSProperties}
|
|
428
438
|
/>
|
|
429
439
|
<CheckboxComponent
|
|
430
440
|
id="xlarge"
|
|
431
441
|
label="Extra Large (2rem)"
|
|
432
|
-
styles={{
|
|
442
|
+
styles={{
|
|
443
|
+
"--checkbox-size": "2rem",
|
|
444
|
+
"--checkbox-gap": "0.75rem",
|
|
445
|
+
} as React.CSSProperties}
|
|
433
446
|
/>
|
|
434
447
|
</div>
|
|
435
448
|
),
|