@teamturing/react-kit 2.44.4 → 2.45.0

package/dist/core/ClickArea/index.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { ViewProps } from '../View';
+type Props = {
+    disabled?: boolean;
+} & ViewProps & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    disabled?: boolean | undefined;
+} & import("../..").SxProp & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/black" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected" | "text/weak" | "surface" | "surface/overlay"> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/black" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected" | "text/weak" | "surface" | "surface/overlay"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "none" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "full"> & import("../../utils/styled-system").GapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").ColumnGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").RowGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & Pick<HTMLAttributes<HTMLDivElement>, "onClick"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+export type { Props as ClickAreaProps };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export { default as Checkbox } from './core/Checkbox';
 export type { CheckboxProps } from './core/Checkbox';
 export { default as Chip } from './core/Chip';
 export type { ChipProps } from './core/Chip';
+export { default as ClickArea } from './core/ClickArea';
+export type { ClickAreaProps } from './core/ClickArea';
 export { default as CounterBadge } from './core/CounterBadge';
 export type { CounterBadgeProps } from './core/CounterBadge';
 export { default as Datagrid } from './core/Datagrid';

package/dist/index.js

@@ -1102,7 +1102,7 @@ const UnstyledTable = styled__default.default.table`
 
   ${sx}
 `;
-var index$e = Object.assign(UnstyledTable, {
+var index$f = Object.assign(UnstyledTable, {
   Head: UnstyledTableHead,
   Body: UnstyledTableBody,
   Row: UnstyledTableRow,
@@ -2579,6 +2579,17 @@ const SvgFireColor = props => /*#__PURE__*/React__namespace.createElement("svg",
   clipRule: "evenodd"
 }));
 
+const SvgFlag = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M5.611.747c.717 0 1.237.583 1.239 1.3v.621l.468.044c2.639.243 4.067.727 6.36 2.174s3.654 2.624 6.038 3.196l1.585.324c.459.087.65.608.096 1.042 0 0-1.111 1.151-2.596 1.84-1.485.687-2.795 1.184-5.123 1.01-2.328-.172-3.58-.022-4.957.592l-1.854.834.014 8.243c.001.71-.55 1.285-1.26 1.286-.713 0-1.319-.578-1.32-1.291L4.27 2.027C4.269 1.32 4.904.747 5.61.747Z"
+}));
+
 const SvgFolder = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -4985,6 +4996,7 @@ var icons = /*#__PURE__*/Object.freeze({
   FindIcon: SvgFind,
   FireColorIcon: SvgFireColor,
   FireIcon: SvgFire,
+  FlagIcon: SvgFlag,
   FolderIcon: SvgFolder,
   FrameIcon: SvgFrame,
   GlassesIcon: SvgGlasses,
@@ -7388,7 +7400,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$d = Object.assign(ActionList, {
+var index$e = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -16659,7 +16671,7 @@ const BaseAvatar = styled__default.default(Image)`
 })}
   ${sx}
 `;
-var index$c = /*#__PURE__*/React.forwardRef(Avatar);
+var index$d = /*#__PURE__*/React.forwardRef(Avatar);
 
 const BadgeAttacher = ({
   children,
@@ -17092,7 +17104,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$b = Object.assign(Breadcrumbs, {
+var index$c = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -17860,6 +17872,29 @@ const BaseChip = styled__default.default.span(({
   }
 }), sx);
 
+const ClickArea = ({
+  disabled,
+  onClick,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseClickArea, {
+  ref: ref,
+  ...props,
+  role: 'button',
+  "aria-disabled": disabled,
+  disabled: disabled,
+  ...(!disabled ? {
+    onClick
+  } : {})
+});
+const BaseClickArea = styled__default.default(View)`
+  &:hover {
+    cursor: ${({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
+var index$b = /*#__PURE__*/React.forwardRef(ClickArea);
+
 const CounterBadge = ({
   variant = 'red',
   size = 'm',
@@ -40084,14 +40119,15 @@ const useTabState = ({
   return [selectedIndex, handleSelect];
 };
 
-exports.ActionList = index$d;
+exports.ActionList = index$e;
 exports.AnimatePresence = AnimatePresence;
-exports.Avatar = index$c;
+exports.Avatar = index$d;
 exports.BadgeAttacher = BadgeAttacher;
-exports.Breadcrumbs = index$b;
+exports.Breadcrumbs = index$c;
 exports.Button = Button;
 exports.Checkbox = Checkbox$1;
 exports.Chip = Chip;
+exports.ClickArea = index$b;
 exports.CounterBadge = CounterBadge;
 exports.Datagrid = index$a;
 exports.DescriptionList = DescriptionList;
@@ -40129,7 +40165,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip$1;
 exports.UnstyledButton = UnstyledButton;
-exports.UnstyledTable = index$e;
+exports.UnstyledTable = index$f;
 exports.View = View;
 exports.columnGap = columnGap;
 exports.gap = gap;

package/esm/core/ClickArea/index.js

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const ClickArea = ({
+  disabled,
+  onClick,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseClickArea, {
+  ref: ref,
+  ...props,
+  role: 'button',
+  "aria-disabled": disabled,
+  disabled: disabled,
+  ...(!disabled ? {
+    onClick
+  } : {})
+});
+const BaseClickArea = styled(View)`
+  &:hover {
+    cursor: ${({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
+var index = /*#__PURE__*/forwardRef(ClickArea);
+
+export { index as default };

package/esm/index.js

@@ -6,6 +6,7 @@ export { default as Breadcrumbs } from './core/Breadcrumbs/index.js';
 export { default as Button } from './core/Button/index.js';
 export { default as Checkbox } from './core/Checkbox/index.js';
 export { default as Chip } from './core/Chip/index.js';
+export { default as ClickArea } from './core/ClickArea/index.js';
 export { default as CounterBadge } from './core/CounterBadge/index.js';
 export { default as Datagrid } from './core/Datagrid/index.js';
 export { default as DescriptionList } from './core/DescriptionList/index.js';

package/esm/packages/icons/esm/Flag.js

@@ -0,0 +1,15 @@
+import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+
+const SvgFlag = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M5.611.747c.717 0 1.237.583 1.239 1.3v.621l.468.044c2.639.243 4.067.727 6.36 2.174s3.654 2.624 6.038 3.196l1.585.324c.459.087.65.608.096 1.042 0 0-1.111 1.151-2.596 1.84-1.485.687-2.795 1.184-5.123 1.01-2.328-.172-3.58-.022-4.957.592l-1.854.834.014 8.243c.001.71-.55 1.285-1.26 1.286-.713 0-1.319-.578-1.32-1.291L4.27 2.027C4.269 1.32 4.904.747 5.61.747Z"
+}));
+
+export { SvgFlag as default };

package/esm/packages/icons/esm/index.js

@@ -93,6 +93,7 @@ export { default as FilterIcon } from './Filter.js';
 export { default as FindIcon } from './Find.js';
 export { default as FireIcon } from './Fire.js';
 export { default as FireColorIcon } from './FireColor.js';
+export { default as FlagIcon } from './Flag.js';
 export { default as FolderIcon } from './Folder.js';
 export { default as FrameIcon } from './Frame.js';
 export { default as GlassesIcon } from './Glasses.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.44.4",
+  "version": "2.45.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.52.0",
+    "@teamturing/icons": "^1.53.0",
     "@teamturing/token-studio": "^1.12.0",
     "@teamturing/utils": "^1.4.0",
     "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "aff0367741217c45cca751d63865dcf8c002b988"
+  "gitHead": "949a6c520a3f05ddbdcf4c8c51567b0f069b7bf0"
 }