+ )}
+
+ );
+};
+
+Logo.displayName = "Logo";
+
+export { Logo };
diff --git a/src/once-ui/components/RadioButton.module.scss b/src/once-ui/components/RadioButton.module.scss
index 7c72369..bd35a76 100644
--- a/src/once-ui/components/RadioButton.module.scss
+++ b/src/once-ui/components/RadioButton.module.scss
@@ -1,5 +1,7 @@
.container {
cursor: pointer;
+ isolation: isolate;
+ z-index: 1;
&:hover, &:focus {
.checkbox.checked .checkbox::before {
@@ -12,7 +14,7 @@
box-shadow: inset 0 0 0 var(--solid-inset-color-brand);
border-color: var(--solid-border-color-neutral);
border-style: solid;
- border-width: var(--solid-border-width);
+ border-width: 1px;
width: var(--static-space-20);
height: var(--static-space-20);
min-width: var(--static-space-20);
@@ -27,8 +29,8 @@
}
}
-.container:hover .checkbox::before,
-.checkbox:focus-within::before {
+.container:hover .radioButton::before,
+.radioButton:focus-within::before {
content: '';
position: absolute;
top: 50%;
diff --git a/src/once-ui/components/RadioButton.tsx b/src/once-ui/components/RadioButton.tsx
index 028364d..5158861 100644
--- a/src/once-ui/components/RadioButton.tsx
+++ b/src/once-ui/components/RadioButton.tsx
@@ -1,8 +1,7 @@
"use client";
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
import classNames from 'classnames';
-
import { Flex, InteractiveDetails, InteractiveDetailsProps } from '.';
import styles from './RadioButton.module.scss';
@@ -10,17 +9,20 @@ interface RadioButtonProps extends Omit
{
style?: React.CSSProperties;
className?: string;
isChecked?: boolean;
- onToggle?: () => void;
+ handleToggle?: () => void;
}
-const RadioButton: React.FC = ({
+const generateId = () => `radio-${Math.random().toString(36).substring(2, 9)}`;
+
+const RadioButton: React.FC = forwardRef(({
style,
className,
isChecked: controlledIsChecked,
- onToggle,
+ handleToggle,
...interactiveDetailsProps
-}) => {
+}, ref) => {
const [isChecked, setIsChecked] = useState(controlledIsChecked || false);
+ const [radioId] = useState(generateId());
useEffect(() => {
if (controlledIsChecked !== undefined) {
@@ -28,28 +30,33 @@ const RadioButton: React.FC = ({
}
}, [controlledIsChecked]);
- const handleToggle = () => {
- if (onToggle) {
- onToggle();
+ const toggleItem = () => {
+ if (handleToggle) {
+ handleToggle();
} else {
setIsChecked(!isChecked);
}
};
const handleKeyDown = (event: React.KeyboardEvent) => {
- if (event.key === 'Enter') {
- handleToggle();
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ toggleItem();
}
};
return (
= ({
onKeyDown={handleKeyDown}
tabIndex={0}
className={classNames(styles.radioButton, {
- [styles.checked]: isChecked,
+ [styles.checked]: controlledIsChecked !== undefined ? controlledIsChecked : isChecked,
})}>
- {isChecked &&
+ {(controlledIsChecked !== undefined ? controlledIsChecked : isChecked) && (
- }
+ )}
{}}/>
+ onClick={toggleItem}/>
);
-};
+});
RadioButton.displayName = "RadioButton";
diff --git a/src/once-ui/components/Scroller.module.scss b/src/once-ui/components/Scroller.module.scss
new file mode 100644
index 0000000..cd8d102
--- /dev/null
+++ b/src/once-ui/components/Scroller.module.scss
@@ -0,0 +1,58 @@
+.scroller {
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+.row {
+ overflow-x: auto;
+ flex-direction: row;
+}
+
+.column {
+ overflow-y: auto;
+ flex-direction: column;
+}
+
+.scrollMask {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.scrollMaskContainer {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: var(--static-space-64);
+ height: 100%;
+ z-index: 0;
+}
+
+.scrollMaskPrev {
+ left: 0;
+ background: linear-gradient(to right, var(--surface-background), transparent);
+}
+
+.scrollMaskNext {
+ right: 0;
+ background: linear-gradient(to left, var(--surface-background), transparent);
+}
+
+.scrollButton {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ border: none;
+ z-index: 2;
+}
+
+.scrollButtonPrev {
+ left: var(--static-space-4);
+}
+
+.scrollButtonNext {
+ right: var(--static-space-4);
+}
\ No newline at end of file
diff --git a/src/once-ui/components/Scroller.tsx b/src/once-ui/components/Scroller.tsx
new file mode 100644
index 0000000..1eb48fd
--- /dev/null
+++ b/src/once-ui/components/Scroller.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Flex, IconButton } from '.';
+import styles from './Scroller.module.scss';
+
+interface ScrollerProps {
+ children: React.ReactNode;
+ direction?: 'row' | 'column';
+ contained?: boolean;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+const Scroller: React.FC = ({
+ children,
+ direction = 'row',
+ contained = false,
+ className,
+ style,
+ ...props
+}) => {
+ const scrollerRef = useRef(null);
+ const [showPrevButton, setShowPrevButton] = useState(false);
+ const [showNextButton, setShowNextButton] = useState(false);
+
+ useEffect(() => {
+ const scroller = scrollerRef.current;
+ const handleScroll = () => {
+ if (scroller) {
+ const scrollPosition = direction === 'row' ? scroller.scrollLeft : scroller.scrollTop;
+ const maxScrollPosition = direction === 'row'
+ ? scroller.scrollWidth - scroller.clientWidth
+ : scroller.scrollHeight - scroller.clientHeight;
+ setShowPrevButton(scrollPosition > 0);
+ setShowNextButton(scrollPosition < maxScrollPosition - 1);
+ }
+ };
+
+ if (scroller && (direction === 'row' ? scroller.scrollWidth > scroller.clientWidth : scroller.scrollHeight > scroller.clientHeight)) {
+ handleScroll();
+ scroller.addEventListener('scroll', handleScroll);
+ return () => scroller.removeEventListener('scroll', handleScroll);
+ }
+ }, [direction]);
+
+ const handleScrollNext = () => {
+ const scroller = scrollerRef.current;
+ if (scroller) {
+ const scrollAmount = direction === 'row' ? scroller.clientWidth / 2 : scroller.clientHeight / 2;
+ scroller.scrollBy({ [direction === 'row' ? 'left' : 'top']: scrollAmount, behavior: 'smooth' });
+ }
+ };
+
+ const handleScrollPrev = () => {
+ const scroller = scrollerRef.current;
+ if (scroller) {
+ const scrollAmount = direction === 'row' ? scroller.clientWidth / 2 : scroller.clientHeight / 2;
+ scroller.scrollBy({ [direction === 'row' ? 'left' : 'top']: -scrollAmount, behavior: 'smooth' });
+ }
+ };
+
+ return (
+
+ {showPrevButton && (
+
+ )}
+
+ {children}
+
+ {showNextButton && (
+
+ )}
+
+ );
+};
+
+Scroller.displayName = 'Scroller';
+
+export { Scroller };
+export type { ScrollerProps };
\ No newline at end of file
diff --git a/src/once-ui/components/SegmentedControl.module.scss b/src/once-ui/components/SegmentedControl.module.scss
deleted file mode 100644
index 983a15f..0000000
--- a/src/once-ui/components/SegmentedControl.module.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-.container {
- position: relative;
- width: 100%;
- border-radius: var(--radius-m-nest-4);
- border: 1px solid var(--neutral-border-medium);
-}
-
-.control {
- display: flex;
- padding: var(--static-space-4);
- gap: var(--static-space-4);
- overflow-x: auto;
- scrollbar-width: none;
- width: 100%;
-
- &::-webkit-scrollbar {
- display: none;
- }
-}
-
-.scrollButton {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- border: none;
- z-index: 2;
-}
-
-.scrollButtonLeft {
- left: var(--static-space-4);
-}
-
-.scrollButtonRight {
- right: var(--static-space-4);
-}
-
-.scrollMaskContainer {
- position: absolute;
- top: 1px;
- bottom: 1px;
- width: var(--static-space-64);
- height: calc(100% - 2px);
- z-index: 0;
-}
-
-.scrollMask {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
-.scrollMaskLeft {
- border-radius: calc(var(--radius-m-nest-4) - 2px);
- left: 1px;
- background: linear-gradient(to right, var(--page-surface-background), transparent);
-}
-
-.scrollMaskRight {
- border-radius: calc(var(--radius-m-nest-4) - 2px);
- right: 1px;
- background: linear-gradient(to left, var(--page-surface-background), transparent);
-}
\ No newline at end of file
diff --git a/src/once-ui/components/SegmentedControl.tsx b/src/once-ui/components/SegmentedControl.tsx
index f4e01c2..01c4e4e 100644
--- a/src/once-ui/components/SegmentedControl.tsx
+++ b/src/once-ui/components/SegmentedControl.tsx
@@ -1,8 +1,8 @@
"use client";
-import { useState, useEffect, useRef } from 'react';
-import { Flex, IconButton, ToggleButton } from '.';
-import styles from './SegmentedControl.module.scss';
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Flex, ToggleButton, Scroller } from '.';
interface ButtonOption {
label?: string;
@@ -14,119 +14,73 @@ interface ButtonOption {
interface SegmentedControlProps {
buttons: ButtonOption[];
- onToggle: (selected: string) => void;
- defaultSelected: string;
+ handleToggle: (selected: string) => void;
+ defaultSelected?: string;
className?: string;
style?: React.CSSProperties;
}
const SegmentedControl: React.FC = ({
buttons,
- onToggle,
+ handleToggle,
defaultSelected,
className,
style,
}) => {
const defaultIndex = buttons.findIndex(button => (button.value || button.label) === defaultSelected);
const [selectedIndex, setSelectedIndex] = useState(defaultIndex !== -1 ? defaultIndex : 0);
- const [showLeftButton, setShowLeftButton] = useState(false);
- const [showRightButton, setShowRightButton] = useState(false);
- const controlRef = useRef(null);
useEffect(() => {
if (buttons[selectedIndex]) {
- onToggle(buttons[selectedIndex].value || buttons[selectedIndex].label || '');
+ handleToggle(buttons[selectedIndex].value || buttons[selectedIndex].label || '');
}
- }, [selectedIndex, buttons, onToggle]);
-
- useEffect(() => {
- const control = controlRef.current;
- const handleScroll = () => {
- if (control) {
- const scrollLeft = control.scrollLeft;
- const maxScrollLeft = control.scrollWidth - control.clientWidth;
- setShowLeftButton(scrollLeft > 0);
- setShowRightButton(scrollLeft < maxScrollLeft - 1);
- }
- };
-
- if (control && control.scrollWidth > control.clientWidth) {
- handleScroll();
- control.addEventListener('scroll', handleScroll);
- return () => control.removeEventListener('scroll', handleScroll);
- }
- }, [buttons]);
-
- const handleScrollRight = () => {
- const control = controlRef.current;
- if (control) {
- control.scrollBy({ left: control.clientWidth / 2, behavior: 'smooth' });
- }
- };
-
- const handleScrollLeft = () => {
- const control = controlRef.current;
- if (control) {
- control.scrollBy({ left: -control.clientWidth / 2, behavior: 'smooth' });
- }
- };
+ }, [selectedIndex, buttons, handleToggle]);
const handleButtonClick = (index: number) => {
setSelectedIndex(index);
if (buttons[index]) {
- onToggle(buttons[index].value || buttons[index].label || '');
+ handleToggle(buttons[index].value || buttons[index].label || '');
}
};
return (
- {showLeftButton && (
-
- )}
-
- {buttons.map((button, index) => (
- handleButtonClick(index)}
- prefixIcon={button.prefixIcon}
- suffixIcon={button.suffixIcon}/>
- ))}
-
- {showRightButton && (
-
- )}
+
+
+
+ {buttons.map((button, index) => (
+ handleButtonClick(index)}
+ prefixIcon={button.prefixIcon}
+ suffixIcon={button.suffixIcon}
+ width="fill"
+ aria-pressed={selectedIndex === index}/>
+ ))}
+
+
+
);
};
-SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.displayName = 'SegmentedControl';
export { SegmentedControl };
export type { SegmentedControlProps, ButtonOption };
\ No newline at end of file
diff --git a/src/once-ui/components/Select.tsx b/src/once-ui/components/Select.tsx
index 1c8c735..f2bd0fc 100644
--- a/src/once-ui/components/Select.tsx
+++ b/src/once-ui/components/Select.tsx
@@ -1,6 +1,6 @@
"use client";
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
import classNames from 'classnames';
import { Icon, Dropdown, Input, InputProps } from '.';
@@ -16,14 +16,14 @@ interface SelectProps extends Omit {
renderCustomDropdownContent?: () => React.ReactNode;
}
-const Select: React.FC = ({
+const Select = forwardRef(({
options,
value,
onSelect,
renderDropdownOptions,
renderCustomDropdownContent,
...inputProps
-}) => {
+}, ref) => {
const [isFocused, setIsFocused] = useState(false);
const [isFilled, setIsFilled] = useState(!!value);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -89,7 +89,10 @@ const Select: React.FC = ({
className={classNames({
[inputStyles.filled]: isFilled,
[inputStyles.focused]: isFocused,
- })}/>
+ })}
+ aria-haspopup="listbox"
+ aria-expanded={isDropdownOpen}
+ />
{isDropdownOpen && (
= ({
className={`${styles.dropdown} ${styles.top} ${styles.fixed}`}
selectedOption={value || undefined}
ref={dropdownRef}
- onEscape={handleEscape}>
+ onEscape={handleEscape}
+ aria-labelledby={inputProps.id}>
{renderCustomDropdownContent && renderCustomDropdownContent()}
)}
);
-};
+});
Select.displayName = "Select";
-export { Select };
\ No newline at end of file
+export { Select };
+export type { SelectProps };
\ No newline at end of file
diff --git a/src/once-ui/components/Skeleton.module.scss b/src/once-ui/components/Skeleton.module.scss
index fc84afb..51dac1c 100644
--- a/src/once-ui/components/Skeleton.module.scss
+++ b/src/once-ui/components/Skeleton.module.scss
@@ -14,6 +14,11 @@
animation: skeleton-loading 1.5s infinite;
border-radius: var(--radius-l);
+ &.block {
+ width: 100%;
+ height: 100%;
+ }
+
&.line {
&.h-xs {
height: var(--static-space-8);
diff --git a/src/once-ui/components/Skeleton.tsx b/src/once-ui/components/Skeleton.tsx
index 97cb1bc..41238a7 100644
--- a/src/once-ui/components/Skeleton.tsx
+++ b/src/once-ui/components/Skeleton.tsx
@@ -1,28 +1,38 @@
"use client";
-import React from 'react';
+import React, { forwardRef} from 'react';
import classNames from 'classnames';
import styles from './Skeleton.module.scss';
interface SkeletonProps {
- shape: 'line' | 'circle';
+ shape: 'line' | 'circle' | 'block';
width?: 'xl' | 'l' | 'm' | 's' | 'xs';
height?: 'xl' | 'l' | 'm' | 's' | 'xs';
+ style?: React.CSSProperties;
className?: string;
}
-const Skeleton: React.FC
+ fillWidth paddingTop="56" paddingX="xl">
+