@razorpay/blade 3.6.1 → 3.6.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @razorpay/blade
 
+## 3.6.2
+
+### Patch Changes
+
+- 63c950a: feat(IconButton): export IconButton
+  - Adds a new `IconButton` component useful for making transparent icon only buttons
+
 ## 3.6.1
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -1069,6 +1069,35 @@ declare type ButtonWithIconProps = ButtonCommonProps & {
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, size, type, variant, accessibilityLabel, }: ButtonProps) => React.ReactElement;
 
+declare type IconButtonProps = {
+    /**
+     * Icon component to be rendered, eg. `CloseIcon`
+     */
+    icon: IconComponent$1;
+    onClick: () => void;
+    /**
+     * Icon size
+     *
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Icon contrast
+     *
+     * @default 'low'
+     */
+    contrast?: 'low' | 'high';
+    /**
+     * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
+     */
+    accessibilityLabel: string;
+};
+/**
+ * Component for making clickable icons with transparent background.
+ * For other cases please use `Button` component with `icon` prop.
+ */
+declare const IconButton: ({ icon, onClick, size, contrast, accessibilityLabel, }: IconButtonProps) => ReactElement;
+
 declare type CounterProps = {
     /**
      * Sets the value for the counter.
@@ -2015,4 +2044,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

package/build/components/index.native.d.ts

@@ -1069,6 +1069,35 @@ declare type ButtonWithIconProps = ButtonCommonProps & {
 declare type ButtonProps = ButtonWithoutIconProps | ButtonWithIconProps;
 declare const Button: ({ children, icon, iconPosition, isDisabled, isFullWidth, isLoading, onClick, size, type, variant, accessibilityLabel, }: ButtonProps) => React.ReactElement;
 
+declare type IconButtonProps = {
+    /**
+     * Icon component to be rendered, eg. `CloseIcon`
+     */
+    icon: IconComponent$1;
+    onClick: () => void;
+    /**
+     * Icon size
+     *
+     * @default 'medium'
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Icon contrast
+     *
+     * @default 'low'
+     */
+    contrast?: 'low' | 'high';
+    /**
+     * Sets aria-label to help users know what the action does, eg 'Dismiss alert'
+     */
+    accessibilityLabel: string;
+};
+/**
+ * Component for making clickable icons with transparent background.
+ * For other cases please use `Button` component with `icon` prop.
+ */
+declare const IconButton: ({ icon, onClick, size, contrast, accessibilityLabel, }: IconButtonProps) => ReactElement;
+
 declare type CounterProps = {
     /**
      * Sets the value for the counter.
@@ -2003,4 +2032,4 @@ declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element
 
 declare const screenReaderStyles: CSSObject;
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BadgeProps, BladeProvider, BladeProviderProps, Button, ButtonProps, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, CodeProps, Counter, CounterProps, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HeadingProps, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, InfoIcon, Link, LinkIcon, LinkProps, MinusIcon, OTPInput, OTPInputProps, PasswordInput, PasswordInputProps, PauseIcon, PlusIcon, Radio, RadioGroup, RadioGroupProps, RadioProps, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, SpinnerProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, Title, TitleProps, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, VisuallyHiddenProps, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };

package/build/components/index.native.js

@@ -3491,5 +3491,5 @@ var Spinner=function Spinner(_ref){var _ref2;var label=_ref.label,labelPosition=
 
 var SkipNavLink=function SkipNavLink(_props){throw new Error('[Blade: SkipNav]: SkipNavLink is not available on React Native');};var SkipNavContent=function SkipNavContent(_props){throw new Error('[Blade: SkipNav]: SkipNavContent is not available on React Native');};
 
-export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
+export { Alert, AlertTriangleIcon as AlertOctagonIcon, AlertTriangleIcon$1 as AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, Badge, BladeProvider, Button, CheckCircleIcon, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Code, Counter, CreditCardIcon, DollarIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, InfoIcon, Link, LinkIcon, MinusIcon, OTPInput, PasswordInput, PauseIcon, PlusIcon, Radio, RadioGroup, RefreshLeftIcon, RotateCounterClockWiseIcon, RupeeIcon, SearchIcon, SkipNavContent, SkipNavLink, Spinner, Text, TextArea, TextInput, Title, TrashIcon, TrendingDownIcon, TrendingUpIcon, VisuallyHidden, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
 //# sourceMappingURL=index.native.js.map